<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <el-select class="dm-select mr10 w140" clearable v-model="listParams.statusFlag" placeholder="所有转赠状态" @change="refresh">
        <el-option v-for="(v, i) in statusFlag" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-input placeholder="请输入关键字" class="w400 mr10" v-model="listParams.search" clearable @change="refresh">
        <el-select v-model="listParams.searchColumn" slot="prepend" style="width:140px;" placeholder="请选择" @change="refresh">
          <el-option label="卡券名称" value="cardName"></el-option>
          <el-option label="卡券代码" value="couponCode"></el-option>
          <el-option label="转赠会员姓名" value="memberName"></el-option>
          <el-option label="转赠会员卡号" value="memberCardNo"></el-option>
          <el-option label="受赠会员姓名" value="giveMemberName"></el-option>
          <el-option label="受赠会员卡号" value="giveMemberCardNo"></el-option>
        </el-select>
      </el-input>
      <el-button class="ml10" type="text" @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}<i :class="`${isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'} el-icon--right ml5`"></i></el-button>
      <!-- <dm-perm-button :disabled="$itemPerm($itemCode.gicCardGiveLogExport)" type="primary" icon="iconfont-market4 icon-icon_yunxiazai mr5" @click="showExport">数据导出</dm-perm-button> -->
    </div>
    <div v-show="isOpen" class="table-search-head p20">
      转赠时间：<el-date-picker class="w250" style="margin-right:60px" v-model="dateTime" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
      领取时间：<el-date-picker class="w250" v-model="dateTime2" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
    </div>
    <el-table class="mt20" tooltip-effect="dark" :data="tableList" :max-height="mainHeight(54 + 50)" style="width:100%" :default-sort="{prop: 'giveTime', order: ''}" @sort-change="sortChange">
      <el-table-column label="转赠会员" min-width="120" fixed="left">
        <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 prop="giveTime" label="转赠时间" min-width="120">
        <span slot-scope="scope" v-html="listTime(scope.row.giveTime)"></span>
      </el-table-column>
      <el-table-column label="转赠状态" min-width="120">
        <span slot-scope="scope" v-html="formatSendStatus(scope.row)"></span>
      </el-table-column>
      <el-table-column label="领取会员" min-width="120">
        <template slot-scope="scope">
          <member-info :member-name="scope.row.giveMemberName" :member-image="scope.row.giveMemberImage" :member-phone="scope.row.giveMemberPhone"></member-info>
        </template>
      </el-table-column>
      <el-table-column label="卡券类型" min-width="120">
        <span slot-scope="scope" v-html="formatCardType(scope.row)"></span>
      </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-column label="领取时间" min-width="120">
        <span slot-scope="scope" v-html="listTime(scope.row.receiveTime)"></span>
      </el-table-column>
      <el-table-column prop="couponCode" 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>
    <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';
import { sendType, cardType } from '@/config/mapping/gic-card';
const { giveLogList, exportCoupGiveLog } = fetch;
export default {
  name: 'SendList',
  mixins: [ page, formate, getMainHeight ],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      dateTime: [ , ],
      dateTime2: [ , ],
      listParams: {
        search: '',
        searchColumn: 'cardName',
        statusFlag: '',
        giveBeginTime: '',
        giveEndTime: '',
        receiveBeginTime: '',
        receiveEndTime: '',
        currentPage: 1,
        pageSize: 20,
        sortOrder: '' // 默认可以不传; asc:升序; desc:倒序
      },
      statusFlag: Object.keys(sendType).map(v => { return sendType[v]; }),
      total: 0,
      tableList: [],
      // 导出组件
      exportVisible: false,
      isCreated: false,
      // eslint-disable-next-line
      fields: [{label:'转赠会员头像',value:'memberImage',sensKey:false},{label:'转赠会员名称',value:'memberName',sensKey:true},{label:'转赠会员手机号码',value:'memberPhone',sensKey:true},{label:'转赠时间',value:'giveTime',sensKey:false},{label:'领取状态',value:'status',sensKey:false},{label:'领取会员头像',value:'giveMemberImage',sensKey:false},{label:'领取会员名称',value:'giveMemberName',sensKey:true},{label:'领取会员手机号码',value:'giveMemberPhone',sensKey:true},{label:'领取时间',value:'receiveTime',sensKey:false},{label:'卡券类型',value:'cardType',sensKey:false},{label:'卡券名称',value:'cardName',sensKey:false},{label:'卡券代码',value:'cardCode',sensKey:false},],
      sensKey: 'sensKey',
      // sensValue: '',
      label: 'label',
      value: 'value',
      isOpen: false,
    };
  },
  created() {
    this.$emit('updateBread', [ { breadName: '转赠记录' } ]);
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    listTime,
    sortChange(sort) {
      this.listParams.sortOrder = sort.order ? sort.order == 'ascending' ? 'asc' : 'desc' : '';
      this.refresh();
    },
    formatSendStatus(row) {
      const st = sendType[row.status];
      if(st) {
        return `<span class="state-point ${st.cl}">${st.label || '--'}</span>`;
      } else {
        return '<span class="state-point state-point-default">未知状态</span>';
      }
    },
    formatCardType(row) {
      return cardType[row.cardType] ? cardType[row.cardType].label : '--';
    },
    getTableList() {
      if(this.loading) {
        return;
      }
      this.loading = true;
      this.formatterTimeFunc('giveBeginTime', 'giveEndTime', 'yyyy-MM-dd', 'dateTime');
      this.formatterTimeFunc('receiveBeginTime', 'receiveEndTime', 'yyyy-MM-dd', 'dateTime2');
      let params = { ...this.listParams, memberCardId: this.currentAreaId };
      giveLogList(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: { areaId: this.currentAreaId } });
      exportCoupGiveLog(params).then(res => {
        this.$refs.exportData.applyReport(true, res.result);
      }).catch(err => {
        this.$refs.exportData.applyReport();
      });
    }
  },
};
</script>
