<template>
  <div class="p20" v-loading="loading">
    <el-table tooltip-effect="dark" :data="tableList" style="width:100%">
      <el-table-column show-overflow-tooltip prop="memberName" label="会员信息" min-width="180" fixed="left">
        <template slot-scope="{row}">
          <member-info :member-name="row.memberName" :member-image="row.memberImage" :member-phone="row.memberPhone"></member-info>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="memberName" label="卡券信息" min-width="120">
        <div slot-scope="scope" v-html="formatCardMess(scope.row)"></div>
      </el-table-column>
      <el-table-column label="投放时间" min-width="120">
        <span slot-scope="scope" v-html="listTime(scope.row.createTime)"></span>
      </el-table-column>
      <el-table-column prop="errorMsg" label="失败原因" min-width="120"> </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, formate } from '@/mixins/table.js';
import { cardType } from '@/config/mapping/gic-card';
import { listTime } from '@/utils/index.js';
import api from '@/api/gic-card.js';
const { couponPutonFailLogList } = api;
export default {
  name: 'GroupSendInfo',
  mixins: [ page, formate ],
  data() {
    return {
      loading: false,
      listParams: {
        couponPlanId: this.$route.query.id,
        currentPage: 1,
        pageSize: 20,
      },
      tableList: [],
    };
  },
  created() {
    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: 'GIC卡券' }, { breadName: '卡券投放', breadPath: '/gic-card/group-send/list' }, { breadName: '卡券投放记录', breadPath: `/gic-card/group-send/info-log?id=${this.$route.query.id}` }, { breadName: '卡券投放失败' } ]);
  },
  mounted() {
    if(this.currentAreaId && this.listParams.couponPlanId) {
      this.getTableList();
    }
  },
  methods: {
    listTime,
    formatCardMess(row) {
      const _cardType = cardType[row.cardType] || {};
      return `<p class="fz14">${row.cardName}</p><p class="fz12">${_cardType.label}</p>`;
    },
    getTableList() {
      if(this.loading) {
        return;
      }
      this.loading = true;
      let params = { ...this.listParams, memberCardId: this.currentAreaId };
      couponPutonFailLogList(params).then(res => {
        this.loading = false;
        const data = res.result;
        this.tableList = data.result || [];
        this.loading = false;
        // 删除至最后一页没数据的情况，页码-1
        if (this.tableList.length === 0 && this.listParams.currentPage !== 1) {
          this.listParams.currentPage -= 1;
          this.getTableList();
        }
      }).finally(() => {
        this.loading = false;
      });
    }
  },
};
</script>
