<template>
  <div v-loading="loading" ref="page" class="writeOffCardBox">
    <div class="searchBox">
      <el-input prefix-icon="el-icon-search" placeholder="请输入会员信息/卡券信息/门店名称" class="w280" 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 class="frmbt20">
        <el-button type="primary" @click="exportResult" v-if="$getButtonLimit($buttonCode.writeOffOUt)" :limit-code="$buttonCode.writeOffOUt"><i class="iconfont icon-xiazai" style="marginRight:4px;fontSize:16px" />查询结果导出</el-button>
      </div>
    </div>
    <div class="content" style="height: 100%">
      <el-table :data="tableData" :height="`calc(100% - 130px)`" :max-height="`${tableData.length * 71 + 48}px`">
        <el-table-column label="领取时间" prop="receiveTime" min-width="128px">
          <template slot-scope="scope">
            <p>
              {{ formatDateTimeByType(scope.row.receiveTime, 'yyyy-MM-dd-HH-mm-ss', true).y }}<br />
              <span>{{ formatDateTimeByType(scope.row.receiveTime, 'yyyy-MM-dd-HH-mm-ss', true).h }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="核销时间" prop="usedTime" min-width="117px">
          <template slot-scope="scope">
            <p>
              {{ formatDateTimeByType(scope.row.usedTime, 'yyyy-MM-dd-HH-mm-ss', true).y }}<br />
              <span>{{ formatDateTimeByType(scope.row.usedTime, 'yyyy-MM-dd-HH-mm-ss', true).h }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="核销金额" prop="writeOffPrice" min-width="100px"></el-table-column>
        <el-table-column label="成本比例" prop="costValueProportion" min-width="92px">
          <template slot-scope="{ row }"> {{ row.costValueProportion }}% </template>
        </el-table-column>
        <el-table-column label="成本金额" prop="costValue" min-width="100px"></el-table-column>
        <el-table-column label="核销门店" prop="storeName" min-width="100px" show-overflow-tooltip></el-table-column>
        <el-table-column label="核销操作人" prop="writeOffName" min-width="118px" show-overflow-tooltip></el-table-column>
        <el-table-column label="会员信息" min-width="137px" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              <img class="vertical-middle table__avatar_40" :src="scope.row.thirdimgurl || defaultAvatar" width="40" height="40" />
              <div class="inline-block vertical-middle">
                <p class="overflow-ellipsis">{{ scope.row.thirdName || '--' }}</p>
                <p class="fz12 gray overflow-ellipsis">{{ scope.row.phoneNum || '--' }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="卡券名称" prop="cardName" min-width="111px" show-overflow-tooltip></el-table-column>
        <el-table-column label="卡券代码" prop="cardCode" min-width="117px" show-overflow-tooltip></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 { getCardLogPage } 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();
  },
  beforeUpdate() {
    this.$refs.page.style.height = `calc(100vh - ${this.getOffsetTop(this.$refs.page)}px)`;
  },
  methods: {
    getOffsetTop(el) {
      let top = el.offsetTop;
      if (el.offsetParent) {
        top += this.getOffsetTop(el.offsetParent);
      }
      return top;
    },
    async getList() {
      this.dataTimeFormat();
      this.loading = true;
      await getCardLogPage(this.params)
        .then(res => {
          if (res.errorCode == 0) {
            this.tableData = res.result.result || [];
            this.total = res.result.totalCount;
          } else {
            this.loading = false;
            this.$tips({ type: 'error', message: '加载列表失败' });
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 导出数据
    exportResult() {
      this.dialogVisible = true;
      this.excelUrl = '/api-marketing/export-card-write-off-log';
      this.paramsex = {
        search: this.params.search,
        writeOffBeginTime: this.params.writeOffBeginTime,
        writeOffEndTime: this.params.writeOffEndTime,
        sortBy: this.params.sortBy,
        dataType: 1
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.w280 {
  width: 280px;
}
.w256 {
  width: 256px;
}
.ml16 {
  margin-left: 16px;
}
.writeOffCardBox {
  margin-top: 5px;
  .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>
