<template>
  <van-popup v-model="showPopup" position="bottom" round>
    <div class="sku-select-popup">
      <div class="header flex-default">
        <img class="thumb" :src="skuThumb" />
        <div class="desc flex-default">
          <div class="price">
            <!-- <span class="prefix-label">{{pricePrefixLabel}}</span> -->
            <m-price :amt="skuPrice" />
            <!-- <div class="price-original">￥3888.8</div> -->
          </div>
          <!-- <div class="promotion">本商品满200减50</div> -->
          <div class="sales">总发行量 {{details.circulation}} 份(已出售 {{details.sales}} 份)</div>
          <div class="select-sku" v-show="false">{{ skuLabel }}</div>
        </div>
        <m-icon
          icon="icon-close"
          className="close"
          @click="showPopup = false"
          :size="18"
        />
      </div>
      <div class="content">
        <!-- 规格选择 -->
        <div
          class="sku"
          v-for="(sku, index) of skuList"
          :key="`sku-item-${index}`"
        >
          <!-- <div class="title">
            <span>{{ sku.propKey }}</span>
            <span class="warning" v-show="selectSku[sku.propKey] == null">
              {{ `请选择${sku.propKey}` }}
            </span>
          </div>
          <div class="list flex-default">
            <div
              v-for="(prop, iindex) of sku.list"
              :key="`prop-item-${index}-${iindex}`"
              :class="
                selectSku[sku.propKey] == prop ? ['item', 'active'] : ['item']
              "
              @click="handleSelect(sku.propKey, prop)"
            >
              {{ prop }}
            </div>
          </div> -->
        </div>
        <!-- 数量选择 -->
        <div class="num flex-default">
          <div class="title">数量</div>
          <m-steper v-model="num" />
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="bottom flex-default">
        <template v-if="warmUp">
          <van-button type="primary" block round disabled>
            即将开售&nbsp;&nbsp;&nbsp;&nbsp;{{ warmUpTimeLabel }}
          </van-button>
        </template>
        <template v-else-if="selectSkuStockType != 1">
          <van-button disabled block round color="#DBDBDB">暂时无货</van-button>
        </template>

        <template v-else>
          <van-button
            type="primary"
            block
            round
            @click="handleConfirm"
            v-if="type != 1"
          >
            确 认
          </van-button>

          <template v-else-if="goodsTypeMap.NORMAL">
            <van-button
              type="info"
              block
              round
              class="shopping-cart-btn"
              @click="handleConfirm('cart')"
            >
              加入购物车
            </van-button>
            <van-button
              type="primary"
              block
              round
              class="buy-btn"
              @click="handleConfirm('buy')"
            >
              立即购买
            </van-button>
          </template>

          <template v-else-if="goodsTypeMap.TRANSFER">
            <van-button
              type="primary"
              block
              round
              class="buy-btn"
              @click="handleConfirm('buy')"
            >
              立即购买
            </van-button>
          </template>
        </template>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { TransferType } from "@/enums";
