<template>
  <view>
    <wd-popup
      v-model="localShow"
      position="bottom"
      custom-style="height: 200px;"
      @close="handleClose"
    >
      <view class="popup-header">
        <view class="popup-title">
          {{ title }}
          <view class="close" @click="handleClose"></view>
        </view>
      </view>
      <view class="popup-content">
        <view class="sku-info">
          <view class="sku-info-img">
            <wd-img width="180rpx" height="180rpx" src="/static/images/cart/sku-img1.png" />
          </view>
          <view class="sku-info-base">
            <view class="sku-info-name">Brown Jacket Brown Jacket Br own Jacket</view>
            <view class="sku-info-price">USD 83.97</view>
          </view>
        </view>
        <view class="sku-list">
          <view class="sku-list-item" v-for="(item, i) in skuDataC.skuList" :key="i">
            <view class="sku-title">Select {{ item.skuName }}</view>
            <view class="sku-list-item-props">
              <text
                @click.stop="handleSkuSpecSelect(item.id, it)"
                :class="[
                  'sku-list-item-props-item',
                  item.skuSelect === it ? 'sku-list-item-props-item-active' : '',
                ]"
                v-for="it in item.skuProps"
                :key="it"
              >
                {{ it }}
              </text>
            </view>
          </view>
        </view>
        <view class="sku-num">
          <view class="sku-title">Select Qty</view>
          <SkuInputNumber v-model:num="skuDataC.num" />
        </view>
        <view @click="toAddCart" class="sku-footer">Add To Cart</view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '标题',
    },
    skuData: {
      type: Object,
      default: () => {},
    },
  })
  const emit = defineEmits(['update:show', 'close', 'skuSpecSelect', 'toAddCart', 'update:skuData'])

  // 计算属性 `localShow`，用于 v-model 绑定
  const localShow = computed({
    get: () => props.show,
    set: (value) => emit('update:show', value),
  })
  const skuDataC = computed({
    get: () => props.skuData,
    set: (value) => emit('update:skuData', value),
  })
  // 处理关闭事件
  const handleClose = () => {
    emit('close')
  }
  const handleSkuSpecSelect = (id, sku) => {
    emit('skuSpecSelect', id, sku)
  }
  const toAddCart = () => {
    emit('toAddCart')
  }
</script>

<style scoped lang="scss">
  .popup-content {
    box-sizing: border-box;
    padding: 32rpx;
    .sku-info {
      display: flex;
      margin-bottom: 32rpx;
      &-img {
        width: 180rpx;
        height: 180rpx;
        margin-right: 32rpx;
      }
      &-base {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 16rpx 0;
      }
      &-name {
        font-family: 'PingFang SC';
        font-size: 32rpx;
        font-style: normal;
        font-weight: 500;
        line-height: 48rpx; /* 150% */
        color: var(--333, $shop-text-3);
      }
      &-price {
        font-family: 'PingFang SC';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 44rpx; /* 157.143% */
        color: var(--ff-4-c-1-b, $shop-primary);
      }
    }
    .sku-title {
      margin-bottom: 16rpx;
      font-family: 'PingFang SC';
      font-size: 32rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 48rpx; /* 150% */
      color: var(--333, $shop-text-3);
    }
    .sku-footer {
      box-sizing: border-box;
      display: flex;
      flex: 1 0 0;
      gap: 20rpx;
      align-items: center;
      justify-content: center;
      height: 84rpx;
      padding: 10rpx 66rpx;
      margin-top: 32rpx;
      font-family: 'PingFang SC';
      font-size: 32rpx;
      font-style: normal;
      font-weight: 600; /* 150% */
      line-height: 48rpx; /* 150% */
      color: $shop-white;
      text-align: center;
      text-transform: capitalize;
      background: var(
        --ff-4-c-1-bfc-7-b-1-c,
        linear-gradient(270deg, $shop-primary 0%, $shop-help 100%)
      );
      border-radius: 160rpx;
    }
    .sku-list {
      &-item {
        margin-bottom: 32rpx;
        &-props {
          display: flex;
          flex-wrap: wrap;
          gap: 24rpx;
          &-item {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 20rpx;
            align-items: center;
            justify-content: center;
            min-width: 64rpx;
            height: 64rpx;
            padding: 10rpx 20rpx;
            font-family: 'PingFang SC';
            font-size: 28rpx;
            font-style: normal;
            font-weight: 600;
            line-height: 44rpx; /* 157.143% */
            color: var(--333, $shop-text-3);
            border: 2rpx solid var(--f-2-f-2-f-2, $shop-bg-line);
            border-radius: 12rpx;
          }
          &-item-active {
            color: var(--fff, $shop-white);
            background: var(--ff-4-c-1-b, $shop-primary);
          }
        }
      }
    }
  }
  .popup-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: $shop-white;
    .popup-title {
      position: relative;
      top: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 32rpx;
      align-items: center;
      width: 100%;
      padding: 32rpx 0rpx;
      font-family: 'PingFang SC';
      font-size: 36rpx;
      font-style: normal;
      font-weight: 500;
      line-height: 52rpx; /* 144.444% */
      color: var(--text-icon-font-gy-1100, $shop-text-3);
      text-align: center;
      text-transform: capitalize;
      border-bottom: 2rpx solid var(--f-2-f-2-f-2, $shop-bg-line);

      .close {
        position: absolute;
        top: 50%;
        right: 32rpx;
        width: 48rpx;
        height: 48rpx;
        background: url('@/static/images/cart/cart-close.svg') no-repeat 0 0 / cover;
        transform: translateY(-50%);
      }
    }
  }

  :deep(.wd-popup) {
    min-height: 50vh;
    border-radius: 16rpx 16rpx 0px 0px;
  }
</style>
