<import src="../../wxParse/wxParse.wxml" />
<import src="../../templates/toast/toast.wxml" />
<scroll-view class="page" scroll-y="true" id="product-detail">
    <view class="section swiper-container">
        <swiper indicator-dots="{{indicatorDots}}" autoplay="true" interval="3000" duration="300" bindchange="currentchange">
            <block wx:for="{{product.picture}}">
                <swiper-item class="picture">
                    <image mode="aspectFill" src="{{item}}"></image>
                </swiper-item>
            </block>
        </swiper>
        <text class="index-con">{{current}} / {{product.picture.length}}</text>
    </view>
    <view class="product-detail">
        <view class="detail product-name">{{product.goods_name}}</view>
        <view class="detail product-price">¥ {{product.goods_price}}</view>
        <view class=" product-market">
            <text>市场价：¥ {{product.market_price}}</text>
            <text class="product-sold">已售{{product.sold_count}}件</text>
        </view>
    </view>
    <view class="product-car">
        <button class="car" bindtap="navigateToCart">
            <view class="cart-wrapper">
                <image src="../../images/cart.png"></image>
                <text class="badge badge-animation" wx:if="{{cartNum>0}}">{{cartNum}}</text>
            </view>
        </button>
        <button class="add-car" bindtap="addCar">加入到购物车</button>
    </view>
    <view class="product-recommend">
        <view wx:for="{{wxParseData}}" wx:for-item="activity">
            <view wx:for="{{activity.child}}" wx:for-item="act">
                <view wx:if="{{activity.tag == 'p'}}">{{act.text}}</view>
                <view class="con-text-center" wx:if="{{act.tag == 'img' || act.tag == 'gif'}}">
                    <image src="{{act.attr.src}}" mode="aspectFit"></image>
                </view>
            </view>
        </view>
    </view>
    <view class="adding-to-cart-popup-background" style="display:{{popDisplay}}">
        <view class="adding-to-cart-popup">
            <view class="header">
                <view class="close" bindtap="closePop"><image src="close.png"></image></view>
                <image alt="" class="product-image" src="{{product.goods_image}}"></image>
                <view class="product-info">
                    <view class="stock-price text-primary p">￥ {{goodsPrice}}</view>
                    <view class="stock p">库存{{totalStock}}件</view>
                    <view class="spec-title p">请选择口味和重量</view>
                </view>
            </view>
            <view class="section">
                <view class="specs" wx:for="{{product.spec}}" wx:for-item="spec">
                    <text class="h2">{{spec.spec_name}}</text>
                    <view class="spec-btns">
                        <button wx:for="{{spec.value}}"  data-spec-id="{{spec.spec_id}}" data-value-id="{{item.value_id}}" disabled="{{item.disabled}}" class="{{item.class}}" catchtap="choseSpec">{{item.value_text}}</button>
                    </view>
                </view>
                <view class="quantity">
                    <text class="h2">购买数量</text>
                    <view class="counter">
                        <button class="{{subButton.class}}" disabled="{{subButton.disabled}}" catchtap="subShopNum">-</button>
                        <text class="{{buyNumClass}}">{{buyNum}}</text>
                        <button  class="{{addButton.class}}" disabled="{{addButton.disabled}}" catchtap="addShopNum">+</button>
                    </view>
                </view>
            </view>
            <view class="footer">
                <button catchtap="submitCart">确定</button>
            </view>
        </view>
    </view>
    <template is="toast" data="{{...toast}}"/>
</scroll-view>

.page{
    height: 100%;
    background-color: #f8f8f8;
}
.swiper-container {
    position: relative;
    margin-top: 0;
    padding: 0;
    margin-bottom: 0;
}

.swiper-container swiper {
    height: 315.9rpx;
}

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

.index-con {
    position: absolute;
    right: 10rpx;
    bottom: 10rpx;
    padding: 2rpx 10rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 16rpx;
    font-size: 26rpx;
}

.product-detail {
    background-color: #fff;
    margin-top: 0;
    padding-left: 10rpx;
}

