<template>
  <view class="page-shell product-detail-page">
    <view class="page-blur"></view>
    <view class="page-blur-secondary"></view>
    <view class="page-blur-tertiary"></view>

    <view class="page-content subpage-content">
      <view class="subpage-nav">
        <view class="subpage-back" @tap="goBack">‹</view>
        <view class="subpage-title-wrap">
          <text class="subpage-title">商品详情</text>
          <text class="subpage-subtitle">把门店里的护理感，慢慢带回日常</text>
        </view>
      </view>

      <view class="product-hero glass-card">
        <image class="product-image" :src="product.image" mode="aspectFill" />
      </view>

      <view class="subpage-card">
        <text class="product-badge">{{ product.badge }}</text>
        <text class="product-title">{{ product.name }}</text>
        <text class="product-price">¥{{ product.price }}</text>
        <text class="product-desc">{{ product.desc }}</text>
        <view class="meta-grid">
          <text v-for="tag in product.tags" :key="tag" class="meta-pill">{{ tag }}</text>
        </view>
      </view>

      <view class="subpage-card">
        <view class="section-head">
          <text class="section-title">产品说明</text>
          <text class="section-link">居家护理</text>
        </view>
        <text class="detail-copy">{{ product.detail }}</text>
        <view class="soft-panel spec-panel">
          <text v-for="item in product.specs" :key="item" class="spec-item">{{ item }}</text>
        </view>
      </view>

      <view class="cta-row">
        <view class="secondary-button" @tap="addWishlist">{{ isWishlisted ? '查看心愿单' : '加入心愿单' }}</view>
        <view class="primary-button" @tap="goOrder">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { findProductById } from '@/packageMall/data/products'

export default {
  data() {
    return {
      product: findProductById(1),
      isWishlisted: false
    }
  },
  onLoad(options) {
    this.product = findProductById(options.id)
    this.loadWishlistState()
  },
  onShow() {
    this.loadWishlistState()
  },
  methods: {
    loadWishlistState() {
      const list = uni.getStorageSync('lf_wishlist') || []
      this.isWishlisted = list.indexOf(this.product.id) > -1
    },
    goBack() {
      uni.navigateBack({
        fail: () => {
          uni.redirectTo({ url: '/packageMall/main/main' })
        }
      })
    },
    addWishlist() {
      if (this.isWishlisted) {
        uni.navigateTo({ url: '/packageMall/wishlist/wishlist' })
        return
      }
      const list = uni.getStorageSync('lf_wishlist') || []
      if (list.indexOf(this.product.id) === -1) {
        list.push(this.product.id)
        uni.setStorageSync('lf_wishlist', list)
      }
      this.isWishlisted = true
      uni.showToast({ title: '已加入心愿单', icon: 'none' })
      setTimeout(() => {
        uni.navigateTo({ url: '/packageMall/wishlist/wishlist' })
      }, 280)
    },
    goOrder() {
      uni.navigateTo({ url: `/packageMall/order-confirm/order-confirm?productId=${this.product.id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';

.product-hero {
  padding: 0;
  overflow: hidden;
  margin-bottom: 28rpx;
}

.product-image {
  width: 100%;
  height: 620rpx;
  display: block;
}

.product-badge {
  @include chip-soft;
}

.product-title {
  display: block;
  margin-top: 18rpx;
  font-size: 40rpx;
  line-height: 1.4;
  font-weight: 700;
}

.product-price {
  display: block;
  margin-top: 18rpx;
  font-size: 46rpx;
  font-weight: 700;
  color: $brand-primary-deep;
}

.product-desc,
.detail-copy {
  display: block;
  margin-top: 18rpx;
  font-size: 24rpx;
  line-height: 1.8;
  color: $text-secondary;
}

.spec-panel {
  margin-top: 24rpx;
}

.spec-item {
  display: block;
  font-size: 24rpx;
  line-height: 1.9;
  color: $text-primary;
}
</style>
