<template>
  <section v-loading="loading">
    <div class="pb22 clearfix">
      <el-input v-model="listParams.searchParams" class="w300" placeholder="请输入姓名/昵称/手机号/会员卡号" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-input v-model="listParams.refundOrderSerial" class="w300" placeholder="请输入退款单号" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-date-picker class="w250" v-model="dateTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleDateChange"></el-date-picker>
      <el-button class="fr" type="primary" @click="exportExcel" icon="iconfont icon-xiazai fz14"> 按搜索结果导出</el-button>
    </div>
    <el-table tooltipEffect="light" :data="tableList" :style="{ width: '100%' }">
      <el-table-column show-overflow-tooltip width="180" prop="sendBackTime" label="基本信息" fixed="left">
        <template slot-scope="{ row }">
          <img class="vertical-middle table__avatar--40" :src="row.memberImage || defaultAvatar" width="60" height="60" />
          <div class="inline-block vertical-middle">
            <p class="table-name--ellipsis">{{ row.memberName || '--' }}</p>
            <p class="fz13 gray">{{ row.memberPhone || '--' }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip min-width="120" prop="memberCardNo" label="会员卡号" />
      <el-table-column prop="refundOrderSerial" label="退款单号">
        <template slot-scope="{ row }">
          <el-tooltip :content="row.refundOrderSerial">
            <div class="ellipsis">{{ row.refundOrderSerial }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip min-width="120" label="回收总金额">
        <template slot-scope="{ row }">
          {{ row.couponAmountManual + row.couponAmountAuto }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip min-width="120" prop="couponAutoDestroy" label="系统回收券数" />
      <el-table-column show-overflow-tooltip min-width="120" prop="couponAmountAuto" label="系统回收金额"> </el-table-column>
      <el-table-column show-overflow-tooltip min-width="120" prop="couponManualDestroy" label="手动回收券数"></el-table-column>
      <el-table-column show-overflow-tooltip min-width="120" prop="couponAmountManual" label="手动回收金额"></el-table-column>
      <el-table-column show-overflow-tooltip min-width="150" prop="integralOrder" label="当笔订单退回积分"></el-table-column>
      <el-table-column show-overflow-tooltip width="100" prop="integralRemain" label="剩余积分"></el-table-column>
      <el-table-column show-overflow-tooltip min-width="120" prop="integralFee" label="积分折现金额"></el-table-column>
      <el-table-column show-overflow-tooltip min-width="120" prop="refundOrderTime" label="退单时间">
        <template slot-scope="{ row }">
          <p class="cell-time">
            {{ formatDateTimeByType(row.refundOrderTime, 'yyyy-MM-dd-HH-mm', true).y }}<br />
            <span>{{ formatDateTimeByType(row.refundOrderTime, 'yyyy-MM-dd-HH-mm', true).h }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="{ row }">
          <el-button type="text" @click="detail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <dm-pagination v-show="tableList.length" background class="dm-pagination" :current-page="listParams.currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
    <vue-gic-export-excel :dialogVisible.sync="dialogVisible" :dataArr="tableList" :type="2" :excelUrl="excelUrl" :params="params" projectName="marketing"></vue-gic-export-excel>
    <el-dialog title="详情" :visible.sync="show" width="700px" :before-close="handleClose">
      <div v-loading="detailLoading">
        <el-table tooltipEffect="light" :data="detailList" :style="{ width: '100%' }" :height="400">
          <el-table-column show-overflow-tooltip prop="destoryType" label="卡券回收">
            <template slot-scope="{ row }">
              {{ destoryType[row.destoryType] }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip width="120" prop="couponType" label="卡券类型">
            <template slot-scope="{ row }">
              {{ couponType[row.couponType] }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="120" prop="couponName" label="卡券名称">
            <template slot-scope="{ row }">
              <a :href="'/marketing/#/card/info/' + row.couponId" target="_blank"> {{ row.couponName }}</a>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip width="120" prop="couponDenomination" label="卡券金额">
            <template slot-scope="{ row }">{{ row.couponDenomination }}{{ couponTypeUnit[row.couponType] }} </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="120" prop="couponCode" label="卡券代码" />
        </el-table>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { formatDateTimeByType } from '@/utils/index.js';
import { listConsumeRefundPage, ecmConsumeCouponExcel, listConsumeCouponDetail } from '@/service/api/cardApi.js';
import talbeMethods from '@/mixins/tableMethods.js';
const destoryType = {
  0: '自动',
  1: '手动'
};
const couponType = {
  0: '抵金券',
  1: '折扣券',
  2: '礼品券'
};
const couponTypeUnit = {
  0: '元',
  1: '折'
};

export default {
  data() {
    return {
      listParams: {
        beginTime: '',
        endTime: '',
        searchParams: '',
        refundOrderSerial: '',
        currentPage: 1,
        pageSize: 20
      },
      dateTime: '',
      formatDateTimeByType,
      total: 0,
      tableList: [{}],
      loading: true,
      dialogVisible: false,
      show: false,
      detailLoading: false,
      detailList: [],
      destoryType,
      couponType,
      couponTypeUnit
    };
  },
  mounted() {
    this.getTableList();
  },
  mixins: [talbeMethods],
  methods: {
    async getTableList() {
      this.loading = true;
      try {
        let res = await listConsumeRefundPage(this.listParams);
        this.tableList = res.result.result || [];
        this.total = res.result.totalCount || 0;
      } catch (err) {
        this.$tips({ type: 'error', message: '加载列表失败' });
      }
      this.loading = false;
    },
    async detail(row) {
      this.show = true;
      this.detailLoading = true;
      try {
        let res = await listConsumeCouponDetail({ id: row.occupyId }); //2c90a8838020f6a2018020f6ed1f0000
        this.detailList = res.result || [];
      } catch (err) {
        this.$tips({ type: 'error', message: '加载列表失败' });
        this.show = false;
      } finally {
        this.detailLoading = false;
      }
    },
    // 导出列表
    exportExcel() {
      this.dialogVisible = true;
      this.excelUrl = ecmConsumeCouponExcel;
      const { searchParams, beginTime, endTime, refundOrderSerial } = this.listParams;
      this.params = {
        searchParams,
        beginTime,
        endTime,
        refundOrderSerial,
        requestProject: 'marketing'
      };
    },
    handleDateChange(val) {
      if (val) {
        this.listParams.beginTime = val[0];
        this.listParams.endTime = val[1];
      } else {
        this.listParams.beginTime = '';
        this.listParams.endTime = '';
      }
      this.refresh();
    }
  }
};
</script>

<style>
.wrapText {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  width: 90%;
  text-align: left;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