.product-name {
    font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
    font-size: 28.12rpx;
    letter-spacing: 5rpx;
    font-weight: bold;
}

.product-price {
    display: block;
    color: #fc3151;
}

.product-market {
    font-size: 24rpx;
    padding-bottom: 15rpx;
    color: slategray;
    text-decoration: line-through;
}

.detail {
    padding-top: 15rpx;
    padding-bottom: 15rpx;
}

.product-sold {
    color: black;
    float: right;
    padding-right: 10rpx;
}

.product-recommend {
    margin: 15rpx 0 120rpx;
    background-color: #fff;
    word-wrap: break-word;
    word-break: break-all;
}

.text-center,
.con-text-center {
    text-align: center;
}

.con-text-center image {
    width: 100%;
}

button {
    height: 75rpx;
    float: left;
    padding: 0;
    border-radius: .3rem;
    font-size: 35rpx;
    margin-top: 15rpx;
    border: 1px solid #efefef;
}

.product-car {
    padding-left: 30rpx;
    width: 100%;
    height: 105rpx;
    position: fixed;
    bottom: 0;
    background: white;
    border-top: 1px solid #ddd;
}

.add-car {
    width: 500rpx;
    margin-left: 35rpx;
    margin-right: 55rpx;
    text-align: center;
    background-color: #fc3151;
    color: #fff;
    float: right;
    font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.car {
    width: 155rpx;
    height: 75rpx;
    display: block;
    position: relative;
}

.cart-wrapper{
    height: 42rpx;
}
.car image {
    width: 48rpx;
    height: 42rpx;
    margin: 20rpx 0;
}

.adding-to-cart-popup-background {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, 0.4);
    transition-duration: 400ms;
}

.adding-to-cart-popup-background .adding-to-cart-popup {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: white;
    transition-duration: 300ms;
    -webkit-overflow-scrolling: touch;
}

.adding-to-cart-popup-background .adding-to-cart-popup .header {
    height: 248rpx;
    border-bottom: 2rpx solid #eee;
}

.adding-to-cart-popup-background .adding-to-cart-popup .header .close {
    width: 80rpx;
    height: 80rpx;
    position: absolute;
    right: 0;
}
.adding-to-cart-popup-background .adding-to-cart-popup .header .close image {
    width:40rpx;
    height:40rpx;
    margin-top:20rpx;
    margin-left:20rpx;
}

.adding-to-cart-popup-background .adding-to-cart-popup .header .product-image {
    width: 200rpx;
    height: 200rpx;
    background-color: white;
    position: absolute;
    top: 28rpx;
    left: 28rpx;
    border: 1rpx solid #efefef;
}

.adding-to-cart-popup-background .adding-to-cart-popup .header .product-info {
    padding: 40rpx 0;
    margin-left: 250rpx;
}

.adding-to-cart-popup-background .adding-to-cart-popup .header .product-info .stock-price {
    font-size: 40rpx;
}

.adding-to-cart-popup-background .adding-to-cart-popup .header .product-info .p {
    margin: 0;
    line-height: 1.6;
}

.adding-to-cart-popup-background .adding-to-cart-popup .header .product-info .stock {
    font-size: 32rpx;
}

.adding-to-cart-popup-background .adding-to-cart-popup .header .product-info .spec-title {
    font-size: 24rpx;
    color: #a0a0a0;
}

