<template>
  <view v-if="!isClear && goodsList.length" class="disabledGoods">
    <view v-if="goodsList.length" class="disabledGoods-header">
      <view class="disabledGoods-header-title">失效商品</view>
      <view class="disabledGoods-header-clear" @click="clearDisabledGoods">清空失效商品</view>
    </view>
    <view class="disabledGoods-list">
      <uni-swipe-action>
        <view v-for="item in goodsList" :key="item" class="disabledGoods-list-item">
          <uni-swipe-action-item :right-options="options" auto-close @click="delGood(item)">
            <cardList :goods="item" />
          </uni-swipe-action-item>
        </view>
      </uni-swipe-action>
    </view>
    <uni-popup ref="confirmPop">
      <uni-popup-dialog
        type="base"
        content="确定删除失效商品吗？"
        message=""
        title=" "
        :duration="2000"
        :before-close="true"
        cancel-txt="再想想"
        confirm-txt="删除"
        warning-btn="cancel"
        @confirm="confirm(goodsList, true)"
        @cancle="cancel"
      />
    </uni-popup>
  </view>
</template>
<script>
import cardList from "./cardList";
import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog";
import { getInvalidList, addSkuToCart } from "../../api/home.api.js";
import { mapActions } from "@/pages/shopcart/shopCartModules.js";
import uniSwipeAction from "@/components/uni-swipe-action";
import uniSwipeActionItem from "@/components/uni-swipe-action-item";
export default {
  name: "DisabledGoodsCard",
  components: {
    cardList,
    uniPopupDialog,
    uniSwipeAction,
    uniSwipeActionItem
  },
  data() {
    return {
      goodsList: [],
      isClear: false,
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#F43530"
          }
        }
      ]
    };
  },
  mounted() {
    this.getList();
    uni.$on("updateInvalid", () => this.getList());
  },
  beforeDestroy() {
    uni.$off("updateInvalid");
  },
  methods: {
    ...mapActions({
      querCartCount: "queryCartCount"
    }),
    async getList() {
      const [data] = await getInvalidList({ pageNo: 1, pageSize: 120 });
      this.goodsList = data.invalidSkuList || [];
    },
    clearDisabledGoods() {
      this.$refs["confirmPop"].open();
    },
    async delGood(goods) {
      this.confirm([goods]);
    },
    async confirm(goodsList, isClear) {
      goodsList.forEach(item => {
        item.type = 4;
      });
      const [data] = await addSkuToCart({ shopCartBaseList: goodsList });
      if (data) {
        if (isClear) {
          this.isClear = true;
          uni.showToast({
            title: "无效商品已清空",
            icon: "none"
          });
        }
        if (!isClear) {
          uni.showToast({
            title: "商品已删除",
            icon: "none"
          });
        }

        this.getList();

        this.querCartCount();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.disabledGoods {
  background: #fff;
  padding: $padding-md;
  border-radius: 10rpx;
  // margin-top: 20px;
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-title {
      font-weight: bold;
      font-size: $uni-font-size-md;
    }
    &-clear {
      color: $uni-color-error;
      font-size: $uni-font-size-md;
    }
  }
  &-list {
    width: 100%;
    &-item {
      margin: 40rpx 0;
    }
  }
}
</style>
