<template>
  <uni-popup ref='popupRef' type='bottom' :mask-click='false' @touchmove.stop.prevent=''>
    <view class='content'>
      <view class='c-flex-row' style='align-items: flex-start'>
        <image class='goods-image' :src='goodsDetailBean?.images' />
        <view class='c-flex-column' style='flex: 1'>
          <text class='goods-name'>{{ goodsDetailBean?.name }}</text>
          <text class='goods-price'>{{ flashPrice > 0 ? `${flashPrice}` : `${goodsDetailBean?.price}` || 0 }}</text>
        </view>
        <image class='close-image' :src='assetsUrl("ic_close.png")' @click.stop='close' />
      </view>
      <view class='sku-view c-flex-column'>
        <view class='sku-title'>颜色</view>
        <view class='sku-color-list c-flex-row'>
          <view class='sku-item' :class='{"sku-item-active":currentColorIndex==index}'
                v-for='(item, index) in skuColorList' :key='index'
                @click='colorChange(index)'>
            <text>{{ item }}</text>
          </view>
        </view>

        <view class='sku-title' style='margin-top: 43rpx'>尺码</view>
        <view class='sku-color-list c-flex-row'>
          <view class='sku-item'
                :class='{"sku-item-active":currentSizeIndex==index,"sku-item-disabled":item.existingNumber<=-1}'
                v-for='(item, index) in skuSizeList' :key='index'
                @click='sizeChange(index)'>
            <text>{{ item.sizeName }}</text>
          </view>
        </view>

        <view class='c-flex-row' style='margin-top: 52rpx'>
          <text class='sku-title'>购买数量</text>
          <view class='count-change-view c-flex-row'>
            <view class='count-image' @click.stop='countChange(false)'>
              <image :src='assetsUrl("ic_reduce.png")' />
            </view>
            <text>{{ goodsCount }}</text>
            <view class='count-image' @click.stop='countChange(true)'>
              <image :src='assetsUrl("ic_plus.png")' />
            </view>
          </view>
        </view>
        <button class='primary-button' @click='confirm'>确定</button>
      </view>
    </view>
  </uni-popup>
</template>

<script lang='ts' setup>
import { PropType, ref } from 'vue';
import { assetsUrl } from '@/utils/assets';
import { showToast } from '@/utils';
import { getGoodsDetail } from '@/api/goods';
import { GoodsBean, StockBean } from '@/api/goods/types';

const props = defineProps({
  flashPrice: {
    type: Number,
    default: -1
  },
  exists: Object as PropType<StockBean>
});
const popupRef = ref();
const goodsDetailBean = ref<GoodsBean>();
const skuColorList = ref<string[]>([]);
const currentColorIndex = ref(0);
const currentSizeIndex = ref(0);
const goodsCount = ref(1);
let callback: Function;

const show = async (goodsId: string, fn: Function) => {
  callback = fn;

  goodsDetailBean.value = await getGoodsDetail(goodsId);
  if(goodsDetailBean.value?.stocks?.length == 0) {
    showToast('暂无库存');
    return;
  }

  goodsDetailBean.value?.stocks?.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
    if(!skuColorList.value.includes(colorName)) {
      skuColorList.value.push(colorName);
    }
  });

  setTimeout(() => {
    popupRef.value.open();
  }, 200);

  if(props.exists) {
    const colorIndex = skuColorList.value?.findIndex(res => res === props.exists?.colorName);
    const sizeIndex = skuSizeList.value?.findIndex(res => res.sizeId === props.exists?.sizeId);

    colorChange(colorIndex || 0);
    sizeChange(sizeIndex || 0);
    goodsCount.value = props.exists?.count;
  }
};

const skuSizeList = computed(() => {
  const currentColorName = skuColorList.value[currentColorIndex.value];
  return goodsDetailBean.value?.stocks?.filter((res: { colorName: string }) => {
    return res.colorName === currentColorName;
  });
});

const close = () => {
  popupRef.value.close();
};

const colorChange = (index: number) => {
  currentColorIndex.value = index;
};

const sizeChange = (index: number) => {
  currentSizeIndex.value = index;
};

const countChange = (isPlus: boolean) => {
  if(isPlus) {
    goodsCount.value += 1;
  } else {
    if(goodsCount.value > 1) {
      goodsCount.value -= 1;
    }
  }
};

const confirm = () => {
  if(callback instanceof Function) {
    callback({
      ...goodsDetailBean.value,
      checkedStock: {
        ...skuSizeList.value![currentSizeIndex.value],
        count: goodsCount.value
      }
    });
  }
  popupRef.value.close();
};

defineExpose({
  show
});
</script>

<style lang='scss' scoped>
.content {
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 0 0;
  padding: 23rpx 30rpx 78rpx 30rpx;

  .goods-image {
    width: 186rpx;
    height: 186rpx;
    border-radius: 10rpx;
    margin-top: -50rpx;
    margin-right: 18rpx;
  }

  .goods-name {
    font-weight: bold;
    font-size: 32rpx;
    color: #333333;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .goods-price {
    font-weight: bold;
    font-size: 40rpx;
    color: #D95554;
    margin-top: 40rpx;
  }

  .goods-price:before {
    content: '¥';
    font-size: 28rpx;
    margin-right: 2rpx;
  }

  .close-image {
    width: 45rpx;
    height: 45rpx;
  }

  .sku-view {
    margin-top: 30rpx;

    .sku-title {
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      flex: 1;
    }

    .sku-color-list {
      display: grid;
      grid-template-columns:repeat(4, 1fr);
      margin-top: 20rpx;
      gap: 20rpx;
    }

    .sku-item {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #F2F2F2;
      border-radius: 26rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      padding: 7rpx 32rpx;
    }

    .sku-item-active {
      @extend .sku-item;
      background: #FFF1F1;
      color: #D95554;
    }

    .sku-item-disabled {
      @extend .sku-item;
      background: #F2F2F2;
      color: #BEBEBE;
    }

    .count-change-view {
      .count-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54rpx;
        height: 54rpx;
        background: #FBFBFB;

        image {
          width: 15rpx;
          height: 2rpx;
        }
      }

      .count-image:nth-of-type(2) image {
        width: 17rpx;
        height: 17rpx;
      }

      text {
        display: flex;
        width: 54rpx;
        height: 54rpx;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 30rpx;
        color: #333333;
        background: #F2F2F2;
      }
    }

    .primary-button {
      width: 100%;
      margin-top: 50rpx;
    }
  }
}
</style>
