<template>
  <cu-popup v-model="show" mode="bottom" border-radius="20" closeable close-icon-size="24">
    <view class="px-40rpx mt-40rpx">
      <view class="flex py-base">
        <image  @tap="previewImage(sku.cover)" class="flex-none rounded-20rpx w-200rpx h-200rpx" :src="sku.cover" mode="aspectFill"></image>
        <view class="flex flex-col justify-end ml-40rpx">
          <view class="font-bold text-hex-FF0200 mr-36rpx text-52rpx"> {{ sku.sell_price }} </view>
          <view class="mt-10rpx text-28rpx"> 会员价：{{ sku.vip_price }} </view>
          <view class="text-hex-999999 text-26rpx mb-20rpx leading-34rpx mt-10rpx">
            {{ `剩余库存 ${sku.stock}` }}
          </view>
          <view class="text-hex-333333 text-26rpx leading-34rpx"> 已选择：{{ activeSkuText }}；数量：{{ quotaUsed }} </view>
        </view>
      </view>
      <scroll-view scroll-y="true" class="max-h-900rpx">
        <view>
          <view v-for="(item, index) in tempSkus" :key="index">
            <view class="font-semibold py-30rpx text-333333 text-30rpx"> {{ item.name }} </view>
            <view class="-mr-24rpx">
              <view class="inline-block mr-24rpx mb-16rpx" v-for="(spce,index2) in item.items" :key="index2">
                <view
                  @tap="onChangeSku(spce, item.items)"
                  :class="spce.selected?'text-hex-FF0000 bg-hex-FDF2EC border border-solid border-hex-FF0000':'text-hex-333333 bg-hex-F8F8F8 border border-solid border-hex-F8F8F8'"
                  :text="spce.name"
                  class="cu-tag"
                  :disabled="spce.sku_id == 0"
                  :color="spce.selected ? '#FF0000' : '#333333'"

                  :border-color="spce.selected ? '#FDF2EC' : '#F8F8F8'"
                  shape="circle"
                >{{spce.name}}
                </view>
              </view>
            </view>
          </view>
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <view class="font-semibold py-30rpx text-333333 text-28rpx mr-40rpx"> 数量 </view>
              <view class="text-hex-FF0000 text-24rpx" v-if="sku.stock == 0"> 库存不足 </view>
            </view>
            <view>
              <u-number-box v-model="stepper" :min="1" :max="sku.stock" @change="onChangeNumber"></u-number-box>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="py-40rpx">
        <slot name="footer">
          <view class="flex w-full">
            <view
              :disabled="disabled"
              v-if="showCart"
              class="flex-1 btn text-center text-white rounded-full bg-primary h-80rpx leading-80rpx text-32rpx mr-30rpx"
              @tap="onClick('add-cart')"
            >
              <text>{{ cartBtnText }}</text>
            </view>
            <view
              v-if="showBuy"
              :disabled="disabled"
              class="flex-1 btn text-center text-white rounded-full bg-bgSubtitle h-80rpx leading-80rpx text-32rpx"
              @tap="onClick('buy-clicked')"
            >
              <text>{{ buyBtnText }}</text>
            </view>

            <view
              v-if="showConfirm"
              :disabled="disabled"
              class="flex-1 btn text-center text-white rounded-full bg-bgSubtitle h-80rpx leading-80rpx text-32rpx"
              @tap="onClick('confirm')"
            >
              <text>确定</text>
            </view>
          </view>
        </slot>
      </view>
    </view>
  </cu-popup>
</template>
<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    specs: {
      type: Array,
      default: () => [],
    },
    showCart: {
      type: Boolean,
      default: true,
    },
    showBuy: {
      type: Boolean,
      default: true,
    },
    cartBtnText: {
      type: String,
      default: '加入购物车',
    },
    buyBtnText: {
      type: String,
      default: '立即购买',
    },
    showConfirm: {
      type: Boolean,
      default: false,
    },
    sku: {
      type: Object,
      default: () => {},
    },
    value: {
      type: Boolean,
      default: false,
    },
    //数量
    quotaUsed: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(e) {
        this.$emit('input', e);
      },
    },
    //已选中sku
    activeSku() {
      const sku = this.specs.reduce((arr, pr) => {
        if (pr.items.some((e) => e.selected)) {
          const item = pr.items.find((e) => e.selected);
          arr.push(item);
        }
        return arr;
      }, []);
      return sku;
    },
    //选中sku文本
    activeSkuText() {
      return this.activeSku.map((e) => e.name).join(',');
    },
    //是选完
    isSelect() {
      return this.activeSku.length == this.specs.length;
    },
    // 是否超库
    isOutStock() {
      return this.stepper > this.sku.stock;
    },
    // 超库存禁用
    disabled(){
      return this.sku.stock < this.quotaUsed
    }
  },
  data() {
    return {
      tempSkus:[],
      stepper: this.quotaUsed,
    };
  },
  methods: {
    //数量改变
    onChangeNumber(e) {
      this.$emit('stepper-change', e.value);
    },
    //规格切换
    onChangeSku(e, skus) {
      if (this.loading) return;
      if (e.sku_id > 0) {
        skus.forEach((el) => (el.selected = false));
        e.selected = true;
        this.stepper = 1;
        this.$emit('sku-selected', e);
      }
    },

    //加入购物车
    onClick(type) {
      if (!this.isSelect) return this.$u.toast('请选择规格');
      if (this.isOutStock) return this.$u.toast('超出库存');
      this.$emit(type, this.sku);
    },
    //图片预览
    previewImage(url){
      uni.previewImage({
         urls: [url],
      })
    }
  },
  watch:{
    specs:{
      immediate:true,
      handler(e){
        this.tempSkus = e
      },
      deep:true
    }
  }
};
</script>
<style lang="scss">
.cu-tag{
  font-size: 30rpx;
  border-radius: 15rpx;
  padding:10rpx 40rpx;
}
</style>
