<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <el-input class="vertical-middle w300 mr10" v-model="listParams.search" clearable placeholder="请输入卡券代码/会员信息" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-date-picker class="w400 mr10" v-model="dateTime" type="daterange" range-separator="~" start-placeholder="领取开始时间" end-placeholder="领取结束时间" @change="refresh"></el-date-picker>
      <dm-perm-button class="mlAuto" :disabled="$itemPerm($itemCode.gicCardShelfLogExportBtn)" type="primary" icon="iconfont-market4 mr5 icon-icon_yunxiazai" @click="showExport">数据导出</dm-perm-button>
    </div>
    <el-table tooltip-effect="dark" :data="tableList" style="width:100%" :max-height="mainHeight(52)" :empty-text="listParams.couponId || listParams.allCouponFlag ? '暂无数据' : '请选择单张卡券或开启全部卡券'">
      <el-table-column label="计划名称" min-width="140" fixed="left">
        <span>{{ $route.query.title || '--' }}</span>
      </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">
        <template slot-scope="scope">
          <member-info :member-name="scope.row.memberName" :member-image="scope.row.memberImage" :member-phone="scope.row.memberPhone"></member-info>
        </template>
      </el-table-column>
      <el-table-column label="所领卡券" min-width="140" show-overflow-tooltip>
        <template slot-scope="scope">
          <span p-key="couponId" :title="scope.row.couponId">{{ scope.row.cardName }}</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>
    <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 { dealExportParams } from '@/utils/common.js';
import { listTime } from '@/utils/index.js';
import fetch from '@/api/gic-card.js';
const { couponlogList, exportCoupReceivedLog } = fetch;

export default {
  name: 'ShelfReceiveList',
  mixins: [ page, formate, getMainHeight ],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      dateTime: [ Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now() ], // 默认7天
      // dateTime2: [ , ],
      listParams: {
        appActivityId: this.$route.query.couponShelfId || '',
        appCode: 'coupon-shelf', // 和领取记录共用接口，传特殊状态appCode
        search: '',
        receiveBeginTime: '',
        receiveEndTime: '',
        currentPage: 1,
        pageSize: 20,
        allCouponFlag: 1 // 展架特殊，就是全部
      },
      cardOrderShow: false,
      currentObj: {},
      tableList: [],
      total: 0,
      // 导出组件
      exportVisible: false,
      isCreated: false,
      // eslint-disable-next-line
      fields: [{label:'领取时间',value:'receiveTime',sensKey:false},{label:'会员名称',value:'memberName',sensKey:false},{label:'会员手机号',value:'memberPhone',sensKey:true},{label:'卡券名称',value:'cardName',sensKey:false}],
      sensKey: 'sensKey',
      label: 'label',
      value: 'value'
    };
  },
  created() {
    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: 'GIC卡券' }, { breadName: '卡券展架' }, { breadName: '卡券展架领取记录' } ]);
  },
  mounted() {
    if(this.currentAreaId) {
      this.getTableList();
    }
  },
  methods: {
    listTime,
    changeAllCouponFlag(val) {
      if (val) {
        this.listParams.couponId = '';
        if (new Date(this.dateTime[1]).getTime() - new Date(this.dateTime[0]).getTime() > 7 * 24 * 60 * 60 * 1000) {
          // 设置为默认值
          this.dateTime = [ Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now() ];
        }
      }
      this.refresh();
    },
    getTableList() {
      if(this.loading) {
        return;
      }
      this.formatterTimeFunc('receiveBeginTime', 'receiveEndTime', 'yyyy-MM-dd', 'dateTime');
      let params = { ...this.listParams, memberCardId: this.currentAreaId };
      this.loading = true;
      couponlogList(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) {
      let params =  dealExportParams({ config, listParams: this.listParams, fieldList: this.fields, path: this.$route.path, pathName: 'GIC卡券-卡券展架领取记录', query: { areaId: this.currentAreaId, appActivityId: this.$route.query.couponShelfId, appCode: this.listParams.appCode } });
      // 将config转换为请求参数
      // const params = config;
      // 导出数据完成后，必须调导出组件的applyReport方法
      // applyReport方法的第一个参数表示是否生成导出数据，第二个参数为导出数据的id
      exportCoupReceivedLog(params).then(res => {
        this.$refs.exportData.applyReport(true, res.result);
      }).catch(err => {
        this.$refs.exportData.applyReport();
      });
    }
  },
};
</script>
