<template>
  <section class="dm-wrap" v-loading="loading">
    <div class="clearfix pb22">
      <el-input v-model="listParams.orderNumber" class="w250" placeholder="请输入业务单号进行搜索" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-date-picker class="w300" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
      <el-button class="fr" type="primary" @click="exportExcel">导出明细</el-button>
    </div>
    <el-table tooltipEffect="light" :data="tableList" style="width: 100%">
      <el-table-column v-for="(v, i) in tableHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter" :fixed="v.fixed">
        <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" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="$router.push('/ewash/statements/detail/' + scope.row.orderId)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <dm-pagination v-show="tableList.length" background class="dm-pagination" @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>
    <vue-gic-export-excel :dialogVisible.sync="dialogVisible" :dataArr="tableList" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
  </section>
</template>
<script>
import { edxOrderList, exportEdxOrderCsv } from '@/service/api/ewashApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
import tableMethods from '@/mixins/tableMethods.js';
export default {
  name: 'ewash-statements',
  mixins: [tableMethods],
  data() {
    return {
      dialogVisible: false,
      excelUrl: '',
      params: {},
      tableList: [],
      tableHeader: [
        { label: '业务单号', prop: 'orderNumber', minWidth: '140', tooltip: true, align: 'left' },
        { label: 'e袋洗单号', prop: 'edaixiOrderNumber', minWidth: '140', tooltip: true, align: 'left' },
        { label: '卡券类型', prop: 'couponTypeName', minWidth: '120', align: 'left' },
        { label: '卡券名称', prop: 'couponName', minWidth: '120', align: 'left' },
        { label: '卡券核销码', prop: 'couponNo', minWidth: '140', tooltip: true, align: 'left' },
        {
          label: 'E卡扣款时间',
          prop: 'edaixiPayTime',
          minWidth: '100',
          align: 'left',
          sortable: 'custom',
          formatter: function(row) {
            return `<p class="cell-time">
                      ${formatDateTimeByType(row.edaixiPayTime, 'yyyy-MM-dd-HH-mm-ss', true).y}<br />
                      <span>${formatDateTimeByType(row.edaixiPayTime, 'yyyy-MM-dd-HH-mm-ss', true).h}</span>
                    </p>`;
          }
        },
        {
          label: 'e袋洗扣款',
          prop: 'edaixiPayAmount',
          minWidth: '100',
          tooltip: false,
          align: 'left',
          formatter: row => {
            const value = row.edaixiPayAmount;
            if (!value) return '0.00';
            if (isNaN(value)) return value;
            return value.toFixed(2);
          }
        }
      ],
      listParams: {
        orderNumber: '',
        startTime: '',
        endTime: '',
        currentPage: 1,
        pageSize: 20
      },
      dateTime: [Date.now() - 30 * 24 * 60 * 60 * 1000, Date.now()],
      total: 0
    };
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    formatDateTimeByType,
    exportExcel() {
      this.dialogVisible = true;
      this.excelUrl = exportEdxOrderCsv;
      this.params = {
        orderNumber: this.listParams.orderNumber,
        startTime: this.listParams.startTime,
        endTime: this.listParams.endTime,
        requestProject: 'marketing'
      };
    },
    // 获取列表
    async getTableList() {
      try {
        this.loading = true;
        if (this.dateTime) {
          this.listParams.startTime = formatDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
          this.listParams.endTime = formatDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
        } else {
          this.listParams.startTime = this.listParams.endTime = '';
        }
        let res = await edxOrderList(this.listParams);
        if (res.errorCode === 0 && res.result) {
          this.tableList = res.result.result || [];
          this.total = res.result.totalCount;
        } else {
          this.tableList = [];
          this.total = 0;
        }
        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    }
  }
};
</script>