import { formatTimeDuring } from "@/utils";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    // 1. 从选择sku打开  2.从底部加入购物车 3.从底部立即购买打开
    type: {
      type: Number,
      default: 1,
    },
    // 规格列表
    skuList: {
      type: Array,
      defualt: () => [],
    },
    // 规格详情
    skuMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    details: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 商品简介
    desc: Object,
    goodsTypeMap: Object,
    transferData: Object,
    goodsStatusMap:Object,
  },
  computed: {
    skuLabel() {
      let { nullList, valList } = this.checkSku();
      if (valList.length > 0) {
        return `已选： ${valList.join("，")}，${this.num}件`;
      } else {
        return `请选择${nullList.join("、")}`;
      }
    },
    skuThumb() {
      if (this.selectSkuDetail !== null) {
        let thumb = this.selectSkuDetail.thumb;
        if (thumb && thumb.length != 0) {
          return thumb;
        }
      }
      return this.desc && this.desc.thumb;
    },
    skuPrice() {
      if (this.goodsTypeMap.NORMAL || this.goodsTypeMap.NFT) {
        if (this.selectSkuDetail !== null) {
          return this.selectSkuDetail.originalPrice;
        }
        return this.desc && this.desc.defaultPrice;
      } else if (this.goodsTypeMap.TRANSFER) {
        return this.transferData.price;
      }
    },
    pricePrefixLabel() {
      return "";
    },
    warmUp() {
      return (
        this.goodsStatusMap.WARM_UP &&
        this.desc.preheatEndTime >= this.currentTime
      );
    },
    warmUpTimeLabel() {
      let time = formatTimeDuring(
        this.desc.preheatEndTime - this.currentTime
      );
      return `${time.day}天${time.hour}时${time.min}分${time.sec}秒`;
    },
  },
  watch: {
    value(val) {
      this.showPopup = val;
    },
    showPopup(val) {
      this.$emit("input", val);
    },
    skuList: {
      handler(val) {
        // if (this.goodsTypeMap.NORMAL) {
        //   for (let sku of val) {
        //     this.$set(this.selectSku, sku.propKey, null);
        //   }
        // }
        // if (this.goodsTypeMap.TRANSFER) {
          for (let sku of val) {
            this.$set(this.selectSku, sku.propKey, sku.list[0]);
          }
        // }
      },
      deep: true,
    },
    transferData(val) {
      if (this.goodsTypeMap.TRANSFER && val.type == TransferType.PACKAGE) {
        this.num = this.transferData.number;
      }
    },
  },
  data() {
    return {
      showPopup: false,
      num: 1,
      selectSku: {},
      selectSkuDetail: null,
      // 1 有货  2 无货  3 num超过库存
      selectSkuStockType: 1,
    };
  },
  methods: {
    popupChange(val) {
      this.$emit("input", val.show);
    },
    handleSelect(propKey, prop) {
      let nProp = prop;
      if (this.selectSku[propKey] == prop) {
        nProp = null;
      }
      this.$set(this.selectSku, propKey, nProp);
    },
    checkSku() {
      let nullList = [];
      let valList = [];
      for (let key in this.selectSku) {
        if (this.selectSku[key] == null) {
          nullList.push(key);
        } else {
          valList.push(this.selectSku[key]);
        }
      }

      let key = Object.keys(this.selectSku)
        .map((k) => `${k}:${this.selectSku[k]}`)
        .join("-");
      let skuDetail = this.skuMap[key];
      if (skuDetail) {
        this.selectSkuDetail = skuDetail;
        this.$emit("skuChange", { ...skuDetail, num: this.num });

        let stock = this.goodsTypeMap.TRANSFER
          ? this.transferData.stock
          : skuDetail.stock;

        if (stock == 0) {
          this.selectSkuStockType = 2;
        } else if (stock < this.num) {
          this.selectSkuStockType = 3;
        } else {
          this.selectSkuStockType = 1;
        }
      } else {
        this.selectSkuStockType = 1;
      }
      return { nullList, valList };
     
    },

    handleConfirm(eventName) {
      if (this.checkSku().nullList.length !== 0) {  
        return;
      }

      if (this.type == 1) {
        this.$emit(eventName);
      } else if (this.type == 2) {
        this.$emit("cart");
      } else if (this.type == 3) {
        this.$emit("buy");
      }
    },
  },
};
</script>

<style lang="less">
.sku-select-popup {
  background: #ffffff;
  padding: 20px 17px 0 17px;
  border-radius: 21px 21px 0 0;
  > .header {
    margin-bottom: 18px;
    align-items: flex-start;
    .thumb {
      height: 100px;
      width: 100px;
      border-radius: 8px;
      border: 1px solid #f1f1f1;
      background-color: #ffffff;
      margin-right: 10px;
    }
    .desc {
      flex: 1;
      padding-top: 9px;
      flex-direction: column;
      height: 100px;
      align-items: flex-start;
      .price {
        flex: 1;
      }
      .promotion {
        color: #FA9F37;
        font-size: 12px;
        line-height: 17px;
      }
      .sales {
        padding: 3px 0;
      }
      .select-sku {
        background: #f1f1f1;
        border-radius: 5px;
        line-height: 17px;
        font-size: 12px;
        // color: #FA9F37;
        width: fit-content;
        padding: 3px 13px;
      }
    }
  }
  > .content {
    height: 325px;
    .sku {
    }
    .sku .title {
      font-size: 12px;
      color: #140603;
      font-weight: bold;
      margin-bottom: 6px;
      line-height: 17px;
    }
    .sku .title .warning {
      color: #FA9F37;
      margin-left: 10px;
      font-size: 10px;
      line-height: 17px;
    }
    .sku .list {
      flex-wrap: wrap;
    }
    .sku .list .item {
      font-size: 11px;
      color: #140603;
      line-height: 24px;
      padding: 0 22px;
      background: #f1f1f1;
      border-radius: 13px;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #fffaf1;
    }
    .sku .list .active {
      background: #fffaf1;
      border: 1px solid #FA9F37;
      color: #FA9F37;
    }
    .num {
      margin-top: 40px;
      align-items: center;
      justify-content: space-between;
      .title {
        color: #140603;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  > .bottom {
    padding: 7px 0;
    justify-content: space-between;
    align-items: center;
    > button {
      height: 36px;
    }
    > .shopping-cart-btn {
      margin-right: 10px;
    }
  }
}
</style>