<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <span class="mrAuto"></span>
      <el-button type="primary" icon="iconfont-market4 icon-icon_yunxiazai mr5">数据导出</el-button>
    </div>
    <el-table tooltip-effect="dark" :data="tableList" style="width:100%">
      <el-table-column v-for="(v, i) in tableHeader" :fixed="v.fixed" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter" :sortable="v.sortable">
        <template slot-scope="scope">
          <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
          <span v-else>{{ scope.row[v.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="clearfix">
      <dm-pagination class="fr mb0" v-if="tableList.length" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
    </div>
  </div>
</template>

<script>
import { page } from '@/mixins/table.js';
import { listTime } from '@/utils/index.js';
import api from '@/api/gic-card.js';
const { codeErrorList } = api;
export default {
  name: 'CodeErrorList',
  mixins: [ page ],
  data() {
    return {
      loading: false,
      listParams: {
        currentPage: 1,
        pageSize: 20,
        couponId: this.$route.query.id
      },
      tableList: [],
      total: 0,
      tableHeader: [
        { label: '券码', prop: 'code', align: 'left', fixed: 'left' },
        {
          label: '导入时间',
          align: 'left',
          formatter: function(row) {
            return row.createTime ? listTime(row.createTime) : '--';
          }
        },
        { label: '错误原因', prop: 'errMsg', align: 'left' },
      ]
    };
  },
  created() {
    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: 'GIC卡券' }, { breadName: '卡券库', breadPath: '/gic-card/list' }, { breadName: '导入券码失败记录' } ]);
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    getTableList() {
      if(this.loading) {
        return;
      }
      this.loading = true;
      let params = { ...this.listParams, ...{ memberCardId: this.currentAreaId } };
      codeErrorList(params).then(res => {
        this.loading = false;
        const data = res.result;
        this.tableList = data.result || [];
        this.total = data.totalCount;
        // 删除至最后一页没数据的情况，页码-1
        if (this.tableList.length === 0 && this.listParams.currentPage !== 1) {
          this.listParams.currentPage -= 1;
          this.getTableList();
        }
      }).finally(() => {
        this.loading = false;
      });
    }
  }
};
</script>
