<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 v-if="isWxExchange" 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="isWxExchange?'输入姓名/昵称/手机号':'输入流水号/姓名/会员卡号'" 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-column label="领取状态" align="left" width="100px" prop="status" v-if="isWxExchange">
            <template slot-scope="scope">
              <span>{{scope.row.status === 1?'未领取':'已领取'}}</span>
            </template>
          </el-table-column>'
          <el-table-column :label="isWxExchange?'使用状态':'状态'" align="left" width="100px">
            <template slot-scope="scope">
              <p>
                <span v-if="isWxExchange" type="text">{{scope.row.useStatus === 5?'已使用':'未使用'}}</span>
                <span v-else type="text">{{filterStatus(scope.row.status)}}</span>
              </p>
              <p>
                <el-button type="text" v-if="scope.row.status !== 1 && !isWxExchange" @click="queryExpress(scope.row)">查看物流</el-button>
                <el-button type="text" v-else-if="scope.row.useStatus === 5 && isWxExchange">
                  <a target="_blank" :href="'/member/#/wechatmemberDetail?memberId='+scope.row.memberId">查看详情</a>
                </el-button>
              </p>
            </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>
      <express :show.sync="expressShow" :id="expressId"></express>
    </section>
</template>
<script>
import {getPageExchangeLogsList,exportExchangeListExcel} from '@/service/api/mallApi.js';
import {formateDateTimeByType} from '@/utils/index.js';
import express from '../common/express';
  export default {
    components: {
      express
    },
    data() {
      let _vm = this;
      return {
          loading:false,
          defaultAvatar:require('../../../assets/img/head_default.png'),
          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){
              const photoUrl = row.photoUrl.match(/^http(s)?/) ? row.photoUrl : _vm.defaultAvatar;
              return `<a href="/member/#/wechatmemberDetail?memberId=${row.memberId}" target="_blank">
                <img class="vertical-middle table__avatar" src="${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:'unitCostIntegral',width:'80',align:'left'}
          ],
          total:0,
          statusOptions:[],
          useStatusOptions:[{label:'所有使用状态',value:-1},{label:'已使用',value:1},{label:'未使用',value:2}],
          listParams:{
            pageSize: 20,
            currentPage: 1,
            status: -1,
            useStatus: -1,
            memberInfo: "",
            integralMallProId: this.$route.params.id,
            beginTime: "",
            endTime: ""
          },
          dateTime:['',''],
          tableList:[],
          expressId:'',
          expressShow:false,
          isWxExchange:this.$route.meta.type === 'wx'
      };
    },
    created() {
      if (this.isWxExchange) {
        this.statusOptions = [{label:'所有领取状态',value:-1},{label:'未领取',value:1},{label:'已领取',value:2}];
        this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'礼品',path:'/gift'},{name:'微信兑换券兑换记录',path:''}]);
      } else {
        this.statusOptions = [{label:'所有状态',value:-1},{label:'待发货',value:1},{label:'已发货',value:3}];
        this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'礼品',path:'/gift'},{name:'礼品兑换记录',path:''}]);
      }
      this.getPageExchangeLogsList();
    },
    methods: {
      filterStatus(status) {
         let result = '--';
         switch(status) {
           case 0:
           result = '已取消';
           break;
           case 1:
           result = '待发货';
           break;
           case 3:
           result = '已发货';
           break;
         }
         return result;
      },
      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`;
      },
      queryExpress(row) {
        this.expressShow = true;
        this.expressId = row.integralMallProExchangeId;
      }
    }
  };
</script>
