<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-04-14 09:50:16
 * @LastEditors: 无尘
 * @LastEditTime: 2020-04-28 17:47:22
 -->
<!--
  <record-detail  @closeSendRecord="closeSendRecord"></record-detail>
  import cardSendRecord from '@/components/app/protectCard/record-detail.vue';
 -->
<template>
  <el-dialog title="记录" :visible.sync="dialogVisible" width="802px" :before-close="handleClose">
    <div class="table-condition flex flex-space-between m-b-20">
      <div class="table-condition-left">
        <el-input placeholder="请输入卡券名称" v-model="conditionObj.searchInput" class="w-369" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput">
          <!-- <el-select class="w-103" v-model="conditionObj.searchType" slot="prepend" placeholder="请选择">
            <el-option label="按导购" value="1"></el-option>
            <el-option label="按会员" value="2"></el-option>
          </el-select> -->
        </el-input>
        <!-- <el-date-picker class="m-l-10" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="conditionObj.dateRange" @change="changeDate" :editable="false" :value-format="'yyyy-MM-dd'" type="date" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker> -->
      </div>
    </div>
    <div>
      <el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" height="450" :style="{ width: '100%', minHeight: tableH }">
        <el-table-column label="卡券名称" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.cardName || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="投放数量" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.issuingQuantity || '0' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="领取数量">
          <template slot-scope="scope">{{ scope.row.getedQuantity || '0' }}</template>
        </el-table-column>
        <el-table-column prop="" label="领取率">
          <template slot-scope="scope">{{ scope.row.getedRate | percenteNum }}</template>
        </el-table-column>
        <el-table-column prop="" label="使用数量">
          <template slot-scope="scope">
            <div>{{ scope.row.usageQuantity || '0' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="核销率">
          <template slot-scope="scope">
            <div>{{ scope.row.verificationRate | percenteNum }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
        <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
export default {
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    },
    policyId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      dialogVisible: true,
      tableData: [],
      // 条件
      conditionObj: {
        searchInput: '',
        searchType: '1',
        storeGroup: [],
        dateRange: []
      },

      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0
    };
  },
  filters: {
    percenteNum(val) {
      return val > 0 ? Number(val * 100).toFixed(2) + '%' : Number(val).toFixed(2) + '%';
    }
  },
  methods: {
    handleClose(done) {
      const that = this;
      that.$emit('closeSendRecord');
    },
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    }, 500),
    // 搜索清除
    clearInput() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     *  选择日期
     */
    changeDate(val) {
      const that = this;
      if (!val) {
        that.choiceDateCopy = [];
        that.conditionObj.dateRange = [];
      }
      that.getTableList();
    },
    /**
     * 分页---页码变化
     */
    handleSizeChange(val) {
      const that = this;
      that.pageSize = val;
      that.getTableList();
    },

    /**
     * 分页---当前页变化
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      that.getTableList();
    },
    /**
     * 获取列表数据
     */
    getTableList(val) {
      const that = this;

      let para = {
        policyId: that.policyId,
        search: that.conditionObj.searchInput || '',
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      postRequest('/haoban-app-customer-web/inner/find-card-total-log-page', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.tableData = resData.result.result || [];
            that.total = resData.result.totalCount;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.activeBrand = newData;
        that.getTableList();
      }
    },
    policyId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.getTableList();
      }
    }
  },
  mounted() {
    const that = this;
    if (that.policyId) {
      that.getTableList();
    }
  }
};
</script>
<style lang="less" scoped>
.m-b-20 {
  margin-bottom: 20px;
}
.p-l-18 {
  padding-left: 18px;
}
.w-369 {
  width: 369px;
}
.w-103 {
  width: 103px;
}
.el-input {
  /deep/ .el-input-group__prepend {
    background-color: #fff;
  }
}
</style>
