<template>
  <view class="goods-detail">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="iconfont icon-fanhui"></text>
      </view>
      <text class="nav-title">商品详情</text>
      <view class="nav-right"></view>
    </view>
    
    <!-- 商品图片轮播 -->
    <swiper 
      class="goods-swiper" 
      :indicator-dots="true"
      indicator-color="rgba(0,0,0,0.3)"
      indicator-active-color="#FF4D4F"
    >
      <swiper-item v-for="(image, index) in sliderImage" :key="index">
        <image 
          :src="image" 
          class="swiper-image" 
          mode="aspectFill"
          @click="previewImage(index)"
        />
      </swiper-item>
    </swiper>
    
    <!-- 商品信息 -->
    <view class="wrapper" v-if="attr.productSelect">
      <view class="share-section">
        <view class="money-box">
          <text class="points-symbol">积分</text>
          <text class="points-num">{{ attr.productSelect.price || 0 }}</text>
        </view>
      </view>
      
      <view class="introduce">{{ productInfo.storeName }}</view>
      
      <!-- <view class="label">
        <view>原价:￥{{ attr.productSelect.otPrice || 0 }}</view>
        <view>库存:{{ attr.productSelect.stock || 0 }}{{ productInfo.unitName }}</view>
        <view>销量:{{ Number(productInfo.sales) + Number(productInfo.ficti) }}{{ productInfo.unitName }}</view>
      </view> -->
    </view>
    
    <!-- 规格选择 -->
    <view class="attribute" @click="selecAttr">
      <view class="attr-row">
        <view class="attr-text">{{attrTxt}}：<text class="selected-attr">{{attrValue}}</text></view>
        <view class="iconfont icon-jiantou arrow-right"></view>
      </view>
    </view>
    
    <!-- 属性选择组件 -->
    <productWindow 
      :attr="attr" 
      :isShow='1' 
      :iSplus='1' 
      @myevent="onMyEvent" 
      @ChangeAttr="ChangeAttr"
      @ChangeCartNum="ChangeCartNum" 
      @attrVal="attrVal" 
      @iptCartNum="iptCartNum">
    </productWindow>
    
    <!-- 商品详情 -->
    <view class="detail-section">
      <view class="detail-info-list" v-if="attr.productSelect">
        <view class="detail-item">库存：{{ attr.productSelect.stock || 0 }}件</view>
        <!-- <view class="detail-item">已兑换：{{ Number(productInfo.sales) + Number(productInfo.ficti) }}件</view> -->
      </view>
      <view class="detail-content">
        <rich-text :nodes="description" />
      </view>
    </view>
    
    <!-- 浮动购物车按钮 -->
    <view class="floating-cart animated" :class="animated ? 'bounceIn' : ''" @click="goToCart">
      <view class='iconfont icon-gouwuche1'>
        <text v-if="Math.floor(CartCount) > 0" class='cart-badge'>{{CartCount}}</text>
      </view>
      <!-- <view class="cart-text">购物车</view> -->
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar safe-area-inset-bottom">
      <view class="btn-group">
        <view class="btn-cart" @click="onCartAdd">
          <text>加入购物车</text>
        </view>
        <view 
          class="btn-buy"
          :class="{ disabled: attr.productSelect && attr.productSelect.stock <= 0 }"
          @click="onExchange"
        >
          <text>{{ exchangeButtonText }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { collectIntegralGoods } from '@/api/miao.js'
import { getProductDetail, postCartAdd } from '@/api/store.js';
import { getCartCounts } from '@/api/order.js';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from "vuex";
import productWindow from '@/components/productWindow';

export default {
  components: {
    productWindow
  },
  
  data() {
    return {
			goodsId: 0,
			productInfo: {
				sales: 0,
				ficti: 0,
				unitName: '件'
			},
			productValue: {},
			skuArr: [],
			sliderImage: [],
			attr: {
				cartAttr: false,
				productAttr: [],
				productSelect: {
					price: 0,
					stock: 0,
					otPrice: 0,
					unique: '',
					cart_num: 1
				}
			},
			attrValue: '',
			attrTxt: '请选择',
			reply: [],
			replyCount: 0,
			replyChance: 0,
			description: '',
			isOpen: false, // 是否打开过属性选择器
			CartCount: 0, // 购物车数量
			animated: false // 购物车动画
		}
	},

	computed: {
		...mapGetters(['isLogin', 'uid']),
		
		exchangeButtonText() {
			if (this.attr.productSelect && this.attr.productSelect.stock <= 0) {
				return '库存不足'
			}
			return '立即兑换'
		}
	},

	onLoad(options) {
		if (options.id) {
			this.goodsId = parseInt(options.id)
			this.getDetail()
		}
	},

	onShow() {
		// 从兑换页面返回时刷新数据
		if (this.goodsId) {
			this.getDetail()
		}
		// 获取购物车数量
		this.getCartCount();
	},

	methods: {
		// 获取商品详情
		getDetail() {
			let that = this;
			uni.showLoading({
				title: '加载中...'
			})
			getProductDetail(that.goodsId, 1).then(res => {
				let productInfo = res.data.productInfo;
				// 字符串数组转数组；
				let arrayImg = productInfo.sliderImage;
				let sliderImage = JSON.parse(arrayImg);
				that.$set(that, 'sliderImage', sliderImage);
				that.$set(that, 'productInfo', productInfo);
				that.$set(that, 'description', productInfo.content);
				that.$set(that.attr, 'productAttr', res.data.productAttr);
				that.$set(that, 'productValue', res.data.productValue);
				that.skuArr = [];
				for (let key in res.data.productValue) {
					let obj = res.data.productValue[key];
					that.skuArr.push(obj)
				}
				
				let productAttr = that.attr.productAttr.map(item => {
					return {
						attrName: item.attrName,
						attrValues: item.attrValues.split(','),
						id: item.id,
						isDel: item.isDel,
						productId: item.productId,
						type: item.type
					}
				});
				that.$set(that.attr, 'productAttr', productAttr);
				
				that.DefaultSelect();
				uni.hideLoading();
			}).catch(err => {
				uni.hideLoading();
				uni.showToast({
					title: err.msg || '加载失败',
					icon: 'none'
				})
			})
		},

		/**
		 * 默认选中属性
		 * 
		 */
		DefaultSelect: function() {
			let productAttr = this.attr.productAttr;
			let value = [];
			//默认选中每种规格的第一个
			for (let key in this.productValue) {
				if (this.productValue[key].stock > 0) {
					value = this.attr.productAttr.length ? key.split(",") : [];
					break;
				}
			}
			for (let i = 0; i < value.length; i++) {
				this.$set(productAttr[i], "index", value[i]);
			}

			//sort();排序函数:数字-英文-汉字；
			let productSelect = this.productValue[value.join(",")];
			if (productSelect && productAttr.length) {
				this.$set(this.attr.productSelect, "storeName", this.productInfo.storeName);
				this.$set(this.attr.productSelect, "image", productSelect.image);
				this.$set(this.attr.productSelect, "price", productSelect.price);
				this.$set(this.attr.productSelect, "stock", productSelect.stock);
				this.$set(this.attr.productSelect, "unique", productSelect.id);
				this.$set(this.attr.productSelect, "cart_num", 1);
				this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice);
				this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice);
				this.$set(this, "attrValue", value.join(","));
				this.$set(this, "attrTxt", "已选择");
			} else if (!productSelect && productAttr.length) {
				this.$set(this.attr.productSelect, "storeName", this.productInfo.storeName);
				this.$set(this.attr.productSelect, "image", this.productInfo.image);
				this.$set(this.attr.productSelect, "price", this.productInfo.price);
				this.$set(this.attr.productSelect, "stock", 0);
				this.$set(this.attr.productSelect, "unique", this.productInfo.id);
				this.$set(this.attr.productSelect, "cart_num", 1);
				this.$set(this.attr.productSelect, "vipPrice", this.productInfo.vipPrice);
				this.$set(this.attr.productSelect, 'otPrice', this.productInfo.otPrice);
				this.$set(this, "attrValue", "");
				this.$set(this, "attrTxt", "请选择");
			} else if (!productSelect && !productAttr.length) {
				this.$set(this.attr.productSelect, "storeName", this.productInfo.storeName);
				this.$set(this.attr.productSelect, "image", this.productInfo.image);
				this.$set(this.attr.productSelect, "price", this.productInfo.price);
				this.$set(this.attr.productSelect, "stock", this.productInfo.stock);
				this.$set(this.attr.productSelect, "unique", this.productInfo.id || "");
				this.$set(this.attr.productSelect, "cart_num", 1);
				this.$set(this.attr.productSelect, "vipPrice", this.productInfo.vipPrice);
				this.$set(this.attr.productSelect, 'otPrice', this.productInfo.otPrice);
				this.$set(this, "attrValue", "");
				this.$set(this, "attrTxt", "已选择");
			}
		},
    
    // 预览图片
    previewImage(index) {
      uni.previewImage({
        urls: this.sliderImage,
        current: index
      })
    },
    
    // 打开属性选择器
    selecAttr() {
      this.$set(this.attr, 'cartAttr', true);
      this.$set(this, 'isOpen', true);
    },
    
    // 关闭属性选择器
    onMyEvent() {
      this.$set(this.attr, 'cartAttr', false);
      this.$set(this, 'isOpen', false);
    },
    
    // 属性变动赋值
    ChangeAttr(res) {
      let productSelect = this.productValue[res];
      if (productSelect) {
        this.$set(this.attr.productSelect, "image", productSelect.image);
        this.$set(this.attr.productSelect, "price", productSelect.price);
        this.$set(this.attr.productSelect, "stock", productSelect.stock);
        this.$set(this.attr.productSelect, "unique", productSelect.id);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice);
        this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice);
        this.$set(this, "attrValue", res);
        this.$set(this, "attrTxt", "已选择");
      } else {
        this.$set(this.attr.productSelect, "image", this.productInfo.image);
        this.$set(this.attr.productSelect, "price", this.productInfo.price);
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", this.productInfo.id);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this.attr.productSelect, "vipPrice", this.productInfo.vipPrice);
        this.$set(this.attr.productSelect, 'otPrice', this.productInfo.otPrice);
        this.$set(this, "attrValue", "");
        this.$set(this, "attrTxt", "请选择");
      }
    },
    
    // 购物车数量加减
    ChangeCartNum(changeValue) {
      let productSelect = this.productValue[this.attrValue];
      if (productSelect === undefined && !this.attr.productAttr.length)
        productSelect = this.attr.productSelect;
      if (productSelect === undefined) return;
      
      let stock = productSelect.stock || 0;
      let num = this.attr.productSelect;
      if (changeValue) {
        num.cart_num++;
        if (num.cart_num > stock) {
          this.$set(this.attr.productSelect, "cart_num", stock);
        }
      } else {
        num.cart_num--;
        if (num.cart_num < 1) {
          this.$set(this.attr.productSelect, "cart_num", 1);
        }
      }
    },
    
    // 属性值选择
    attrVal(val) {
      this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attrValues[val.indexn]);
    },
    
    // 购物车手动填写
    iptCartNum(e) {
      this.$set(this.attr.productSelect, 'cart_num', e ? e : 1);
    },
    
    // 加入购物车
    onCartAdd() {
      // 检查是否登录
      if (this.isLogin === false) {
        toLogin();
        return;
      }
      
      // 调用统一的处理方法，1 表示加入购物车
      this.goCat(1);
    },
    
    // 立即兑换
    onExchange() {
      // 检查库存
      if (this.attr.productSelect && this.attr.productSelect.stock <= 0) {
        uni.showToast({
          title: '库存不足',
          icon: 'none'
        });
        return;
      }
      
      // 检查是否登录
      if (this.isLogin === false) {
        toLogin();
        return;
      }
      
      // 调用统一的处理方法，0 表示立即购买
      this.goCat(0);
    },
    
    /**
     * 统一处理加入购物车和立即兑换
     * @param {Number} num 1-加入购物车 0-立即购买/兑换
     */
    goCat(num) {
      let that = this;
      let productSelect = that.productValue[this.attrValue];
      
      // 打开属性选择器
      if (that.attrValue) {
        // 默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
        that.attr.cartAttr = !that.isOpen ? true : false;
      } else {
        if (that.isOpen) that.attr.cartAttr = true;
        else that.attr.cartAttr = !that.attr.cartAttr;
      }
      
      // 只有关闭属性弹窗时进行操作
      if (that.attr.cartAttr === true && that.isOpen === false) {
        return (that.isOpen = true);
      }
      
      // 如果有属性,没有选择或库存为0,提示用户选择
      if (
        that.attr.productAttr.length &&
        productSelect &&
        productSelect.stock === 0 &&
        that.isOpen === true
      ) {
        uni.showToast({
          title: "产品库存不足，请选择其它",
          icon: 'none'
        });
        return;
      }
      
      // 执行对应操作
      if (num === 1) {
        // 加入购物车
        let q = {
          productId: parseFloat(that.goodsId),
          cartNum: parseFloat(that.attr.productSelect.cart_num),
          isNew: false,
          productAttrUnique: that.attr.productSelect !== undefined ?
            that.attr.productSelect.unique : that.productInfo.id
        };
        
        postCartAdd(q).then(function(res) {
          that.isOpen = false;
          that.attr.cartAttr = false;
          uni.showToast({
            title: "添加购物车成功",
            icon: 'success'
          });
          // 更新购物车数量
          that.getCartCount(true);
        }).catch(res => {
          that.isOpen = false;
          that.attr.cartAttr = false;
          uni.showToast({
            title: res.msg || '添加失败',
            icon: 'none'
          });
        });
      } else {
        // 立即兑换 - 直接跳转到积分商城下单页面
        this.goToConfirm();
      }
    },
    
    // 直接跳转到积分商城下单页面
    goToConfirm() {
      // 保存商品信息到缓存
      const goodsInfo = {
        id: this.goodsId,
        name: this.productInfo.storeName,
        storeName: this.productInfo.storeName,
        image: this.attr.productSelect.image || this.productInfo.image,
        pic: this.attr.productSelect.image || this.productInfo.image,
        points: this.attr.productSelect.price || this.productInfo.price,
        integral: this.attr.productSelect.price || this.productInfo.price,
        quantity: this.attr.productSelect.cart_num || 1,
        attrValueId: this.attr.productSelect.unique || '',
        unique: this.attr.productSelect.unique || '',
        productAttrUnique: this.attr.productSelect.unique || '',
        sku: this.attrValue || ''
      };
      
      uni.setStorageSync('buy_now_goods', goodsInfo);
      
      this.isOpen = false;
      this.attr.cartAttr = false;
      
      // 跳转到积分商城下单页面
      uni.navigateTo({
        url: `/pages/integral/confirm?id=${this.goodsId}&quantity=${this.attr.productSelect.cart_num || 1}`
      });
    },
    
    /**
     * 获取购物车数量
     * @param {Boolean} isAnima 是否展示购物车动画和重置属性
     */
    getCartCount(isAnima) {
      let that = this;
      const isLogin = that.isLogin;
      if (isLogin) {
        getCartCounts(true, 'total').then(res => {
          that.CartCount = res.data.count;
          // 加入购物车后重置属性
          if (isAnima) {
            that.animated = true;
            setTimeout(function() {
              that.animated = false;
            }, 500);
          }
        });
      }
    },
    
    // 跳转购物车
    goToCart() {
      uni.navigateTo({
        url: '/pages/integral/cart',
        fail: (err) => {
          console.error('跳转购物车失败:', err);
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-detail {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 120rpx;
}

// 顶部导航栏
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 113.344rpx;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 31.996rpx;
  z-index: 200;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.nav-back {
  width: 72rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  
  .iconfont {
    font-size: 36rpx;
    color: #FFFFFF;
  }
}

.nav-title {
  flex: 1;
  font-size: 32rpx;
  color: #FFFFFF;
  font-weight: normal;
  text-align: center;
  line-height: 48rpx;
}

.nav-right {
  width: 72rpx;
  height: 64rpx;
}

// 图片轮播
.goods-swiper {
  width: 100%;
  height: 750rpx;
  background-color: #FFFFFF;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

// 仿照 goods_details 的 wrapper 样式
.wrapper {
  background-color: #fff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 14rpx;
}

.share-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20rpx;
}

.money-box {
  display: flex;
  align-items: baseline;
  color: #FF4D4F;
}

.points-num {
  font-size: 48rpx;
  font-weight: bold;
}

.points-symbol {
  font-size: 24rpx;
  margin-right: 4rpx;
  font-weight: bold;
}

.introduce {
  font-size: 32rpx;
  color: #282828;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

// 仿照 goods_details 的 attribute 样式
.attribute {
  background-color: #fff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 14rpx;
}

.attr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.attr-text {
  font-size: 28rpx;
  color: #282828;
  width: 600rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.selected-attr {
  color: #666;
  margin-left: 10rpx;
}

.arrow-right {
  font-size: 24rpx;
  color: #999;
}

// 兑换规则
.rules-section,
.detail-section {
  margin: 20rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 24rpx;
}

.detail-info-list {
  margin-bottom: 30rpx;
}

.detail-item {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

// 底部操作栏
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FFFFFF;
  border-top: 1px solid #EEEEEE;
  padding: 20rpx 30rpx;
  z-index: 100;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 20rpx;
}

// 浮动购物车按钮
.floating-cart {
  position: fixed;
  right: 30rpx;
  bottom: calc(240rpx + constant(safe-area-inset-bottom));
  bottom: calc(240rpx + env(safe-area-inset-bottom));
  width: 100rpx;
  height: 100rpx;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  z-index: 101;
  
  .iconfont {
    font-size: 44rpx;
    color: #FF4D4F;
    position: relative;
  }
  
  .cart-badge {
    position: absolute;
    top: -8rpx;
    right: -16rpx;
    background: linear-gradient(90deg, #FF6900 0%, #FF4D4F 100%);
    color: #FFFFFF;
    font-size: 18rpx;
    padding: 2rpx 8rpx 3rpx;
    border-radius: 200rpx;
    min-width: 28rpx;
    text-align: center;
  }
  
  .cart-text {
    font-size: 18rpx;
    color: #666666;
    margin-top: 2rpx;
  }
}

.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

.bounceIn {
  animation-name: bounceIn;
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.btn-group {
  flex: 1;
  display: flex;
  gap: 20rpx;
}

.btn-cart,
.btn-buy {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.btn-cart {
  background-color: #FFFFFF;
  border: 1px solid #EEEEEE;
  color: #333333;
}

.btn-buy {
  background: linear-gradient(90deg, #FF6900 0%, #FF4D4F 100%);
  color: #FFFFFF;
  
  &.disabled {
    background: #CCCCCC;
    color: #FFFFFF;
  }
}
.detail-content img, .detail-content image{
  width: 100%;
}
</style>
