<template>
  <div class="addGoodsCart">
    <van-cell title-style="padding-left: 12px">
      <template #icon>
        <div class="goodsSection">
          <van-image :src="selectItem.pic" class="goodsImg" fit="cover" />
          <div class="sellOut" v-if="selectItem.stock <= 0">
            <img
              src="../images/icon-sell-out.png"
              fit="cover"
              class="sellOutImg"
            />
          </div>
        </div>
      </template>
      <template #title>
        <div class="goodsInfo">
          <p class="goodsPrice">
            <span>￥</span>
            {{ selectItem.price | moneyFormat }}
          </p>
          <p class="goodsStore">库存：{{ selectItem.stock }}</p>
        </div>
      </template>
    </van-cell>
    <van-cell>
      <template #title>
        <div class="title">规格</div>
      </template>
      <template #label>
        <van-radio-group class="radio-group" :value="radio">
          <van-radio
            v-for="(item, index) in skuStockList"
            :key="index"
            class="radio"
            :name="item.id"
            @click="
              () => {
                if (radio == item.id) return;
                radio = item.id;
              }
            "
          >
            <van-tag
              size="large"
              :plain="item.id === radio ? true : false"
              :type="item.id === radio ? 'primary' : 'default'"
            >
              {{ item.spDataJson }}
            </van-tag>
          </van-radio>
        </van-radio-group>
      </template>
    </van-cell>
    <van-cell
      title="购买数量"
      style="margin: 12px 0"
      :border="false"
      title-class="title"
      center
    >
      <van-stepper
        v-model="total"
        input-width="50px"
        theme="round"
        buttonSize="24px"
        :max="selectItem.stock > 200 ? 200 : selectItem.stock"
        :min="1"
        :disabled="selectItem.stock <= 0"
        integer
      />
    </van-cell>
    <div class="btnGroup" style="margin-bottom: 8px">
      <van-button
        block
        round
        type="info"
        text="确定"
        :disabled="selectItem.stock <= 0"
        @click="() => onAddCart()"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "addGoodsCart",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: {},
    },
    defaultRadio: {
      type: Number,
      default: 0,
    },
    showType: {
      type: String,
      default: "cart",
    },
    onGetCartCount: {
      type: Function,
      default: (n) => {},
    },
  },
  watch: {
    show(val) {
      // 添加购物车显示
      if (val) {
        this.totalData = {};
        this.total = 1;
        this.radio = "";
        this.setList();
      }
    },
  },
  data() {
    return {
      radio: "",
      total: 1,
      totalData: {},
      skuStockList: [],
    };
  },
  computed: {
    selectItem() {
      const radio = this.radio;
      const select = this.skuStockList.find((n) => n.id == radio);
      if (select) {
        let stock = select.stock - select.lockStock; //- select.cartNum
        return {
          ...select,
          stock,
        };
      }
      return {
        stock: 0,
      };
    },
  },
  mounted() {
    this.setList();
  },
  methods: {
    setList() {
      // 处理规格
      let skuStockList = [];
      const item = JSON.parse(JSON.stringify(this.item));
      if (Array.isArray(item.skuStockList)) {
        skuStockList = item.skuStockList.map((n) => {
          n.pic = n.pic || item.pic;
          n.cartNum = 0;
          if (n.spData) {
            const spData = JSON.parse(n.spData);
            let str = "";
            spData.forEach((sp) => {
              str += `${sp.value}`;
            });
            n.spDataJson = str;
          } else {
            n.spDataJson = "默认";
          }
          n.lockStock = n.lockStock > 0 ? n.lockStock : 0;
          return {
            ...n,
          };
        });
      }
      if (!skuStockList.length) return skuStockList;
      // 处理默认显示
      let index = 0;
      if (this.defaultRadio) {
        let i = skuStockList.findIndex((n) => n.id == this.defaultRadio);
        index = i > -1 ? i : 0;
      }
      this.radio = skuStockList[index].id;
      this.skuStockList = skuStockList;
    },
    async onAddCart() {
      const selectItem = this.selectItem;
      const item = this.item;
      // const body = {
      //   price: selectItem.price, //添加到购物车的价格
      //   productSkuId: selectItem.id,
      //   quantity: this.total, // 数量
      //   productId: item.id,
      //   hidden: this.showType === "cart" ? 0 : 1,
      //   promoterId: this.$route.query.promoterId
      //     ? this.$route.query.promoterId
      //     : undefined,
      // };
      // goodsNum: 1, // 默认数据为1件
      //     goodsId: item.id,
      //     image: item.image,
      //     goodsName: item.name,
      //     marketPrice: item.marketPrice,
      //     discountPrice: item.discountPrice,
      //     complementGoodsIdList: item.complementGoodsIdList,
      //     groupPurchasePrice: item.groupPurchasePrice,
      //     type: item.type,

      // marketPrice: item.marketPrice,
      //     discountPrice: item.discountPrice,
      //     specification: item.specification,
      //     brand: item.brand,
      //     image: item.image,
      //     name: item.name,
      //     id: item.id,
      //     type: item.type,
      // console.log(selectItem, item);
      this.$emit("onAddCart", {
        goodsNum: this.total,
        productSn: item.productSn,
        name: item.name,
        brandName: item.brandName,
        originalPrice: item.originalPrice,
        ...this.selectItem,
      });
    },

    // 更新产品规格的库存
    setProductStock(n) {
      // 根据当前用户的购物车,当前产品规格的数量,限制库存
      for (let i = 0; i < this.skuStockList.length; i++) {
        if (this.skuStockList[i].id === this.radio) {
          this.skuStockList[i].cartNum = n;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.addGoodsCart {
  padding-top: 12px;

  /deep/.van-stepper__input {
    background: #f7f8f9 !important;
    border-radius: 6px;
    margin: 0 8px;
  }
  /deep/.van-stepper__minus--disabled {
    opacity: 0.6 !important;
    color: #fff !important;
    background: #f7f8f9 !important;
    border-color: #f7f8f9 !important;
  }
  /deep/.van-stepper--round .van-stepper__plus,
  /deep/.van-stepper--round .van-stepper__minus {
    background: #01c1b5 !important;
    color: #fff;
    border: 1px solid #fff;
  }
}

.goodsSection {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  .sellOut {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    .sellOutImg {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
}
.goodsImg {
  width: 100px;
  height: 100px;
  background: linear-gradient(180deg, #f0f0f0 0%, #d7d7d7 100%);
  overflow: hidden;
}

.goodsPrice {
  padding-top: 8px;
  font-size: 18px;
  color: #ff4e19;
  line-height: 22px;
  span {
    font-size: 16px;
  }
}
.goodsStore {
  font-size: 14px;
  color: #999999;
  line-height: 20px;
}

.title {
  font-size: 16px;
  color: #333333;
  line-height: 22px;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 14px;
}

.radio {
  margin-right: 10px;
  margin-bottom: 8px;

  /deep/.van-radio__icon {
    display: none;
  }
  /deep/.van-tag--large {
    height: 32px;
    font-size: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /deep/.van-tag {
    box-sizing: border-box;
  }
  /deep/.van-tag--default {
    color: #999999;
    background-color: #f8f8f8;
  }
  /deep/.van-tag--primary {
    background-color: #f7f8f9;
  }
  /deep/.van-radio__label {
    margin-left: 0;
  }
}

.btnGroup {
  padding: 0 15px 15px;
  margin-bottom: 8px;
}
</style>
