<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()"></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 class="frmbt20">
        <el-button type="primary" @click="exportResult"><i class="iconfont icon-xiazai" style="marginRight:5px;fontSize:12px" />查询结果导出</el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" @sort-change="sortChange">
        <el-table-column label="核销门店" prop="storeName" min-width="100px"></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="costValue" min-width="100px" sortable="custom"></el-table-column>
        <el-table-column label="操作" prop="" min-width="100px">
          <template slot-scope="{ row }">
            <el-button type="text" @click="details(row)">明细</el-button>
          </template>
        </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>
      <vue-gic-export-excel :dialogVisible.sync="dialogVisible" :dataArr="tableData" :type="2" :excelUrl="excelUrl" :params="paramsex" :projectName="projectName"></vue-gic-export-excel>
    </div>
  </div>
</template>

<script>
import { getCardStorePage } from '@/service/api/cardApi.js';
import writeOff from './writeOff.js';
export default {
  name: 'writeOffCard',
  mixins: [writeOff],
  data() {
    return {
      params: {
        writeOffBeginTime: '',
        writeOffEndTime: '',
        sortBy: 'receiveTime desc',
        search: '',
        currentPage: 1,
        pageSize: 20
      },
      dialogVisible: false,
      paramsex: {},
      excelUrl: '',
      projectName: 'marketing' // 当前项目名
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      this.dataTimeFormat();
      await getCardStorePage(this.params)
        .then(res => {
          if (res.errorCode == 0) {
            this.tableData = res.result.result || [];
            this.total = res.result.totalCount;
          } else {
            this.$tips({ type: 'error', message: '加载列表失败' });
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 明细
    details(row) {
      this.$router.push(`/card/hhrecord/storeDetails?id=${row.storeId}`);
    },
    // 导出数据
    exportResult() {
      this.dialogVisible = true;
      this.excelUrl = 'api-marketing/export-card-write-off-store';
      this.params = {
        search: this.params.search,
        writeOffBeginTime: this.params.writeOffBeginTime,
        writeOffEndTime: this.params.writeOffEndTime,
        sortBy: this.params.sortBy,
        dataType: 1
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.w261 {
  width: 261px;
}
.ml16 {
  margin-left: 16px;
}
.writeOffCardBox {
  margin-top: 5px;
  .searchBox {
    .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>
