<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <el-input class="vertical-middle w250 mr10" v-model="listParams.search" clearable placeholder="请输入会员姓名/卡号" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-select class="dm-select mrAuto w140" clearable v-model="listParams.status" placeholder="所有卡券状态" @change="refresh">
        <el-option v-for="(v, i) in sendCardStatus" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-button class="ml10" @click="$router.push(`/gic-card/group-send/info-fail?id=${listParams.couponPlanId}`)">卡券投放失败列表</el-button>
      <el-button type="primary" icon="iconfont-market4 icon-icon_yunxiazai mr5" @click="showExport">数据导出</el-button>
    </div>
    <div class="table-search-head">
      领取时间：<el-date-picker class="w300 mr10" v-model="dateTime" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
      核销时间：<el-date-picker class="w300 mrAuto" v-model="dateTime2" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
    </div>
    <el-table tooltip-effect="dark" :data="tableList" :max-height="mainHeight(52 + 50)" 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 label="卡券状态" min-width="120">
        <div slot-scope="scope" v-html="formatCardStatus(scope.row)"></div>
      </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 prop="wxCardCode" label="卡券代码" min-width="120"> </el-table-column>
      <el-table-column prop="verifyOrderNumber" label="订单流水号" min-width="120"> </el-table-column>
      <el-table-column label="领取时间" min-width="120">
        <span slot-scope="scope" v-html="listTime(scope.row.receiveTime)"></span>
      </el-table-column>
      <el-table-column label="核销时间" min-width="120">
        <span slot-scope="scope" v-html="listTime(scope.row.verifyTime)"></span>
      </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>
    <dm-export-data ref="exportData" :visible.sync="exportVisible" :sens-value="true" :fields="fields" :label="label" :value="value" :sens-key="sensKey" :loading="loading" :is-created="isCreated" @export="onExport" @closed="isCreated = false"></dm-export-data>
  </div>
</template>

<script>
import { page, formate, getMainHeight } from '@/mixins/table.js';
import { sendCardStatus, cardType } from '@/config/mapping/gic-card';
import { listTime } from '@/utils/index.js';
import { dealExportParams  } from '@/utils/common.js';
import api from '@/api/gic-card.js';
const { groupSendInfoLog, exportCouponPutonLog } = api;
export default {
  name: 'GroupSendInfo',
  mixins: [ page, formate, getMainHeight ],
  data() {
    return {
      loading: false,
      dateTime: [ , ],
      dateTime2: [ , ],
      listParams: {
        search: '',
        couponPlanId: this.$route.query.id,
        status: '',
        currentPage: 1,
        pageSize: 20,
        verifyBeginTime: '',
        verifyEndTime: '',
        receiveBeginTime: '',
        receiveEndTime: '',
      },
      sendCardStatus: Object.keys(sendCardStatus).map(v => { return sendCardStatus[v]; }),
      tableList: [],
      // 导出组件
      exportVisible: false,
      isCreated: false,
      // eslint-disable-next-line
      fields: [{label:'会员头像', value: 'memberImage', sensKey: false},{label:'会员名称',value:'memberName',sensKey:false},{label:'会员手机号码',value:'memberPhone',sensKey:true},{label:'卡券状态',value:'statusRemark',sensKey:false},{label:'卡券名称',value:'cardName',sensKey:false},{label:'卡券类型',value:'cardTypeRemark',sensKey:false},{label:'卡券代码',value:'wxCardCode',sensKey:false},{label:'订单流水号',value:'verifyOrderNumber',sensKey:false},{label:'领取时间',value:'receiveTimeRemark',sensKey:false},{label:'核销时间',value:'verifyTimeRemark',sensKey:false}],
      sensKey: 'sensKey',
      // sensValue: '',
      label: 'label',
      value: 'value'
    };
  },
  created() {
    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: 'GIC卡券' }, { breadName: '卡券投放', breadPath: '/gic-card/group-send/list' }, { breadName: '卡券投放记录' } ]);
  },
  mounted() {
    if(this.currentAreaId && this.listParams.couponPlanId) {
      this.getTableList();
    }
  },
  methods: {
    listTime,
    formatCardStatus(row) {
      const _status = sendCardStatus[row.status] || {};
      return `<span class="state-point ${_status.cl}">${_status.label}</span>`;
    },
    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;
      this.formatterTimeFunc('receiveBeginTime', 'receiveEndTime', 'yyyy-MM-dd', 'dateTime');
      this.formatterTimeFunc('verifyBeginTime', 'verifyEndTime', 'yyyy-MM-dd', 'dateTime2');
      let params = { ...this.listParams, ...{ memberCardId: this.currentAreaId } };
      groupSendInfoLog(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;
      });
    },
    // ********数据导出*************
    showExport() {
      if(!this.tableList.length) {
        this.$tips({ message: '没有要导出的数据', type: 'warning' });
        return;
      }
      this.exportVisible = true;
    },
    onExport(config) {
      const params = dealExportParams({ config, listParams: this.listParams, fieldList: this.fields, path: this.$route.path, pathName: 'GIC卡券-卡券投放记录', query: { id: this.$route.query.id, areaId: this.currentAreaId } });
      exportCouponPutonLog(params).then(res => {
        this.$refs.exportData.applyReport(true, res.result);
      }).catch(err => {
        this.$refs.exportData.applyReport();
      });
    }
  },
};
</script>
