<template>
  <div class="shop-item-con">
    <div class="shop-title flex-default">
      <div
        class="m-icon shop-radio"
        :class="{ checked: itemData.isChecked }"
        @click="changeRadio"
        v-if="listType === 'effectiveList'"
      />
      <div class="tite-con flex-default" @click="goShop(itemData.merchantId)">
        <div class="title">
          {{ itemData.enterpriseName }}
        </div>
        <m-icon icon="icon-more" :size="10" className="more" />
      </div>
    </div>
    <div style="padding: 18px 0 0" class="goods-item-con-wrap">
      <!-- <uni-swipe-action>
        <uni-swipe-action-item
          :right-options="options"
          @click="bindClick($event, item)"
          v-for="(item, index) of itemData.listData"
          :key="index"
        > -->

      <goods-item
        v-for="(item, index) of itemData.listData"
        :key="index"
        @changeGoods="changeGoods"
        @changeNum="changeNum"
        :goodsData="item"
        ref="goodsitem"
        :listType="listType"
        :goodsIndex="index"
      />
      <!-- </uni-swipe-action-item>
      </uni-swipe-action> -->
    </div>
  </div>
</template>

<script>
import GoodsItem from "./goods-item.vue";
import {mapState, mapMutations} from "vuex"
import { deepCopy } from "@/utils/common.js";
export default {
  props: ["shopData", "shopIndex", "listType", "mode"],
  components: {
    GoodsItem,
  },
  data() {
    return {
      itemData: {
        listData: [],
      },
    };
  },
  computed: {
    ...mapState(['shoppingCartCheckedList']),
    options() {
      if (this.mode === "settlement") {
        return [
          {
            text: "删除",
            style: {
              backgroundColor: "#dd524d",
            },
          },
        ];
      } else {
        return [];
      }
    },
  },
  created() {
    this.itemData = deepCopy(this.shopData);
    if (this.itemData.listData && this.itemData.listData.length > 0) {
      this.itemData.isChecked = this.itemData.listData.every((x) => {
        return x.isChecked;
      });
    }
  },
  watch: {
    shopData() {
      this.itemData = deepCopy(this.shopData);
      if (this.itemData.listData && this.itemData.listData.length > 0) {
        this.itemData.isChecked = this.itemData.listData.every((x) => {
          return x.isChecked;
        });
      }
    },
  },
  methods: {
    ...mapMutations(['setShoppingCartCheckedList']),


    bindClick(e, obj) {
      this.$showLoading();
      this.$api({
        apiName: "delShoppingCartList",
        postData: [obj.skuId],
        success: (res) => {
          this.$store.dispatch("getShoppingCart");
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    changeRadio() {
      for (let i = 0, len = this.itemData.listData.length; i < len; i++) {
        let obj = deepCopy(this.itemData.listData[i]);
        obj.isChecked = !this.itemData.isChecked;
        this.$set(this.itemData.listData, i, obj);
      }

      this.changeStorage();
    },
    changeStorage() {
      let checkedList = this.shoppingCartCheckedList
      for (let i = 0, len = this.itemData.listData.length; i < len; i++) {
        if (!this.itemData.isChecked) {
          if (!checkedList.includes(this.itemData.listData[i].skuId)) {
            checkedList.push(this.itemData.listData[i].skuId);
          }
        } else {
          if (checkedList.includes(this.itemData.listData[i].skuId)) {
            checkedList.splice(
              checkedList.indexOf(this.itemData.listData[i].skuId),
              1
            );
          }
        }
      }
      this.itemData.isChecked = this.itemData.listData.every((x) => {
        return x.isChecked;
      });
      this.$emit("changeShops", {
        data: this.itemData,
        shopIndex: this.shopIndex,
      });
      this.setShoppingCartCheckedList(checkedList)
    },
    changeGoods(obj) {
      let data = this.itemData.listData.find((x) => {
        return x.id === obj.data.id;
      });
      data.isChecked = !data.isChecked;
      this.itemData.isChecked = this.itemData.listData.every((x) => {
        return x.isChecked;
      });
      this.$emit("changeShops", {
        data: this.itemData,
        shopIndex: this.shopIndex,
      });
    },
    changeNum(e) {
      const goodsindex=e.goodsIndex
			const number=e.number
      this.itemData.listData[goodsindex].number = number
      let params=this.itemData.listData[goodsindex]
      this.$emit("changeShops", {
        data: this.itemData,
        shopIndex: this.shopIndex,
      });
      this.$api({
        apiName: "addUserShoppingCart",
        postData: params,
        success: (res) => {
          // this.loading = false;
          this.$store.dispatch("getShoppingCart");
        },
      });
    },
  },
};
</script>

<style lang="less">
.shop-item-con {
  border-radius: 10px;
  background: #ffffff;
  padding: 14px 16px;
  margin-bottom: 10px;
  // height: 190px;
  .shop-title {
    align-items: center;
    .tite-con {
      flex-shrink: 1;
      width: calc(~"100% - 22px");
      align-items: center;
      .title {
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        color: #140603;
        line-height: 16px;
      }
      .m-icon {
        width: 8px !important;
        flex-shrink: 0;
      }
    }
  }
  .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,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAOdQTFRFAAAAJG3/K2r/K2r0K2PxLWb5LGf2LWb2K2b1LGb1LGf1K2b1LGb2LGb1LGb2LGb2LGb2LGb1LWf1Lmf1MGn1Mmr1NGz1PHL1PXL1PnP1P3P1QHX1RXj2TH32UID2VoT2Xor3bJT3b5b3cZj4eJ34ep74e5/4faH4fqH4gKP4gaT4gqX4haf4iKj4n7n6oLr6orz6pr76p7/6qcH6qsH6q8L6tcn7vc/7xNT7ytj809/81+L92eP82uT83OX83OX94ur96O797fL+7vL+8PT+9vn+9/n++Pr++vv+/f3+/f7+/v7+////oZMYlwAAABF0Uk5TAAcMGCQtV4mZm8fI4ur0+Pkx9AHAAAABJElEQVQ4y42T1XbDQAxEFccx07RNUkq5KTOknDJ5/v97+mCm486TfO54V9JKIqkUzbBd33dtQ1OkKtX0kMoz1RLu6AEKCvROnnctVGR1M95zUCOnl/5fywEnPqNjoUFWlIeORukiImpQhxYn6wACVUTMOr7xxhsAMEUUr4oHV+R1HwA8RbQqX5mS5zNRrIlR4duf5HHyYYidhMtDAMDcGcnT1G2LG0drrw/zAIa3JC+z41zxo2D3m3xcwOiZ5GQ2M/ix4YQk+bT5TvJugLwhumLrh4lelvIZu0mS48TxtVooyU7L3PmNDONizUbWqL2QJC9KTdFyrT4Iyft+kXtK/rEOw49R6QCz+NxH+yUeqP8ZmPaRax3a9rFvX5z21Wtf3ub1/wMg+EjsMx+V6AAAAABJRU5ErkJggg==");
      background-size: 100%;
      border: 0;
    }
  }
}
</style>
