<template>
  <div v-if="!isClear && goodsList.length" class="disabledGoods">
    <div v-if="goodsList.length" class="disabledGoods-header">
      <div class="disabledGoods-header-title">失效商品</div>
      <div class="disabledGoods-header-clear" @click="clearDisabledGoods">清空失效商品</div>
    </div>
    <div class="disabledGoods-list">
      <div v-for="(item, idx) in goodsList" :key="idx" class="disabledGoods-list-item">
        <cr-swipe-cell ref="swipeCellInvalid" @touchstart.native="handleSwiperCellClose(idx)">
          <template #default>
            <cardList :goods="item" />
          </template>
          <template #right>
            <cr-button square type="danger" text="删除" @click="delGood(item)" />
          </template>
        </cr-swipe-cell>
      </div>
    </div>
    <cr-dialog
      v-model="isClearInvalidGoods"
      confirm-button-text="删除"
      :show-cancel-button="true"
      cancel-button-text="再想想"
      confirm-button-color="#999999"
      cancel-button-color="#ec1500"
      @onConfirm="confirm(goodsList, true)"
    >
      <div class="content">
        确定删除失效商品吗？
      </div>
    </cr-dialog>
  </div>
</template>
<script>
import cardList from './cardList';
import { getInvalidList, addSkuToCart } from '@/api/shopCart.api.js';
import { mapActions } from '../../shopCartModules';
export default {
  name: 'DisabledGoodsCard',
  components: {
    cardList
    // uniPopupDialog,
    // uniSwipeAction,
    // uniSwipeActionItem
  },
  data() {
    return {
      isClearInvalidGoods: false,
      goodsList: [],
      isClear: false,
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#F43530'
          }
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },

  methods: {
    handleSwiperCellClose(goodsIdx) {
      this.$refs.swipeCellInvalid?.forEach((item, idx) => {
        if (goodsIdx !== idx) {
          item.close();
        }
      });
    },
    ...mapActions(['queryCartCount']),
    async getList() {
      const [data] = await getInvalidList({ pageNo: 1, pageSize: 120 });
      this.goodsList = data?.invalidSkuList || [];
    },
    clearDisabledGoods() {
      this.isClearInvalidGoods = true;
    },
    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;
          this.$toast('无效商品已清空');
        }
        if (!isClear) {
          this.$toast('商品已删除');
        }

        this.getList();

        this.queryCartCount();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.disabledGoods {
  background: #fff;
  padding: 10px 0 0 10px;
  border-radius: 5px;
  box-sizing: border-box;
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-title {
      font-weight: bold;
      font-size: 13px;
    }
    &-clear {
      color: #dd524d;
      font-size: 13px;
      margin-right: 10px;
    }
  }
  &-list {
    width: 100%;
  }
}
</style>
