<template>
  <div class="goods-item-con">
    <div class="item-top flex-default" @click="goGoods(itemData.goodsId, itemData.type,itemData.salesType)">
      <div
        class="flex-default"
        style="padding: 20rpx 0; align-items: center; flex-shrink: 0"
        v-if="listType === 'effectiveList'"
        @click.stop="changeRadio"
      >
        <div
          class="m-icon shop-radio"
          :class="{ checked: itemData.isChecked, disable: itemData.stock < 1 }"
        />
      </div>

      <div class="picture">
        <img
          :src="itemData.picture"
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="item-content">
        <div class="desc">
          {{ itemData.description }}
        </div>
        <div class="sku_line flex-default">
          <div class="sku_attr">{{ skuAttr }}</div>
        </div>
        <div class="discount-activity flex-default">
          <!-- 	<div class="name">
						满减
					</div>
					<div class="desc">
						满200元减20元
					</div> -->
        </div>
      </div>
    </div>
    <div class="price_line flex-default">
      <div class="price" @click="goGoods(itemData.goodsId, itemData.type,itemData.salesType)">
        <m-price :amt="itemData.amount" />
      </div>
      <div class="operation">
        <m-steper v-model="itemData.number"
          :min="1"
          :max="itemData.stock"
          @input="changeValue"
          v-if="itemData.stock > 0"/>
        <!-- <m-num-box
          v-model.number="itemData.number"
          :min="1"
          :max="itemData.stock"
          @blur="blurValue"
          v-if="itemData.stock > 0"
        >
          <button
            class="del"
            @click="changeValue('del')"
            :class="{ disabled: itemData.number === 1 }"
            slot="del"
          >
            -
          </button>
          <button
            class="add"
            @click="changeValue('add')"
            :class="{ disabled: itemData.number === itemData.stock }"
            slot="add"
          >
            +
          </button>
        </m-num-box> -->
        <div class="" v-else> 该商品已售空 </div>
      </div>
    </div>
  </div>
</template>

<script>
import { deepCopy } from "@/utils/common.js";
import {mapState, mapMutations} from "vuex"
export default {
  props: ["goodsData", "goodsIndex", "listType"],
  data() {
    return {
      itemData: {},
      num: 0,
      loading: false,
    };
  },
  created() {
    this.itemData = deepCopy(this.goodsData);
  },
  watch: {
    goodsData() {
      this.itemData = deepCopy(this.goodsData);
    },
  },
  computed: {
    ...mapState(['shoppingCartCheckedList']),

    getPrice() {
      let arr = [];
      if (typeof this.itemData.amount === "number") {
        let strList = this.itemData.amount.toString().split(".");
        if (strList.length > 1) {
          strList[1] = "." + strList[1] + "0";
          strList[1].substr(0, 3);
        } else {
          strList.push(".00");
        }
        arr = strList;
      } else {
        arr = ["0", ".00"];
      }
      return arr;
    },
    skuAttr() {
      let str = "";
      if (this.itemData.goodSkuProp && this.itemData.goodSkuProp.length > 0) {
        let arr = [];
        for (let item of this.itemData.goodSkuProp) {
          arr.push(`${item.propKey}:${item.propVal}`);
        }
        str = arr.join(",");
      }
      return str;
    },
  },
  methods: {
    ...mapMutations(['setShoppingCartCheckedList']),


    changeRadio() {
      if (this.itemData.stock > 0) {
        let checkedList = this.shoppingCartCheckedList
        if (!checkedList) {
          checkedList = [];
        }
        if (checkedList.includes(this.itemData.skuId)) {
          checkedList.splice(checkedList.indexOf(this.itemData.skuId), 1);
        } else {
          checkedList.push(this.itemData.skuId);
        }
        this.setShoppingCartCheckedList(checkedList)
        this.itemData.isChecked = !this.itemData.isChecked;
        this.$emit("changeGoods", {
          data: this.itemData,
          goodsIndex: this.goodsIndex,
        });
      }
    },
    changeValue(e) {
      if (this.loading) return;
      this.$emit("changeNum",{number:e,goodsIndex:this.goodsIndex})
      // const number=e.detail
			// this.triggerEvent("onChange",{goodsindex:this.properties.goodsindex,number:number})
      // switch (type) {
      //   case "add": {
      //     if (this.itemData.number >= this.itemData.stock) {
      //       this.$toast("最多购买" + this.itemData.stock)
      //     } else {
      //       this.itemData.number++;
      //       this.changeNumber();
      //       this.$emit("changeNum", {
      //         data: this.itemData,
      //         goodsIndex: this.goodsIndex,
      //       });
      //     }
      //     break;
      //   }
      //   case "del": {
      //     if (this.itemData.number < 2) {
      //       this.$toast("最少购买1")
      //     } else {
      //       this.itemData.number--;
      //       this.changeNumber();
      //       this.$emit("changeNum", {
      //         data: this.itemData,
      //         goodsIndex: this.goodsIndex,
      //       });
      //     }
      //     break;
      //   }
      // }
    },
    blurValue(val) {
      this.itemData.number = val;
      this.changeNumber();
      this.$emit("changeNum", {
        data: this.itemData,
        goodsIndex: this.goodsIndex,
      });
    },
    changeNumber() {
      this.loading = true;
      let params = {
        amount: this.itemData.originalPrice,
        coinName: this.itemData.coinName,
        goodsId: this.itemData.goodsId,
        goodsName: this.itemData.goodsName,
        number: this.itemData.number,
        skuId: this.itemData.skuId,
        stock: this.itemData.stock,
        uid: this.itemData.userId,
        id: this.itemData.id,
      };
      this.$api({
        apiName: "addUserShoppingCart",
        postData: params,
        success: (res) => {
          this.loading = false;
          this.$store.dispatch("getShoppingCart");
        },
      });
    },
  },
};
</script>

