<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-09-18 15:25:12
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-11 19:03:00
 -->

<template>
  <div class="app-detail-wrap">
    <div class="work-time border-box">
      <common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
      <div class="work-time-content border-box">
        <el-table class="select-table" border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: calc(100% - 3px);">
          <el-table-column prop="" show-overflow-tooltip fixed :resizable="false">
            <template slot="header" slot-scope="scope">
              姓名
            </template>
            <template slot-scope="scope">
              <div class="row-username">
                <el-popover placement="bottom" width="231" trigger="click">
                  <!-- 设置该员工当月所有班次 -->

                  <div class="tool-tip-body" slot="reference">
                    <el-tooltip class="item" effect="dark" :content="scope.row.user.name" placement="top-start">
                      <p>{{ scope.row.user.name }}</p>
                    </el-tooltip>
                  </div>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <template v-for="(item, index) in dates">
            <el-table-column prop="" show-overflow-tooltip :key="index + 'thead'" :resizable="false">
              <template slot="header" slot-scope="scope">
                {{ item.timeStamp | filterDay }} <br />
                {{ weekData[item.dayOfWeek] }}
              </template>
              <template slot-scope="scope">
                <div class="day-work">
                  <el-popover placement="bottom" width="231" trigger="click">
                    <!-- 当前员工当天排版设置 -->
                    <people-day-class :dates="dates" :itemSchedule="scope.row" :workDate="item.timeStamp" :classData="classes" :cycleData="cycleData" @refreshData="refreshData"></people-day-class>
                    <div class="tool-tip-body" slot="reference">
                      <div class="day-work-cell schedule_del_class">
                        <!-- {{ scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp ? scope.row.schedules[index].serial + '6' : '' }} -->
                        <!-- <el-tooltip v-if="scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp" class="item" effect="dark" :content="scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp ? scope.row.schedules[index].serial : ''" placement="top-start">
                          <div class="day-work-cell_text">{{ scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp ? scope.row.schedules[index].serial : '清空' }}</div>
                          <div v-if="scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp && scope.row.schedules[index].isRest" class="day-work-cell_icon"></div>
                        </el-tooltip> -->
                        <!-- <div v-if="!scope.row.schedules || !scope.row.schedules[index]"> -->
                        <div class="day-work-cell_text">{{ scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp ? scope.row.schedules[index].serial : '清空' }}</div>
                        <div v-if="scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp && scope.row.schedules[index].isRest" class="day-work-cell_icon"></div>
                        <!-- </div> -->
                      </div>
                    </div>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
          <el-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"> </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { postRequest, postExcel } from '@/api/api';
// import errMsg from '@/common/js/error';
// import { _debounce } from '@/common/js/public';

