<template>
  <div class="recordsContainer">
    <nav-bar />
    <cr-tabs
      v-model="currentTab"
      title-bg-color="#fff"
      title-inactive-color="#999"
      border
      @change="handleTabChange"
    >
      <cr-tab v-for="(item, index) in navList" :key="index" :title="item.title" :name="index">
        <div v-if="item.list.length != 0" class="content">
          <cardItem v-for="(val, key) in item.list" :key="key" :item-data="val" />
          <div v-if="!item.finished" class="loadMore" @click="loadMore">
            <div class="desc">
              加载更多
            </div>
            <i class="arrow iconfont icon-arrow-down" />
          </div>
        </div>
        <div v-else class="imgContent">
          <img class="noData" src="@/assets/images/promotion/no-data.png" />
        </div>
      </cr-tab>
    </cr-tabs>
  </div>
</template>
<script>
import navBar from './components/navBar.vue';
import cardItem from './components/cardItem.vue';
import { getRecords } from '@/api/promotion';
const commonParams = {
  loading: false,
  finished: false,
  page: 1,
  pageSize: 20,
  list: []
};
export default {
  components: {
    navBar,
    cardItem
  },
  data() {
    return {
      currentTab: 0,
      navList: [
        {
          state: '',
          title: '全部',
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          state: 1,
          title: '待审核',
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          state: 2,
          title: '审核拒绝',
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          state: 3,
          title: '审核通过',
          ...JSON.parse(JSON.stringify(commonParams))
        }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    loadMore() {
      this.getList();
    },
    setNavListData(key, val) {
      this.$set(this.navList[this.currentTab], key, val);
    },
    handleTabChange(name) {
      this.currentTab = name;
      console.log(name);
      if (this.navList[name] && this.navList[name].list.length) {
        return;
      }
      this.getList();
    },
    async getList() {
      let { finished, page, pageSize, list, state: auditStatus } = this.navList[this.currentTab];
      console.log(page, pageSize, auditStatus);
      if (finished) return;
      this.setNavListData('loading', true);
      const [res] = await getRecords({
        pageNo: page,
        pageSize,
        auditStatus
      });
      if (res) {
        this.setNavListData('loading', false);
        list = [...list, ...res.userCardInfoPreList];
        this.setNavListData('list', list);
        if (!res.hasNext) {
          this.setNavListData('finished', true);
        } else {
          page++;
          this.setNavListData('page', page);
        }
      }
    }
  }
};
</script>
<style scoped lang="less">
.recordsContainer {
  width: 100%;
  height: 100%;
  background: @white;
  padding-top: 45px;
  box-sizing: border-box;
  /deep/ .cr-tab__pane {
    background: @white;
  }
  /deep/ .cr-hairline--top-bottom::after {
    border-color: @grey-border;
  }
  .content {
    // height: calc(100% - 89px);
    padding: @padding-sm 0 @padding-sm @padding-lg;
    .loadMore {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 20px;
      padding-right: @padding-lg;
      box-sizing: border-box;
      color: @gray-4;
      .text-size(13);
      .desc {
        margin-right: @padding-unit;
      }
    }
  }
  .imgContent {
    text-align: center;
    padding-top: @padding-lg;
    .noData {
      width: 160px;
    }
  }
}
</style>
