<template>
  <van-sku
    ref="sku"
    v-if="skuData.sku"
    v-model="showSku"
    :sku="skuData.sku"
    :goods="skuData.goods"
    :goods-id="skuData.goodsId"
    :start-sale-num="0"
    :initial-sku="skuData.initialSku"
    :message-config="skuData.mconfig"
    :quota="0"
    :hide-stock="skuData.sku.hide_stock"
    :custom-stepper-config="skuData.customStepperConfig"
    @sku-selected="typeClass"
    @sku-close="close"
    reset-selected-sku-on-hide
    reset-stepper-on-hide
  >
    <template #sku-actions>
      <div style="padding: 5px 10px">
        <van-button type="danger" size="normal" @click="sub" block round>
          确 定
        </van-button>
      </div>
    </template>
  </van-sku>
</template>

<script>
import { Sku as VanSku, Button as VanButton } from "vant";
import "vant/lib/button/style/index";
import "vant/lib/sku/style/index";
let pData = { sku: {}, num: 1 };
export default {
  name: "sku",
  props: {
    show: Boolean,
    select: Object,
  },
  watch: {
    show() {
      this.showSku = this.show;
      if (!this.show) return;
      pData = { sku: {}, num: 1, id: this.select.id };
      this.skuData = {
        sku: {
          // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
          // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
          tree: [],
          // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
          list: [],
          price: this.select.price, // 默认价格（单位元）
          collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
          none_sku: false, // 是否无规格商品
          hide_stock: true, // 是否隐藏剩余库存
          messages: [
            {
              // 商品留言
              datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
              multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
              name: "留言", // 留言名称
              type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
              required: "0", // 是否必填 '1' 表示必填
              placeholder: "", // 可选值，占位文本
              extraDesc: "", // 可选值，附加描述文案
            },
          ],
        },
        goods: {
          picture: this.select.thumb,
        },
        customStepperConfig: {
          // 步进器变化的回调
          handleStepperChange: currentValue => {
            pData.num = currentValue || 0; // 记录数量
          },
        },
        initialSku: {
          // 初始选中数量
          selectedNum: this.select.num || 1,
        },
        mconfig: {
          initialMessages: {
            留言: "",
          },
        },
      };
      this.$nextTick(() => this.$refs.sku.resetSelectedSku());
    },
  },
  data() {
    return {
      showSku: false,
      skuData: {},
    };
  },
  mounted() {},
  computed: {},
  methods: {
    sub() {
      const data = this.$refs.sku.getSkuData() || {};
      pData = {
        ...this.select,
        ...pData,
        price: this.select.price || 0,
        message: data.messages.message_0 || "",
      };
      // 添加商品
      this.$emit("closeSku", pData);
    },
    typeClass(e) {
      pData.sku[e.skuValue.skuKeyStr] = e.skuValue.id;
    },
    close() {
      this.$emit("closeSku", {});
    },
  },
  beforeUnmount: function () {},
  components: {
    VanSku,
    VanButton,
  },
};
</script>

<style></style>