<style lang="less">
.goods-item-con {
  margin-bottom: 18px;
  .shop-radio {
    width: 16px;
    height: 16px;
    border: 1px solid #aeaeae;
    flex-shrink: 0;
    margin-right: 6px;
    align-items: center;
    border-radius: 50%;
    &.checked {
      background-image: url("data:image/png;base64, ");
      background-size: 100%;
      border: 0;
    }
    &.disable {
      background-color: #aeaeae;
      cursor: default;
      opacity: 0.6;
    }
  }
  .item-top {
    height: 90px;
    align-items: center;
    .picture {
      width: 90px;
      height: 90px;
      background-color: #eaeaea;
      border-radius: 17px;
      flex-shrink: 0;
      overflow: hidden;
    }
    .item-content {
      flex-shrink: 1;
      margin-left: 8px;
      width: 223px;
      overflow: hidden;
      height: 90px;
      .desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 13px;
        color: #2b2b3a;
        line-height: 18px;
      }
      .sku_line {
        margin-top: 6px;
        .sku_attr {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          position: relative;
          background: #f5f7fb;
          padding: 0 7px;
          height: 16px;
          line-height: 16px;
          font-size: 10px;
          color: #aeaeae;
          border-radius: 8px;
        }
      }
      .discount-activity {
        margin-top: 7px;
        .name {
          font-size: 8px;
          padding: 2px;
          background: linear-gradient(295deg, #f07c5b 0%, #dd2e41 100%);
          line-height: 12px;
          text-align: center;
          color: #ffffff;
          border-radius: 2px;
          // height: 12px;
        }
        .desc {
          font-size: 8px;
          padding: 2px 4px;
          border: 1px solid #dd2e41;
          line-height: 12px;
          text-align: center;
          color: #dd2e41;
          border-radius: 2px;
          // height: 12px;
          margin-left: 5px;
        }
      }
    }
  }
  .price_line {
    padding-top: 10px;
    padding-left: 120px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    .add,
    .del {
      font-size: 20px;
      line-height: 25px;
      width: 30px;
      text-align: center;
      font-weight: bold;
      background: transparent;
      &::after {
        border: none;
      }
    }
    .disabled {
      color: #aeaeae;
    }
  }
}
</style>
