<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <el-date-picker class="w350 mr10" v-model="dateTime" type="daterange" range-separator="~" start-placeholder="领取开始日期" end-placeholder="领取结束日期" @change="refresh"></el-date-picker>
      <el-input class="vertical-middle w300 mr10" v-model="listParams.packageName" clearable placeholder="请输入卡券包名称" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-input class="vertical-middle w300" v-model="listParams.search" clearable placeholder="请输入会员姓名/手机号" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
    </div>
    <el-table tooltip-effect="dark" :data="tableList" style="width:100%">
      <el-table-column label="领取时间" fixed="left" min-width="120px">
        <template slot-scope="scope">
          <div v-html="listTime(scope.row.receiveTime)"></div>
        </template>
      </el-table-column>
      <el-table-column label="用户信息" min-width="120px">
        <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="packageName" label="卡券包名称" min-width="130px">
        <template slot-scope="scope">
          <span :title="scope.row.couponPackageId" p-key="couponPackageId">{{ scope.row.packageName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="领取详情" min-width="120px">
        <template slot-scope="scope">
          <el-tooltip :open-delay="openDelay" effect="dark" placement="bottom">
            <div slot="content">
              <span v-html="scope.row.detail"></span>
            </div>
            <span class="el-button el-button--text" @mouseenter="showDetail(scope.row)">领取详情</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="appName" label="应用" min-width="120px"></el-table-column>
      <el-table-column prop="appActivityName" label="活动" min-width="120px"></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 { listTime } from '@/utils/index.js';
import api from '@/api/gic-card.js';
const { pagePackageLog, packageCouponReceiveLog } = api;
export default {
  name: 'MergeRecordList',
  mixins: [ page, formate  ],
  data() {
    return {
      loading: false,
      dateTime: [],
      listParams: {
        beginTime: '',
        endTime: '',
        packageName: '',
        search: '',
        currentPage: 1,
        pageSize: 20
      },
      tableList: [],
      total: 0,
      detail: '',
      mask: {
        show: false
      }
    };
  },
  created() {
    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: 'GIC卡券' }, { breadName: '卡券包' }, { breadName: '卡券包领取记录', breadPath: '/gic-card/merge/record-list' } ]);
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    listTime,
    showDetail({ packageLogId }) {
      const idx = this.tableList.findIndex(v => v.packageLogId == packageLogId);
      const item = this.tableList[idx];
      if(item.detail) {
        return;
      }
      packageCouponReceiveLog({ packageLogId }).then(res => {
        item.detail = res.result.map(v => {
          return `<p style="line-height:18px;max-width:400px">${v.cardName}：${v.receiveFlag ? '领取成功' : `领取失败(${ v.errMsg })`}</p>`;
        }).join('');
        this.tableList.splice(idx, 1, item);
      });
    },
    getTableList() {
      if(this.loading) {
        return;
      }
      this.loading = true;
      this.formatterTimeFunc('beginTime', 'endTime', 'yyyy-MM-dd', 'dateTime');
      let params = { ...this.listParams, memberCardId: this.currentAreaId };
      pagePackageLog(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>

<style lang="scss" scope>
.merge-mask {
  position: fixed;
  z-index: 10;
  background: #303133;
  color: white;
  border-radius: 4px;
  padding: 10px;
  .arrow {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }
}
</style>