<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-04-14 09:50:16
 * @LastEditors: 无尘
 * @LastEditTime: 2020-12-15 14:51:45
 -->
<!--
  <card-get-record  @closeGetRecord="closeGetRecord"></card-get-record>
  import cardGetRecord from '@/components/app/card/card-get-record.vue';
 -->
<template>
  <el-dialog title="领取记录" :visible.sync="dialogVisible" width="864px" :before-close="handleClose">
    <div class="table-condition flex flex-space-between m-b-20">
      <div class="table-condition-left">
        <el-input :placeholder="conditionObj.searchType == 2 ? '请输入会员手机号/卡号 ' : '请输入导购姓名/手机号/code'" maxlength="50" v-model="conditionObj.searchInput" class="w-336" @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 w-330" style="width: 330px" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="conditionObj.dateRange" @change="changeDate" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker><el-button :disabled="!tableData.length ? true : false" class="m-l-10 export-btn" type="primary" :loading="loadingBtn" @click="exportExcel">导出核销记录</el-button>
      </div>
    </div>
    <div>
      <el-table class="select-table" ref="multipleTable" v-loading="loading" :data="tableData" height="450" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
        <el-table-column label="导购信息" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.clerkName }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="导购手机号" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.clerkPhone || '--' }}</template>
        </el-table-column>
        <el-table-column prop="" label="会员信息" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.memberName }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="会员卡号" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.memberCardNo || '--' }}</template>
        </el-table-column>
        <!-- <el-table-column prop="" label="来源" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.receiveName || '--' }}</template>
        </el-table-column> -->
        <el-table-column label="领取时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="color-606266 line-18">{{ scope.row.receiveTime | timeStampToYmd }}</div>
            <div class="color-606266 line-18">{{ scope.row.receiveTime | timeStampToHms }}</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 '';
      }
    },
    coupCardId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      dialogVisible: true,
      loading: false,
      tableData: [],
      // 条件
      conditionObj: {
        searchInput: '',
        searchType: '1',
        storeGroup: [],
        dateRange: []
      },
      choiceDateCopy: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ],
        onPick: ({ maxDate, minDate }) => {
          this.choiceDateCopy = [minDate.getTime()];
          if (maxDate) {
            this.choiceDateCopy = [];
          }
        },
        disabledDate: time => {
          if (this.choiceDateCopy.length) {
            const one = 365 * 24 * 3600 * 1000;
            const minTime = this.choiceDateCopy[0] - one;
            const maxTime = this.choiceDateCopy[0] + one;
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > Date.now() - 8.64e6;
          }
          return time.getTime() > Date.now() - 8.64e6;
        }
      },
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      loadingBtn: false
    };
  },
  methods: {
    /**
     * 导出
     */
    exportExcel: _debounce(function() {
      const that = this;
      that.loadingBtn = true;
      if (!that.conditionObj.dateRange) {
        that.conditionObj.dateRange = [];
      }
      const para = {
        cardId: that.coupCardId,
        search: that.conditionObj.searchInput || '', // 搜索字段
        startDate: that.conditionObj.dateRange[0] || '',
        endDate: that.conditionObj.dateRange[1] || '',
        gicEnterpriseId: that.brandId // 品牌 id
      };
      that.postExcel(para);
    }, 300),
    postExcel(para) {
      const that = this;
      postRequest('/haoban-app-customer-web/cardCoupon/export-consume-card', para)
        .then(res => {
          let resData = res.data;
          that.loadingBtn = false;
          if (resData.errorCode == 1) {
            that
              .$confirm('核销记录正在生成中，次日可前往GIC报表中心下载', '温馨提示', {
                confirmButtonText: '立即前往',
                showCancelButton: false,
                type: 'warning',
                center: true
              })
              .then(() => {
                if (window.location.href.indexOf('gicdev') != -1) {
                  window.open('http://gicdev.demogic.com/gic-web/#/reportCenter');
                  return false;
                }
                window.open('https://hope.demogic.com/gic-web/#/reportCenter');
              })
              .catch(() => {});
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loadingBtn = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    handleClose(done) {
      const that = this;
      that.$emit('closeGetRecord');
    },
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    }, 300),
    // 搜索清除
    clearInput() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     *  选择日期
     * @param {Array} val
     */
    changeDate(val) {
      const that = this;
      if (!val) {
        that.choiceDateCopy = [];
        that.conditionObj.dateRange = [];
      }
      that.getTableList();
    },
    /**
     * 分页---页码变化
     * @param {Number} val
     */
    handleSizeChange(val) {
      const that = this;
      that.currentPage = 1;
      that.pageSize = val;
      that.getTableList();
    },

    /**
     * 分页---当前页变化
     * @param {Number} val
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      that.getTableList();
    },
    /**
     * 获取列表数据
     */
    getTableList(val) {
      const that = this;
      that.loading = true;
      let storeGroups = [];
      let filterStoreIds = [];
      let clerkIds = [];
      that.conditionObj.storeGroup.forEach(ele => {
        if (ele.type == 1) {
          clerkIds.push(ele.employeeClerkId);
        }
        if (ele.type == 2) {
          storeGroups.push(ele.groupId);
        }
        if (ele.type == 3) {
          filterStoreIds.push(ele.storeId);
        }
      });
      if (!that.conditionObj.dateRange) {
        that.conditionObj.dateRange = [];
      }
      let para = {
        coupCardId: that.coupCardId,
        searchType: that.conditionObj.searchType,
        search: that.conditionObj.searchInput || '', // 搜索字段
        groupIds: storeGroups.join(',') || '', // 门店分组, 门店
        storeIds: filterStoreIds.join(',') || '', // 门店分组,分组
        clerkIds: clerkIds.join(',') || '', //
        startDate: that.conditionObj.dateRange[0] || '',
        endDate: that.conditionObj.dateRange[1] || '',
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize, // 一页显示个数
        gicEnterpriseId: that.brandId
        // taskType: 1 //0不良评价，1话务任务
      };
      postRequest('/haoban-app-customer-web/cardCoupon/find-receive-card-page', para)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.errorCode == 1) {
            that.tableData = resData.result.list || [];
            that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.activeBrand = newData;
        that.getTableList();
      }
    },
    coupCardId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.getTableList();
      }
    }
  },
  mounted() {
    const that = this;
    that.$emit('showTab', '2');
    if (that.brandId) {
      that.getTableList();
    }
  }
};
</script>
<style lang="scss" scoped>
.m-b-20 {
  margin-bottom: 20px;
}
.p-l-18 {
  padding-left: 18px;
}
.w-330 {
  width: 330px;
}
.w-336 {
  width: 336px;
}
.w-103 {
  width: 103px;
}
.el-input {
  >>> .el-input-group__prepend {
    background-color: #fff;
  }
}
.table-condition-left {
  .el-button {
    margin-left: 10px;
  }
  .export-btn {
    padding: 7px 12px;
    height: 32px;
    vertical-align: top;
  }
}
</style>