import peopleDayClass from '@/components/app/dailyAttendance/people-day-class.vue';
export default {
  name: 'workTimeManage',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    },
    activeGroupId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  components: {
    peopleDayClass
  },
  filters: {
    filterDay(timeStamp) {
      return new Date(timeStamp).getDate();
    }
  },
  data() {
    return {
      activeBrand: this.brandId, // 商户(品牌) id
      activeGroup: this.activeGroupId, // 商户(品牌) groupId
      enterpriseId: JSON.parse(localStorage.getItem('userInfo')).enterpriseId,
      activeId: '2',
      topMenuData: [
        {
          id: '1',
          name: '在线沟通设置',
          path: `/onlineChatSet?appIcon=${this.$route.query.appIcon}&activeTab=${this.$route.query.activeTab}`
        },
        {
          id: '2',
          name: this.$route.query.activeTab == 3 ? '图文发送记录' : this.$route.query.tabType == 1 ? '微商城商品发送记录' : this.$route.query.tabType == 2 ? '积分商城商品发送记录' : ''
        }
      ],
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      // 排班周期
      cycleData: [
        {
          cycleName: '555555',
          id: 287955018,
          isValid: true,
          itemList: [{ classId: 468090517, className: '3', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }]
        }
      ],
      // 班次
      classes: [
        {
          absentTime: 100,
          id: 460445486,
          isOffDutyFreeCheck: false,
          isRestTimeOpen: false,
          permitLateMinutes: 30,
          sections: [
            {
              end: { across: 0, time: '12:00' },
              start: { across: 0, time: '09:00' }
            },
            {
              end: { across: 0, time: '18:00' },
              start: { across: 0, time: '14:00' }
            }
          ],
          serial: '2',
          seriousLateTime: 51,
          workTime: 420
        },
        {
          absentTime: 38,
          id: 468090517,
          isOffDutyFreeCheck: true,
          isRestTimeOpen: false,
          permitLateMinutes: 30,
          sections: [{ end: { across: 0, time: '11:00' }, start: { across: 0, time: '09:00' } }, { end: { across: 0, time: '15:00' }, start: { across: 0, time: '12:00' } }, { end: { across: 0, time: '18:00' }, start: { across: 0, time: '16:00' } }],
          serial: '3',
          seriousLateTime: 34,
          workTime: 420
        },
        {
          absentTime: -1,
          id: 468770499,
          isOffDutyFreeCheck: false,
          isRestTimeOpen: false,
          permitLateMinutes: -1,
          sections: [{ end: { across: 0, time: '18:00' }, start: { across: 0, time: '09:00' } }],
          serial: '默认班次',
          seriousLateTime: -1,
          workTime: 540
        }
      ],
      weekData: ['日', '一', '二', '三', '四', '五', '六'],
      // 日期
      dates: [
        {
          dayOfWeek: 0,
          timeStamp: 1575129600000
        },
        {
          dayOfWeek: 1,
          timeStamp: 1575216000000
        },
        {
          dayOfWeek: 2,
          timeStamp: 1575302400000
        },
        {
          dayOfWeek: 3,
          timeStamp: 1575388800000
        },
        {
          dayOfWeek: 4,
          timeStamp: 1575475200000
        },
        {
          dayOfWeek: 5,
          timeStamp: 1575561600000
        },
        {
          dayOfWeek: 6,
          timeStamp: 1575648000000
        },
        { dayOfWeek: 0, timeStamp: 1575734400000 },
        { dayOfWeek: 1, timeStamp: 1575820800000 },
        { dayOfWeek: 2, timeStamp: 1575907200000 },
        { dayOfWeek: 3, timeStamp: 1575993600000 },
        { dayOfWeek: 4, timeStamp: 1576080000000 },
        { dayOfWeek: 5, timeStamp: 1576166400000 },
        { dayOfWeek: 6, timeStamp: 1576252800000 },
        { dayOfWeek: 0, timeStamp: 1576339200000 },
        { dayOfWeek: 1, timeStamp: 1576425600000 },
        { dayOfWeek: 2, timeStamp: 1576512000000 },
        { dayOfWeek: 3, timeStamp: 1576598400000 },
        { dayOfWeek: 4, timeStamp: 1576684800000 },
        { dayOfWeek: 5, timeStamp: 1576771200000 },
        { dayOfWeek: 6, timeStamp: 1576857600000 },
        { dayOfWeek: 0, timeStamp: 1576944000000 },
        { dayOfWeek: 1, timeStamp: 1577030400000 },
        { dayOfWeek: 2, timeStamp: 1577116800000 },
        { dayOfWeek: 3, timeStamp: 1577203200000 },
        { dayOfWeek: 4, timeStamp: 1577289600000 },
        { dayOfWeek: 5, timeStamp: 1577376000000 },
        { dayOfWeek: 6, timeStamp: 1577462400000 },
        { dayOfWeek: 0, timeStamp: 1577548800000 },
        { dayOfWeek: 1, timeStamp: 1577635200000 },
        { dayOfWeek: 2, timeStamp: 1577721600000 }
      ],
      // 表格数据必须要有，不能空，获取数据的时候就要处理
      tableData: [
        {
          user: {
            deptId: -1,
            deptName: 'web后台',
            encUid: '%40kgDOAtabQg',
            name: '朱瑞泽',
            uid: 47618882,
            userId: '016858095226338128'
          },
          schedules: [
            {
              classes: {
                id: 468090517,
                serial: '3'
              },
              serial: '3',
              isRest: false,
              workDate: 1575129600000
            },
            {
              classes: {
                id: 468770499,
                serial: '默认班次'
              },
              serial: '默认班次',
              isRest: false,
              workDate: 1575216000000
            },
            {
              classes: {
                id: 468090517,
                serial: '3'
              },
              serial: '3',
              isRest: false,
              workDate: 1575302400000
            },
            {
              classes: {
                id: 460445486,
                serial: '2'
              },
              serial: '2',
              isRest: false,
              workDate: 1575388800000
            }
          ]
        },
        {
          user: {
            avatar: 'https://static.dingtalk.com/media/lADPBbCc1hrq6JDNAjDNAuw_748_560.jpg',
            deptId: -1,
            deptName: 'web后台',
            encUid: '%40kgDOEHQqOA',
            name: '黄芝文',
            uid: 276048440,
            userId: '113456291040121422'
          },
          schedules: [
            {
              classes: {
                id: 468090517,
                serial: '3'
              },
              serial: '3',
              isRest: false,
              workDate: 1575129600000
            }
          ]
        }
      ]
    };
  },
  methods: {
    /**
     * 刷新数据
     */
    // refreshData() {},
    /**
     * 获取列表数据
     */
    getTableList(val) {
      // const that = this;
      /*  let para = {
        enterpriseId: that.enterpriseId,
        relatedId: that.$route.query.relatedId
        // taskType: 1 //0不良评价，1话务任务
      };
      postRequest('/haoban-app-member-web/customer/send_message_log', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.tableData = resData.result.list || [];
            that.total = resData.result.total;
            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();
      }
    },
    activeGroupId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.activeGroup = newData;
      }
    }
  },
  mounted() {
    const that = this;
    that.$emit('showTab', '2');
    if (that.brandId) {
      that.getTableList();
    }
  }
};
</script>
<style type="text/less" lang="less" scoped>
.schedule_del_class {
  color: #fff;
}
.work-time {
  width: 100%;
  .work-time-content {
    padding: 20px;

    .row-username {
      white-space: nowrap;
      position: relative;
      cursor: pointer;
      border: 0;
      line-height: 35px;
      text-align: center;
      p {
        line-height: 35px;
        height: 35px;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .day-work {
      .day-work-cell {
        cursor: pointer;
        border: 0;
        text-align: center;
        width: 100%;
        height: 35px;
        &.day-tag-blue {
          background: #5e90ff;
          border-color: #5e90ff;
          color: #fff;
        }
        &.day-tag-red {
          background: #fb6370;
          border-color: #fb6370;
          color: #fff;
        }
        &.day-tag-purple {
          background: #7e6bd4;
          border-color: #7e6bd4;
          color: #fff;
        }
        &.day-tag-orange {
          background: #ff943e;
          border-color: #ff943e;
          color: #fff;
        }
        &.day-tag-green {
          background: #15bc83;
          border-color: #15bc83;
          color: #fff;
        }
        &.day-tag-pink {
          background: #ed4dae;
          border-color: #ed4dae;
          color: #fff;
        }
        &.day-tag-grey {
          background: #f6f6f6;
          border-color: #f6f6f6;
          color: #989898;
        }
        .day-work-cell_text {
          line-height: 35px;
        }
        .day-work-cell_icon {
          position: absolute;
          top: 0;
          right: 0;
          border-top: 5px solid red;
          border-left: 5px solid transparent;
        }
      }
    }
  }
}
</style>
