<template>
  <div v-loading="loading" class="writeOffCardBox">
    <div class="searchBox">
      <el-input prefix-icon="el-icon-search" placeholder="请输入卡券名称" class="w261" v-model="params.search" @change="refresh" clearable></el-input>
      <span class="spanBox">核销时间</span>
      <el-date-picker v-model="dateTime" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" @change="refresh" :picker-options="pickerOptions()" class="w256"></el-date-picker>
      <el-checkbox class="ml16" v-model="checkedM" label="当月" border @change="currentM" />
      <el-checkbox style="margin-left:6px;" v-model="checkedT" label="最近三个月" border @change="reThree" />
    </div>
    <div class="content">
      <el-table :data="tableData" @sort-change="sortChange">
        <el-table-column label="卡券名称" prop="cardName" min-width="100px"></el-table-column>
        <el-table-column label="券金额" prop="cardDenomination" min-width="100px" sortable="custom"></el-table-column>
        <el-table-column label="核销数量" prop="writeOffCount" min-width="100px" sortable="custom"></el-table-column>
        <el-table-column label="核销金额" prop="writeOffPrice" min-width="100px" sortable="custom"></el-table-column>
        <el-table-column label="成本比例" prop="costValueProportion" min-width="100px" sortable="custom">
          <template slot-scope="{ row }"> {{ row.costValueProportion }} % </template>
        </el-table-column>
        <el-table-column label="成本金额" prop="costValue" min-width="100px" sortable="custom"></el-table-column>
      </el-table>
      <dm-pagination v-show="tableData.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
    </div>
  </div>
</template>

<script>
import { getCardDetailPage } from '@/service/api/cardApi.js';
import writeOff from './writeOff.js';
import sticky from '@/mixins/table-sticky.js';
export default {
  name: 'writeOffDetail',
  mixins: [writeOff, sticky],
  data() {
    return {
      headerTop: '80px',
      parent: 'content',
      scrollClass: 'dm-layout-page',
      params: {
        writeOffBeginTime: '',
        writeOffEndTime: '',
        sortBy: 'receiveTime desc',
        search: '',
        currentPage: 1,
        pageSize: 20
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        this.loading = true;
        this.dataTimeFormat();
        this.params = {
          ...this.params,
          storeId: this.$route.query.id
        };
        let res = await getCardDetailPage(this.params);
        if (res.errorCode == 0 && res.result) {
          this.tableData = res.result.result || [];
          this.total = res.result.totalCount;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (err) {}
      this.loading = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.w256 {
  width: 256px;
}
.w261 {
  width: 261px;
}
.ml16 {
  margin-left: 16px;
}
.writeOffCardBox {
  margin: 20px;
  .searchBox {
    margin-bottom: 20px;
    .spanBox {
      margin-right: 10px;
      margin-left: 16px;
    }
    .frmbt20 {
      margin-bottom: 20px !important;
      margin-right: 0 !important;
      float: right;
      padding-right: 0 !important;
    }
  }
}
.table__avatar_40 {
  border-radius: 20px;
  margin-right: 7px;
  display: inline-block;
}
.overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
