<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-04-14 09:50:16
 * @LastEditors: 无尘
 * @LastEditTime: 2020-06-01 14:14:06
 -->
<!--
  <card-send-record  @closeSendRecord="closeSendRecord"></card-send-record>
  import cardSendRecord from '@/components/app/card/card-send-record.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="conditionObj.searchType == 2 ? '请输入会员手机号/卡号 ' : '请输入导购姓名/手机号/code'" 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="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker>
      </div>
    </div>
    <div>
      <el-table class="select-table" ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" height="450" :style="{ width: '100%', minHeight: tableH }">
        <el-table-column label="导购信息" show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- <div class="flex nowrap">
              <el-popover placement="top-start" width="400" trigger="hover" @show="showSingleInfo(scope.row.applyId)">
                <div class="apply-info-detail">
                  <div class="flex">
                    <div class="apply-info-img flex-align-center flex-pack-center bg-82C5FF ">
                      <i v-if="!scope.row.clerkImage" class="iconfont icon-yewuduanmorentouxian"></i>
                      <img v-else :src="scope.row.clerkImage" alt="img" />
                    </div>
                    <div class="flex flex-column apply-info-right flex-space-between">
                      <div class="apply-info-name">
                        {{ scope.row.clerkName }}
                        <i :class="[scope.row.sex == 2 ? 'icon-xingbienv color-FF585C' : 'icon-xingbienan color-508CEE', 'iconfont']"></i>
                      </div>
                      <div class="apply-info-code">
                        <span class="w-80">员工代码：</span><span class="w-130">{{ scope.row.clerkCode || '--' }}</span>
                      </div>
                      <div class="apply-info-phone">
                        <span class="w-80">手机号：</span><span class="w-130">{{ scope.row.clerkPhone || '--' }}</span>
                      </div>
                      <div class="apply-info-job">
                        <span class="w-80">职位：</span><span class="w-130">{{ scope.row.positionName || '--' }}</span>
                      </div>
                      <div class="apply-info-store">
                        <span class="w-80">所属门店：</span><span class="w-130">{{ scope.row.storeName || '--' }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div slot="reference">
                  <div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic">
                    <i v-if="!scope.row.clerkImage" class="iconfont icon-yewuduanmorentouxian"></i>
                    <img v-else :src="scope.row.clerkImage" alt="img" />
                  </div>
                </div>
              </el-popover>
              <div class="flex flex-column apply-info">
                <span class="font-14 color-606266 text-ellipsis">{{ scope.row.clerkName }}</span>
                <span class="font-12 color-909399 text-ellipsis">{{ scope.row.storeName }}</span>
              </div>
            </div> -->
            {{ 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">
            <!-- <div class="flex nowrap">
              <div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic">
                <i v-if="!scope.row.memberUrl" class="iconfont icon-yewuduanmorentouxian"></i>
                <img v-else :src="scope.row.memberUrl" alt="img" />
              </div>
              <div class="flex flex-column apply-info">
                <span class="font-14 color-606266 text-ellipsis line-18">{{ scope.row.memberName }}</span>
                <span class="font-12 color-909399 text-ellipsis line-18">{{ scope.row.memberCardNo }}</span>
              </div>
            </div> -->
            {{ 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.sendTime | timeStampToYmd }}</div>
            <div class="color-606266 line-18">{{ scope.row.sendTime | 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
    };
  },
  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.currentPage = 1;
      that.pageSize = val;
      that.getTableList();
    },

    /**
     * 分页---当前页变化
     */
    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-send-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.total;
            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="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>
