<template>
    <section class="dm-wrap" v-loading="loading">
      <div class="pb22 clearfix">
        <el-date-picker class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getPageExchangeLogsList"></el-date-picker>
        <el-select class="vertical-middle w150" v-model="listParams.status" placeholder="选择领取状态" @change="getPageExchangeLogsList">
          <el-option v-for="v in statusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
        </el-select>
        <el-select class="vertical-middle w150" v-model="listParams.useStatus" placeholder="选择使用状态" @change="getPageExchangeLogsList">
          <el-option v-for="v in useStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
        </el-select>
        <el-input v-model="listParams.memberInfo" class="w300" placeholder="输入姓名/昵称/手机号" clearable @change="getPageExchangeLogsList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
        <el-button  type="primary" class="fr" icon="iconfont icon-icon_yunxiazai fz14" @click="exportExcel"> 导出列表</el-button>
      </div>
      <el-table tooltipEffect="light" :data="tableList" style="width: 100%">
          <el-table-column v-for="(v,i) in tableHeader" :align="v.align" :key="i" :prop="v.prop" :label="v.label">
            <template slot-scope="scope">
              <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
              <span v-else>{{scope.row[v.prop]}}</span>
            </template>
          </el-table-column>
      </el-table>
      <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
    </section>
</template>
<script>
import {getPageExchangeLogsList,exportExchangeListExcel} from '@/service/api/mallApi.js';
import {formateDateTimeByType} from '@/utils/index.js';
  export default {
    data() {
      let _vm = this;
      return {
          loading:false,
          tableHeader:[
            {label:'兑换时间',prop:'createTime',minWidth:'170',align:'left',formatter(row){
              return formateDateTimeByType(row.createTime,'yyyy-MM-dd-HH-mm-ss');
            }},
            {label:'流水号',prop:'definedCode',minWidth:'100',align:'left'},
            {label:'会员信息',prop:'issuingQuantity',minWidth:'170',align:'left',formatter(row){
              return `<a href="/member/#/wechatmemberDetail?memberId=${row.memberId}" target="_blank">
                <img class="vertical-middle table__avatar" src="${row.photoUrl}" width="60" height="60" alt="" srcset="">
                <div class="inline-block vertical-middle">
                  <p class="table-name--ellipsis">${row.memberName || '--'}</p>
                  <p class="table-name--ellipsis fz13">${row.cardNum || '--'}</p>
                </div>
              </a>`;
            }},
            {label:'消耗积分',prop:'payCost',width:'80',align:'left'},
            {label:'领取状态',prop:'status',width:'100',align:'left',formatter(row){
              let statusLabel ='--';
              _vm.statusOptions.map(v => {
                if (row.status === v.value) {
                  statusLabel = v.label
                }
              });
              return statusLabel;
            }},
            {label:'使用状态',prop:'useStatus',width:'100',align:'left',formatter(row){
              return row.useStatus === 5?'已使用':'未使用';
            }},
          ],
          total:0,
          statusOptions:[{label:'所有领取状态',value:-1},{label:'兑换取消(礼品)',value:0},{label:'兑换',value:1},{label:'领取(卡券)',value:2},{label:'已发货(礼品)',value:3}],
          useStatusOptions:[{label:'所有使用状态',value:-1},{label:'已使用',value:5},{label:'未使用',value:0}],
          listParams:{
            pageSize: 20,
            currentPage: 1,
            status: -1,
            useStatus: -1,
            memberInfo: "",
            integralMallProId: this.$route.params.id,
            beginTime: "",
            endTime: ""
          },
          dateTime:['',''],
          tableList:[]
      };
    },
    created() {
      this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'优惠券',path:'/mall/coupon'},{name:'优惠券兑换记录',path:''}]);
      this.getPageExchangeLogsList();
    },
    methods: {
      handleSizeChange(val) {
          this.listParams.pageSize = val;
          this.getPageExchangeLogsList();
      },
      handleCurrentChange(val) {
          this.listParams.currentPage = val;
          this.getPageExchangeLogsList();
      },
      async getPageExchangeLogsList() {
        this.loading = true;
        if (this.dateTime) {
          this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd');
          this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd');
        } else {
          this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
        }
        let res = await getPageExchangeLogsList(this.listParams);
        this.tableList = res.result.rows || [];
        this.total =  res.result.total || 0;
         this.loading = false;
      },
      // 导出列表
      exportExcel(){
        if (this.dateTime) {
          this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd');
          this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd');
        } else {
          this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
        }
        if (!this.listParams.beginTime || !this.listParams.endTime) {
          this.$tips({type: 'warning',message: '时间不能为空'});
          return;
        }
        window.location = `${exportExchangeListExcel}?integralMallProId=${this.listParams.integralMallProId}&status=${this.listParams.status}&useStatus=${this.listParams.useStatus}&memberInfo=${this.listParams.memberInfo}&beginTime=${this.listParams.beginTime}&endTime=${this.listParams.endTime}&requestProject=marketing`;
      },
    }
  };
</script>