.text-primary {
    color: #fc3151;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section {
    max-height: 400rpx;
    padding: 0;
    overflow: auto;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .specs {
    margin: 0 28rpx 16rpx;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .specs .h2 {
    margin-bottom: 14rpx;
    font-weight: normal;
    color: #353535;
    font-size: 28rpx;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .specs .spec-btns {
    margin: 0 -28rpx;
    overflow: hidden;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .specs .spec-btns button {
    min-width: 180rpx;
    height: 68rpx;
    // border: 1rpx solid #d6d6d6;
    border-radius: 8rpx;
    outline: none;
    background-color: white;
    font-size: 32rpx;
    line-height: 64rpx;
    color: #353535;
    margin: 20rpx 28rpx;
    overflow: hidden;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .specs .spec-btns button.disabled {
    border-color: #e2e2e2;
    color: #e2e2e2;
}

.adding-to-cart-popup-background .adding-to-cart-popup .footer {
    border-top: 1px solid #ddd;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .quantity {
    padding: 20rpx 28rpx 0;
    height: 70rpx;
    border-top: 1rpx solid #efefef;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .quantity .h2 {
    margin: 0;
    font-weight: normal;
    color: #353535;
    font-size: 28rpx;
    line-height: 42rpx;
    display: inline-block;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .quantity .counter {
    float: right;
    height: 70rpx;
    text-align: center;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .quantity .counter button.disabled {
    border-color: #d6d6d6;
    color: #d6d6d6;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .quantity .counter button {
    width: 68rpx;
    height: 72rpx;
    line-height: 68rpx;
    margin-top: 0;
    padding: 0;
    vertical-align: top;
    background-color: #fff;
    border: 1px solid #fc3150;
    border-radius: 8rpx;
    font-size: 40rpx;
    color: #fc3150;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .quantity .counter text.disabled {
    color: #d6d6d6;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .quantity .counter text {
    float: left;
    width: 128rpx;
    height: 68rpx;
    margin: 0 20rpx;
    line-height: 68rpx;
    border-radius: 8rpx;
    border: 1rpx solid #d6d6d6;
    font-size: 40rpx;
    color: #353535;
}

.adding-to-cart-popup-background .adding-to-cart-popup .footer button {
    float: none;
    margin: 16rpx auto;
    border: none;
    outline: none;
    border-radius: 8rpx;
    width: 700rpx;
    height: 64rpx;
    background-color: #fc3150;
    font-size: 28rpx;
    color: white;
}

.adding-to-cart-popup-background .adding-to-cart-popup .section .specs .spec-btns button.selected {
    border-color: #fc3151;
    color: #fc3151;
    position: relative;
}


.adding-to-cart-popup-background .adding-to-cart-popup .section .specs .spec-btns button.selected::after {
    content: '';
    position: absolute;
    width: 56rpx;
    height: 40rpx;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    background-image: url(wedge.png);
    background-size: 56rpx 40rpx;
    border-radius: 0;
}

button,
button::after {
    border: none;
    outline: none;
    content:none;
    width:none;
    height:none;
    position:none;
    top:inherit;
    left:inherit;
    border:none;
    -webkit-transform:none;
    transform:none;
    -webkit-transform-origin:none;
    transform-origin:none;
    box-sizing:none;
    border-radius:none;
}

#product-detail .product-car .badge {
    position: absolute;
    left: 60%;
    top: 0%;
}
.badge {
    display: inline-block;
    min-width: 24rpx;
    padding: 6rpx;
    font-size: 24rpx;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 16rpx;
    background-color: #fc3151;
    color: white;
}

import request from '../../lib/request';
import WxParse from '../../wxParse/wxParse';
import serviceData from '../../data/config';

Page({
  data: {
    product: [],
    current: 1,
    indicatorDots: false
  },
  currentchange(e) {
    this.setData({
      current: e.detail.current + 1
    });
  },
  onLoad(options) {
    const productId = options.id;
    var product = serviceData.productData;
    product.goods_price = product.goods_price.toFixed(2);
    this.setData({
      product,
      wxParseData: WxParse('html', product.goods_detail)
    ,cartNum:2});

  },
  onShareAppMessage(event){
    console.log(event);
    return {
          title: '商品页',
          desc: this.data.product.goods_name,
          path: '/products/products?id=' + this.data.product.id
        }
  },
  addCar() {

    const specData = this.data.product.spec;
    const stockData = this.data.product.stock; // 对应的库存量
    specData.forEach((specValue) => {
      (specValue.value).forEach((spec) => {
        spec.disabled = '';
        spec.class = 'class';
        let stockNum = 0;
        stockData.forEach((stock) => {
          if (typeof (stock.stock_spec_str) === 'string') {
            stock.stock_spec_str = stock.stock_spec_str.split(',');
          }
          (stock.stock_spec).forEach((stockSpex) => {
            if (Number(spec.value_id) === Number(stockSpex.value_id)) {
              // 累加对应口味的库存量
              stockNum += Number(stock.stock_num);
              spec.stock_num = stockNum;
            }
          });
        });
        if (Number(spec.stock_num) === 0) {
          // 库存量为0，则不可以点击
          spec.disabled = 'disabled';
          spec.class = 'disabled';
        }
      });
    })
     this.setData({
      product: this.data.product,
      popDisplay: 'block',
      subButton: {
        disabled: 'disabled',
        class: 'disabled'
      },
      addButton: {
        disabled: 'disabled',
        class: 'disabled'
      },
      buyNum: 1,
      buyNumClass: 'disabled',
      totalStock: this.data.product.total_stock,
      oldStockNum: this.data.product.total_stock,
      goodsPrice: this.data.product.goods_price,
      oldGoodsPrice: this.data.product.goods_price
    });

  },
  closePop() {
    this.setData({
      popDisplay: 'none'
    });
  },
  choseSpec(e) {
    const valueId = e.currentTarget.dataset.valueId; // 属性id
    const specId = e.currentTarget.dataset.specId; // 点击分类的id
    const product = this.data.product;
    const stockData = product.stock;
    const specData = product.spec;
    let totalNum = false;
    let goodsPrice = false;
    let skuId = 0;
    specData.forEach((spec) => {
      (spec.value).forEach((value) => {
        let choseId = '';
        if (Number(value.value_id) === Number(valueId)) {
          // 点击遍历分类属性，选中效果切换
          if (value.class === 'selected') {
            value.class = '';
            this.data.buyNumClass = 'disabled';
            this.data.buyNum = 1;
            // 点击修改已选中的规格参数，删除对应的value_id
            this.data.choseArr.forEach((citem, index) => {
              if (specId === citem.spec_id) {
                citem.value_id = '';
              }
              if (index === 0) {
                choseId += citem.value_id;
              } else {
                choseId += `,${citem.value_id}`;
              }
            });
            specData.forEach((specValue) => {
              (specValue.value).forEach((specdata) => {
                if (Number(specdata.stock_num) === 0) {
                  // 库存量为0，则不可以点击
                  specdata.disabled = 'disabled';
                } else if (Number(specValue.spec_id) === Number(specId)) {
                  specdata.disabled = '';
                  specdata.class = '';
                }
              });
            });
            totalNum = this.data.oldStockNum;
            goodsPrice = this.data.oldGoodsPrice;
            this.data.addButton.class = 'disabled';
            this.data.addButton.disabled = 'disabled';
            this.data.subButton.class = 'disabled';
            this.data.subButton.disabled = 'disabled';
            skuId = 0;
          } else {
            value.class = 'selected';
            let weightId = '';
            const arritem = {};
            let isCon = false;
            // 点击修改已选中的规格参数，修改对应的value_id
            this.data.choseArr.forEach((citem) => {
              if (specId === citem.spec_id) {
                isCon = true;
                citem.value_id = valueId;
              }
            });
            if (!isCon) {
              arritem.spec_id = specId;
              arritem.value_id = valueId;
              this.data.choseArr.push(arritem);
            }
            const arrArr = [];
            this.data.choseArr.forEach((citem) => {
              arrArr.push(citem.value_id);
            });
            arrArr.sort((a, b) => b - a);
            arrArr.forEach((citem, index) => {
              if (index === 0) {
                choseId += citem;
              } else {
                choseId += `,${citem}`;
              }
            });
            // 选中去修改该属性下对应的规格是否还有库存
            // 规格选完全后实时修改库存量
            stockData.forEach((stock) => {
              if (typeof (stock.stock_spec_str) === 'object') {
                let stockSpecStr = '';
                stock.stock_spec_str.sort((a, b) => b - a);
                stock.stock_spec_str.forEach((sitem, index) => {
                  if (index === 0) {
                    stockSpecStr += sitem;
                  } else {
                    stockSpecStr += `,${sitem}`;
                  }
                });
                stock.stock_spec_str = stockSpecStr;
              }
              if (stock.stock_spec_str === choseId) {
                totalNum = stock.stock_num;
                goodsPrice = stock.stock_price;
                skuId = stock.stock_id;
                this.data.buyNumClass = '';
                this.data.buyNum = 1;
                if (totalNum > 1) {
                  this.data.addButton.disabled = '';
                  this.data.addButton.class = '';
                } else {
                  this.data.addButton.disabled = 'disabled';
                  this.data.addButton.class = 'disabled';
                  this.data.subButton.disabled = 'disabled';
                  this.data.subButton.class = 'disabled';
                }
              }
              if (stock.stock_spec_str.indexOf(value.value_id) !== -1 &&
                Number(stock.stock_num) === 0) {
                const idArray = stock.stock_spec_str.split(',');
                idArray.forEach((dataId) => {
                  if (Number(dataId) !== Number(valueId)) {
                    weightId = dataId;
                  }
                });
              }
              // 拿到库存为0的value_id，设置为不可以点击
              specData.forEach((specValue) => {
                (specValue.value).forEach((valueItem) => {
                  if (weightId !== '' && Number(valueItem.value_id) === Number(weightId)) {
                    valueItem.disabled = 'disabled';
                    valueItem.class = 'disabled';
                  }
                });
              });
            });
          }
        } else if (Number(spec.spec_id) === Number(specId) && value.stock_num !== 0) {
          // 属于同个属性并且库存不为0的去除选中样式
          value.class = '';
          value.disabled = '';
        } else if (value.stock_num === 0) {
          value.class = 'disabled';
          value.disabled = 'disabled';
        }
      });
    });
    let price = (goodsPrice && goodsPrice.toFixed(2)) || this.data.oldGoodsPrice;
    this.setData({
      product,
      totalStock: totalNum || this.data.oldStockNum,
      goodsPrice: price,
      addButton: this.data.addButton,
      subButton: this.data.subButton,
      buyNum: this.data.buyNum,
      buyNumClass: this.data.buyNumClass,
      skuId
    });
  },
  addShopNum() {
    let buyNum = this.data.buyNum;
    const totalNum = this.data.totalStock;
    buyNum += 1;
    if (buyNum < totalNum && buyNum !== 1) {
      this.data.subButton.class = '';
      this.data.subButton.disabled = '';
    } else {
      this.data.addButton.class = 'disabled';
      this.data.addButton.disabled = 'disabled';
    }

    this.setData({
      buyNum,
      addButton: this.data.addButton,
      subButton: this.data.subButton
    });
  },
  subShopNum() {
    let buyNum = this.data.buyNum;
    buyNum -= 1;
    if (buyNum === 1) {
      this.data.addButton.class = '';
      this.data.addButton.disabled = '';
      this.data.subButton.class = 'disabled';
      this.data.subButton.disabled = 'disabled';
    }

    this.setData({
      buyNum,
      addButton: this.data.addButton,
      subButton: this.data.subButton
    });
  },
  submitCart() {
    const data = {
      goods_id: this.data.product.id,
      sku_id: this.data.skuId,
      goods_number: this.data.buyNum
    };

    if (data.sku_id) {
      request({ path: '/cart/addCart', data, method: 'post' }).then((res) => {
        if (res) {
          this.setData({
            popDisplay: 'none',
            cartNum: this.data.cartNum + this.data.buyNum
          });
        }
      });
    } else {
      this.setData({
        toast: {
          toastClass: 'yatoast',
          toastMessage: '请先选择属性'
        }
      });

      setTimeout(() => {
        this.setData({
          toast: {
            toastClass: '',
            toastMessage: ''
          }
        });
      }, 2000);
    }
  },
  navigateToCart() {
    wx.switchTab({
      url: '../cart/cart'
    });
  }
});