<template>
  <div class="page page__nopad">
    <div class="gift-card-desc" @click="toGiftCardRules">
      <div class="gift-card-desc-left">
        <cr-icon type="volume-o" size="16px" />
        <span>什么是礼品卡及礼品卡使用规则</span>
      </div>
      <cr-icon type="arrow" class="arrow" size="16px" />
    </div>
    <cr-tabs
      v-model="currentTab"
      title-inactive-color="#333"
      sticky-inactive-color="#333"
      sticky
      z-index="4"
      @change="handleTabChange"
    >
      <cr-tab v-for="(item, index) in navList" :key="index" :title="totalTitle(item)" :name="index">
        <div class="gift-list">
          <cr-list
            v-if="item.list.length"
            v-model="item.loading"
            :finished="item.finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <template v-for="(listItem, idx) in item.list">
              <gift-card
                :key="idx"
                :show-record="true"
                :card-item="listItem"
                :be-overdue="index === 1"
                @bind-record-click="onRecordClick"
              />
            </template>
          </cr-list>
          <cr-empty
            v-else
            class="empty-margin"
            image="https://img.lkbang.net/xcx/empty@2x.png"
            image-size="4rem"
            description="暂无礼品卡～"
          />
        </div>
      </cr-tab>
    </cr-tabs>
    <cr-dialog v-model="showDialog" class="consum" confirm-button-text="知道了">
      <div slot="title" class="consum-header">使用记录</div>
      <ul class="consum-content">
        <li v-for="(item, index) in recordList" :key="index" class="consum-li">
          <div class="li-top flex">
            <div class="li-top-order">
              <span class="order-label"
                >{{ item.ioType == 6 ? '退款' : '订单' }}：{{ item.orderNo }}</span
              >
              <span class="order-copy" @click="copyOrderNo(item.orderNo)">复制</span>
            </div>
            <template v-if="item.ioType == 1 || item.ioType == 4">
              <b class="order-price-red">-{{ item.usedAmount }}</b>
            </template>
            <template v-else>
              <b class="order-price-green">+{{ item.usedAmount }}</b>
            </template>
          </div>
          <div class="li-bottom flex">
            <span class="order-time">{{ item.createdAt }}</span>
            <span class="order-surplus">余{{ item.remainAmount }}</span>
          </div>
        </li>
      </ul>
    </cr-dialog>
  </div>
</template>
<script>
import { getGiftCardList, getGiftCardDetail } from '@/api/coupon.api.js';
import giftCard from '@/components/giftCard.vue';
import clipTextMixins from '@/mixins/clipText.mixins';
const commonParams = {
  loading: false,
  finished: false,
  total: 0,
  page: 1,
  pageSize: 50,
  list: []
};
export default {
  name: 'GiftCardList',
  components: {
    giftCard
  },
  mixins: [clipTextMixins],
  data() {
    return {
      recordList: [],
      sharePicData: {},
      showDialog: false,
      currentTab: 0,
      navList: [
        {
          status: 2,
          title: '可使用',
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          status: 1,
          title: '不可用',
          ...JSON.parse(JSON.stringify(commonParams))
        }
      ],
      currentOrder: {}
    };
  },
  mounted() {
    this.getstatusQuery();
    this.getList();
  },
  methods: {
    toGiftCardRules() {
      window.location.href = 'https://page.q-gp.com/li-pin-qia-shuo-ming';
    },
    copyOrderNo(orderNo) {
      this.setClipboardData({
        data: orderNo,
        success: () => {
          this.$toast.success('已复制');
        }
      });
    },
    totalTitle(item) {
      return item.total ? `${item.title} (${item.total})` : item.title;
    },
    getstatusQuery() {
      const { status } = this.$route.query || {};
      status && (this.currentTab = Number(status));
    },
    handleTabChange(name) {
      this.currentTab = name;
      this.getList();
    },
    setNavListData(key, val) {
      this.$set(this.navList[this.currentTab], key, val);
    },
    async onRecordClick(item) {
      const userCardId = item.id;
      const [res] = await getGiftCardDetail({
        userCardId,
        pageNo: 1,
        pageSize: 300
      });
      this.recordList = res.dataList || [];
      if (this.recordList?.length) {
        this.showDialog = true;
      } else {
        this.$toast(`暂无此卡使用记录！`);
      }
    },
    async getList() {
      let { finished, page, pageSize, list, status } = this.navList[this.currentTab];
      if (finished) return;
      this.setNavListData('loading', true);
      const [res] = await getGiftCardList({
        pageNo: page,
        pageSize,
        queryStatus: status
      });
      // const res = {
      //   currentStatusData: {
      //     totalCount: 1,
      //     totalPage: 1,
      //     currentPage: 1,
      //     pageSize: 10,
      //     hasNext: false,
      //     dataList: [
      //       {
      //         id: 14,
      //         enable: 'VALID',
      //         createdAt: '2021-11-24 15:42:50',
      //         updatedAt: '2021-11-25 19:08:55',
      //         cardCode: '231231',
      //         userId: 65171986,
      //         cardType: 1,
      //         tenantId: 560867,
      //         tenantName: '问问',
      //         cardName: '礼品卡',
      //         denomination: 111.0,
      //         balance: 0.0,
      //         createMode: 1,
      //         reqUuid: '3123123',
      //         validTimeStart: '2021-11-24 15:42:50',
      //         validTimeEnd: '2021-12-24 15:42:50',
      //         giftStatus: 10
      //       }
      //     ]
      //   },
      //   mutexStautsCount: 2
      // };
      if (res) {
        this.setNavListData('loading', false);
        list = [...list, ...(res.currentStatusData.dataList || [])];
        this.setNavListData('list', list);
        this.setNavListData('total', res.currentStatusData.totalCount);
        this.$set(this.navList[this.currentTab === 0 ? 1 : 0], 'total', res.mutexStautsCount);
        if (!res.currentStatusData.hasNext) {
          this.setNavListData('finished', true);
        } else {
          page++;
          this.setNavListData('page', page);
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.cr-tabs {
  margin-top: 0 !important;
  & @{deep} > .cr-sticky {
    z-index: 3;
    & > div {
      z-index: 3;
      .cr-tabs__item--active {
        font-weight: bold;
        & > .cr-tabs__text {
          font-weight: bold;
        }
      }
    }
  }
}

.consum {
  @{deep} .cr-dialog--header {
    padding-top: 18px;
    padding-bottom: 10px;
  }
  @{deep} .cr-dialog--message {
    padding: 0 16px;
    // height: 250px;
  }
  .consum-content {
    .text-size(14);
  }
  .flex {
    display: flex;
    justify-content: space-between;
  }
  .consum-li {
    margin-bottom: 12px;
    .li-bottom {
      color: @gray-4;
      padding-top: 10px;
    }
    .order-copy {
      .text-size(11);
      display: inline-block;
      width: 31px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      background: #f7f8fa;
      border-radius: 6px;
      margin-left: 2px;
    }
    .order-label {
      color: #323233;
    }
    .order-price-red {
      color: @font-color-search;
    }
    .order-price-green {
      color: #07c160;
    }
    // display: flex;
  }
}
.gift-list {
  padding: 0 @padding-sm;
  .cr-empty {
    margin-top: 50px;
    text-align: center;
  }
  @{deep} .cr-empty__image {
    height: auto !important;
  }
}

.gift-card-desc {
  width: 100%;
  height: 40px;
  background: #fffbe8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 13px;
  box-sizing: border-box;
  color: #ed6a0c;
  .gift-card-desc-left {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    span {
      margin-left: 8px;
    }
  }
}
</style>
