<template>
  <div>
    <el-row>
      <div class="leftBox">
        <el-input class="w260 mr10" placeholder="请输入门店名称/code" v-model="pageParam.inFields.storeSelect" @keyup.native="value => toInput(value, searchInput)" prefix-icon="el-icon-search" clearable @clear="getChartList"></el-input>
        <el-input class="w260 mr10" placeholder="请输入导购名称/code" v-model="pageParam.inFields.clerkSelect" @keyup.native="value => toInput(value, searchInput)" prefix-icon="el-icon-search" clearable @clear="getChartList"></el-input>
      </div>

      <div class="rightBox">
        <ul class="datebox" v-for="(lis, index) in dateLis" :key="lis.key">
          <li :class="dateKey == index ? 'activeClass' : 'noActive'" class="dateLisBox" @click="btnChange(index)">{{ lis.value }}</li>
        </ul>
        <el-date-picker class="w256" v-model="dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd" :format="[2, 3, 4].includes(dateKey) ? 'yyyy-MM' : 'yyyy-MM-dd'" :picker-options="pickerOptions()" @change="onDateChange" :clearable="false"> </el-date-picker>
      </div>
    </el-row>
    <el-table class="mt18" :data="tableData" @sort-change="sortChange">
      <el-table-column label="导购信息">
        <template slot-scope="{ row }">
          <p class="overflow-ellipsis" :title="row.clerkName">{{ row.clerkName }}</p>
          <p>{{ row.clerkCode }}</p>
        </template>
      </el-table-column>
      <el-table-column label="导购所属门店">
        <template slot-scope="{ row }">
          <p class="overflow-ellipsis" :title="row.storeName">{{ row.storeName ? row.storeName : '--' }}</p>
          <p>{{ row.storeCode ? row.storeCode : '--' }}</p>
        </template>
      </el-table-column>
      <el-table-column label="企微号">
        <template slot-scope="{ row }">
          <p class="overflow-ellipsis" :title="row.staffName">{{ row.staffName }}</p>
          <!-- <p>{{ row.staffCode }}</p> -->
        </template>
      </el-table-column>
      <el-table-column label="新增总人数" prop="addNumT" sortable></el-table-column>
      <el-table-column label="今日新增总人数" prop="addNum" sortable></el-table-column>
      <!-- <el-table-column label="今日流失人数" prop="toadyLess" sortable></el-table-column>
      <el-table-column label="流失总人数" prop="lessTotal" sortable></el-table-column> -->
      <el-table-column label="今日已达上限" prop="overFlag">
        <template slot-scope="{ row }">
          <!-- <p>{{ row.overFlag == 1 ? '是' : '否' }}</p> -->
          <p>{{ row.overFlag }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="lookRecords(row)">查看记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <dm-pagination v-if="tableData && tableData.length > 0" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParam.pageNo" :page-sizes="[20, 40, 60, 80]" :page-size="pageParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </dm-pagination>
  </div>
</template>

<script>
import { detailClerkList } from '@/api/actCode.js';
import { _debounce } from '@/common/js/public';
import mixin from '../actCodeManage/components/mixin';
export default {
  name: 'DateDetail',
  props: {
    id: {
      type: String,
      default: ''
    },
    api: {
      type: Function,
      default: detailClerkList
    },
    typeT: {
      type: String,
      default: 'code'
    }
  },
  mixins: [mixin],
  data() {
    return {
      dateKey: 0,
      dateLis: [
        { key: 1, value: '近7天' },
        { key: 2, value: '近30天' },
        { key: 3, value: '近三个月' },
        { key: 4, value: '近半年' }
      ],
      tableData: [],
      pageParam: {
        inFields: {
          startTime: '',
          endTime: '',
          storeSelect: '',
          clerkSelect: '',
          orderByField: 'addNum desc'
        },
        pageNo: 1,
        pageSize: 20
      },
      dateDefault: [],
      totalCount: 0,
      sortColumn: '',
      sortType: '',
      pickerOptions() {
        let pickerMinDate;
        return {
          onPick(obj) {
            pickerMinDate = obj.minDate;
          },
          disabledDate(time) {
            let start = new Date();
            start = new Date(`${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`);
            let start2 = new Date(pickerMinDate);
            let end = new Date();
            end = new Date(`${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate() + 1}`);
            let end2 = new Date(pickerMinDate);
            if (pickerMinDate) {
              start = start.setFullYear(start.getFullYear() - 2);
              start2 = start2.setMonth(start2.getMonth() - 6);
              start = start > start2 ? start : start2;
              end2 = end2.setMonth(end2.getMonth() + 6);
              end = end.getTime() > end2 ? end2 : end.getTime();
            } else {
              start = start.setFullYear(start.getFullYear() - 2);
              end = end.getTime();
            }
            return time.getTime() <= start || time.getTime() >= end;
          }
        };
      }
    };
  },
  created() {
    // 默认显示近七天
    this.btnChange(0);
  },
  methods: {
    toInput: _debounce(function(e, value) {
      this.getChartList();
    }, 500),
    // getDateRange(setEndDate) {
    //   const start = new Date();
    //   let end = new Date();
    //   end = setEndDate(end);
    //   function getDate(date) {
    //     const result = [];
    //     result.push(date.getFullYear());
    //     result.push((date.getMonth() + 1).toString().padStart(2, '0'));
    //     result.push(
    //       date
    //         .getDate()
    //         .toString()
    //         .padStart(2, '0')
    //     );
    //     return result.join('-');
    //   }
    //   // yyyy-MM-dd
    //   return [getDate(start), getDate(end)];
    // },
    // btnChange(index) {
    //   //把index值赋给active，点击改变样式
    //   this.dateKey = index;
    //   this.dateDefault = [];
    //   let setDate;
    //   if (index == 0) {
    //     // 近7天
    //     setDate = endDate => {
    //       endDate.setDate(endDate.getDate() - 6);
    //       return new Date(endDate);
    //     };
    //   } else if (index == 1) {
    //     // 近30天
    //     setDate = endDate => {
    //       endDate.setDate(endDate.getDate() - 29);
    //       return new Date(endDate);
    //     };
    //   } else if (index == 2) {
    //     // 近三个月
    //     setDate = endDate => {
    //       endDate.setMonth(endDate.getMonth() - 3);
    //       endDate.setDate(endDate.getDate() + 1);
    //       return new Date(endDate);
    //     };
    //   } else if (index == 3) {
    //     // 近半年
    //     setDate = endDate => {
    //       endDate.setMonth(endDate.getMonth() - 6);
    //       endDate.setDate(endDate.getDate() + 1);
    //       return new Date(endDate);
    //     };
    //   }
    //   const [start, end] = this.getDateRange(setDate);
    //   this.dateDefault.push(end);
    //   this.dateDefault.push(start);
    //   this.getChartList();
    // },
    onDateChange() {
      this.dateKey = -1;
      if (this.dateDefault.length) this.getChartList();
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.pageParam.pageNo = val;
      sessionStorage.setItem('pageNo', val);
    },
    // 页码
    handleSizeChange(val) {
      this.pageParam.pageNo = 1;
      this.pageParam.pageSize = val;
      this.getChartList();
    },
    // 排序
    sortChange(column) {
      const that = this;
      that.sortColumn = column.prop;
      that.sortType = column.order == 'ascending' ? 'asc' : 'desc';
      this.pageParam.inFields.orderByField = `${that.sortColumn} ${that.sortType}`;
      that.getChartList();
    },
    // 列表数据
    async getChartList() {
      const paras = JSON.parse(JSON.stringify(this.pageParam));
      paras.inFields.startTime = this.dateDefault ? this.dateDefault[0] + ' 00:00:00' : '';
      paras.inFields.endTime = this.dateDefault ? this.dateDefault[1] + ' 23:59:59' : '';
      if (this.id && this.typeT == 'code') {
        paras.inFields.hmId = this.id;
      } else if (this.id && this.typeT == 'link') {
        paras.inFields.linkId = this.id;
        paras.inFields.linkSelect1 = paras.inFields.storeSelect;
        paras.inFields.linkSelect2 = paras.inFields.clerkSelect;
        delete paras.inFields.storeSelect;
        delete paras.inFields.clerkSelect;
      }

      await this.api(paras).then(res => {
        if (res.data.code == 0) {
          this.tableData = res.data.result.result || [];
          this.totalCount = res.data.result.totalCount;
        } else {
          return this.$message(res.data.message);
        }
      });
    },
    lookRecords(row) {
      const { clerkId, linkId, hmId } = row;
      const startTime = this.dateDefault && this.dateDefault.length ? this.dateDefault[0] + ' 00:00:00' : undefined;
      const endTime = this.dateDefault && this.dateDefault.length ? this.dateDefault[1] + ' 23:59:59' : undefined;
      let query = { linkId, clerkId, hmId };
      startTime ? (query.startTime = startTime) : '';
      endTime ? (query.endTime = endTime) : '';
      if (linkId) {
        this.$router.push({ path: '/attLinkRecord', query: query });
      } else {
        this.$router.push({ path: '/actCodeRecord', query: query });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.activeClass {
  color: #2f54eb;
}
.noActive {
  color: #303133;
}

.w260 {
  width: 260px;
}
.w256 {
  width: 256px;
}
.mr10 {
  margin-right: 10px;
}

.mt18 {
  margin-top: 18px;
}
.leftBox {
  float: left;
}
.rightBox {
  float: right;
  line-height: 32px;
  .datebox {
    display: inline-block;
    .dateLisBox {
      font-size: 14px;
      margin-right: 24px;
      cursor: pointer;
    }
  }
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .info-content {
    color: #2f54eb;
    font-size: 14px;
  }
  .info-icon {
    margin-right: 8px;
  }
}
.cur-po {
  cursor: pointer;
}
.el-button--text {
  color: #2f54eb;
}
</style>
