<template>

  <div>


    <div style="padding:15px 0;">

      <div style="float:right;">
        <el-button type="primary" @click="get_excel_file">导出排班表</el-button>
        <el-button type="primary" @click="dialogExcelVisible = true">导入排班表</el-button>
      </div>
      <div class="schedule_list">
        班次：<span :style="'background:'+color[item.id]+'; color:#fff;'"
                 v-for="(item,index) in schedule_list">{{item.name}}</span>
        <div>
          <el-date-picker
            value-format="yyyy-MM"
            v-model="month_val"
            type="month"
            format="yyyy-MM"
            placeholder="选择月份">
          </el-date-picker>
        </div>

      </div>
      <div style="clear:both;"></div>

    </div>

    <table id="schedule_table_header" style="width:100%;" class="schedule_table" cellspacing="0" cellpadding="0" @mouseleave="schedule_set_show=false">
      <tr>
        <td width="120" style="width:120px;">姓名</td>
        <td :class="{work_date_not:schedule.week=='日' || schedule.week=='六'}" width="50"
            :style="'position: relative; width:'+td_width+'px;'" @mouseenter="hover_head_index = schedule_index"
            @mouseleave="hover_head_index=-1" @contextmenu.prevent="show_schedule_set"
            v-for="(schedule, schedule_index) in table_header_list">
          <div style="font-size:14px;">{{schedule.date}}</div>
          <div style="font-size:12px;overflow: hidden;">{{schedule.week}}</div>


          <el-card class="box-card" v-if="schedule_set_show && schedule_index == hover_head_index"
                   style="position: absolute; width:200px; z-index:6; right:0;">
            <el-tabs v-model="activeName">
              <el-tab-pane label="选择班次" name="first">

                    <span @click="set_schedule_one(item, -1, schedule_index)"
                          :style="'background:'+color[item.id]+'; cursor: pointer; color:#fff; display:block; margin:15px; padding:5px;'"
                          v-for="(item,index1) in schedule_list">{{item.name}}</span>


                <span @click="set_schedule_one({id:0, name:'休息'}, -1, schedule_index)"
                      style="background:#eee; cursor: pointer; color:#666; display:block; margin:15px; padding:5px;'">休息</span>

              </el-tab-pane>
              <el-tab-pane label="选择排班" name="second" v-if="false">
                <div style="padding:15px 5px; text-align: left;"
                     @click="set_schedule_list(work_date_list, -1, schedule_index)">
                  <div style="display: inline;" v-for="(item,index) in work_date_list">
                    <span v-if="index > 0" style="padding:0px">-></span> <span :class="{work_not: item.id == 0}"
                                                                               :style="'background:'+color[item.id]+'; cursor: pointer; color:#fff; display:inline-block; padding:2px 5px; margin-bottom:5px;'"
                  >{{item.name}}</span>
                  </div>
                </div>

              </el-tab-pane>
            </el-tabs>
          </el-card>


        </td>
      </tr>
    </table>
    <el-scrollbar
      v-loading="loading"
      wrap-class="column-wrapper scrollable-items-container"
      :native="false"
      style="height: 500px;"
    >

      <div style="">


        <table class="schedule_table" cellspacing="0" cellpadding="0" @mouseleave="schedule_set_show=false">

          <tr v-for="(row,index) in tableData">
            <td width="120" style="position: relative; width:120px;" @contextmenu.prevent="show_schedule_set"
                @mouseleave="schedule_set_show=false;hover_name_index=-1" @mouseenter="hover_name_index=index">
              {{row.name}}


              <el-card class="box-card" v-if="schedule_set_show && index == hover_name_index"
                       style="position: absolute; width:200px; left:0; z-index:2;">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="选择班次" name="first">

                    <span @click="set_schedule_one(item, index, -1)"
                          :style="'background:'+color[item.id]+'; cursor: pointer; color:#fff; display:block; margin:15px; padding:5px;'"
                          v-for="(item,index1) in schedule_list">{{item.name}}</span>


                    <span @click="set_schedule_one({id:0, name:'休息'}, index, -1)"
                          style="background:#eee; cursor: pointer; color:#666; display:block; margin:15px; padding:5px;'">休息</span>

                  </el-tab-pane>
                  <el-tab-pane label="选择排班" name="second" v-if="false">
                    <div style="padding:15px 5px; text-align: left;"
                         @click="set_schedule_list(work_date_list, index, -1)">
                      <div style="display: inline;" v-for="(item,index) in work_date_list">
                        <span v-if="index > 0" style="padding:0px">-></span> <span :class="{work_not: item.id == 0}"
                                                                                   :style="'background:'+color[item.id]+'; cursor: pointer; color:#fff; display:inline-block; padding:2px 5px; margin-bottom:5px;'"
                      >{{item.name}}</span>
                      </div>
                    </div>

                  </el-tab-pane>
                </el-tabs>
              </el-card>

            </td>
            <td :data-count-key="'class-count-'+schedule.date+'-sid-'+schedule.id" style="position: relative;"
                @contextmenu.prevent="show_schedule_set" width="50" @mouseleave="table_hover=[-1,-1]"
                @mouseenter="td_hover(index,schedule_index)"
                :style="'width:'+td_width+'px;background:'+color[schedule.id]+';color:#fff;'"
                :class="{schedule_none:schedule.id==0, td_hover:table_hover[0] == index || schedule_index == table_hover[1]}"
                v-for="(schedule, schedule_index) in row.schedule_list">{{schedule.name}}

              <el-card class="box-card"
                       v-if="schedule_set_show && table_hover[0] == index && schedule_index == table_hover[1]"
                       style="position: absolute; width:200px; right:0; z-index:2;">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="选择班次" name="first">

                    <span @click="set_schedule_one(item, index, schedule_index)"
                          :style="'background:'+color[item.id]+'; cursor: pointer; color:#fff; display:block; margin:15px; padding:5px;'"
                          v-for="(item,index1) in schedule_list">{{item.name}}</span>


                    <span @click="set_schedule_one({id:0, name:'休息'}, index, schedule_index)"
                          style="background:#eee; cursor: pointer; color:#666; display:block; margin:15px; padding:5px;'">休息</span>

                  </el-tab-pane>
                  <el-tab-pane label="选择排班" name="second">
                    <div style="padding:15px 5px; text-align: left;"
                         @click="set_schedule_list(work_date_list, index, schedule_index)">
                      <div style="display: inline;" v-for="(item,index) in work_date_list">
                        <span v-if="index > 0" style="padding:0px">-></span> <span :class="{work_not: item.id == 0}"
                                                                                   :style="'background:'+color[item.id]+'; cursor: pointer; color:#fff; display:inline-block; padding:2px 5px; margin-bottom:5px;'"
                      >{{item.name}}</span>
                      </div>
                    </div>

                  </el-tab-pane>
                </el-tabs>
              </el-card>

            </td>
          </tr>
        </table>


        <div style="height: 46px;"></div>
        <table class="schedule_table" cellspacing="0" cellpadding="0">
          <tr>
            <td width="220">班次</td>
            <td width="80" v-for="(item, index) in table_header_list">
              <div>{{item.date}}</div>
              <div style="font-size:12px;">{{item.week}}</div>
            </td>
          </tr>
          <tr v-for="(item,index) in schedule_count">
            <td><span :style="'background:'+color[item.id]+'; color:#fff; padding:2px 5px;'">{{item.name}}</span></td>
            <td v-for="(schedule, schedule_index) in item.count_list">{{schedule.num}}
            </td>
          </tr>
        </table>


      </div>

    </el-scrollbar>


    <el-dialog
      width="600px"
      title="Excel管理"
      append-to-body
      :visible.sync="dialogExcelVisible"
      :close-on-click-modal="false"
    >
      <div style="padding:0 50px;">
        <div class="align-center" style="margin-bottom:20px;">
          <p>温馨提示：</p>
          <p>1、导入之前请点击“下载模板”按钮下载模板文件；</p>
          <p>2、填写排班信息到Excel电子表中；</p>
          <p>3、点击“Excel文件导入”上传填写好的电子表；</p>
          <p>4、支持上传大小500KB以内的Excel文件。</p>
          <p></p>
        </div>

        <div class="align-center" style="margin-bottom:20px; float:left; margin-left:10px;">
          <el-button type="primary" @click="downloadTemplate" plain>下载模板</el-button>
        </div>
        <div class="align-center" style="margin-bottom:20px; float:left; margin-left:10px;">
          <el-upload
            :on-success="uploadFileEnd"
            :headers="{'X-Token':access_token}"
            :data="{group_id: group_id}"
            :action="serverdomain+'/integral.php/attendance_schedule_excel/excel_upload'"
            :show-file-list="false"
          >
            <el-button type="primary">Excel导入</el-button>
          </el-upload>
        </div>


        <div style="clear:both;"></div>
      </div>
    </el-dialog>

  </div>


</template>

<script>
  import moment from 'moment'
  import qs from 'qs'
  import { getToken } from '@/utils/auth'
  export default {

    name: "attendance_duty",
    watch: {
      month_val(n, o) {
        this.get_group_info(this.group_id)
      },
      table_hover(n, o) {
        this.schedule_set_show = false
        //this.hover_name_index = -1
        //this.hover_head_index = -1
      }
    },
    data() {
      return {
        td_width:0,
        access_token:getToken(),
        dialogExcelVisible:false,
        save_duty_loading: false,
        table_header_list: [],
        hover_head_index: -1,
        hover_name_index: -1,
        work_date_list: [],
        schedule_set_show: false,
        activeName: 'first',
        loading: false,
        group_id: 0,
        month_val: moment().format('YYYY-MM'),
        color: [],
        table_hover: [-1, -1],
        schedule_list: [],

        schedule_count: [],


        tableData: [
          {
            employee_id: 113,
            employee_name: '张三',
            schedule_list: [],

          },
        ]
      }
    },
    created() {
      //this.get_group_info()
    },
    methods: {

      uploadFileEnd(response, file, fileList){
        this.get_group_info(this.group_id)
        if(response.code == 1){
          this.$message.success(response.msg)
        }else{
          this.$message.error(response.msg)
        }
      },
      // 下载模板
      downloadTemplate() {
        let self = this
        this.$http('post','/integral.php/attendance_schedule_excel/get_access_token',).then((res) => {
          console.log(res)
          if(res.data.code == 1){
            const url = self.serverdomain + '/integral.php/attendance_schedule_excel/schedule_model?date='+this.month_val+'&site_id='+self.$store.getters.user_info.site_id+'&group_id='+self.group_id+'&token='+res.data.data.token
            window.open(url, '_blank')
          }
        })




      },
      get_excel_file() {


        let self = this
        this.$http('post','/integral.php/attendance_schedule_excel/get_access_token',).then((res) => {
          console.log(res)
          if(res.data.code == 1){
            const url = self.serverdomain + '/integral.php/attendance_schedule_excel/schedule_generate?date='+this.month_val+'&site_id='+self.$store.getters.user_info.site_id+'&group_id='+self.group_id+'&token='+res.data.data.token
            window.open(url, '_blank')
          }
        })

      },
      td_hover(i, o) {
        this.table_hover = [i, o]
      },
      set_schedule_list(item, row, col) {
        let j = 0
        let self = this
        let l = 0
        if (row >= 0 && col >= 0) {
          for (let i in this.tableData[row].schedule_list) {
            if (i >= col) {
              l++
              this.tableData[row].schedule_list[i].name = item[j].name
              this.tableData[row].schedule_list[i].id = item[j].id
              if (j == item.length - 1) {
                j = 0
              } else {
                j++
              }

            }
          }

        }
        this.schedule_set_show = false
        this.table_hover = [-1, -1]
        self.$nextTick(() => {
          self.set_schedule_count()

        })
        this.hover_name_index = -1
        this.hover_head_index = -1
      },


      send_schedule() {
        let self = this
        let data = []
        for (let i in this.tableData) {
          for (let k in this.tableData[i].schedule_list) {
            data.push({
              setting_id: this.tableData[i].schedule_list[k].id * 1,
              employee_id: this.tableData[i].employee_id * 1,
              date: this.table_header_list[k].full_date
            })
          }
        }
        this.$http('post','/integral.php/attendance_group/update_attendance_basetime',qs.stringify({group_id: this.group_id, data: JSON.stringify(data)}),
          // headers: {
          //   'Content-Type': 'application/x-www-form-urlencoded'
          // }
          ).then((res) => {
          if (res.status == 200) {
            self.$emit('saved')
            if (res.data.code == 1) {
              self.$message.success(res.data.msg)
            } else {
              self.$message.error(res.data.msg)
            }

          } else {

          }
        })
      },


      set_schedule_one(item, row, col) {
        let self = this
        if (row >= 0 && col >= 0) {
          this.tableData[row].schedule_list[col].name = item.name
          this.tableData[row].schedule_list[col].id = item.id
        }
        if (row == -1 && col >= 0) {
          for (let i in this.tableData) {
            this.tableData[i].schedule_list[col].name = item.name
            this.tableData[i].schedule_list[col].id = item.id
          }
        }
        if (row >= 0 && col == -1) {
          for (let i in this.tableData[row].schedule_list) {
            this.tableData[row].schedule_list[i].name = item.name
            this.tableData[row].schedule_list[i].id = item.id
          }
        }
        this.schedule_set_show = false
        this.table_hover = [-1, -1]
        self.$nextTick(() => {
          self.set_schedule_count()
        })
        this.hover_name_index = -1
        this.hover_head_index = -1
        //this.activeName = 'first'
      },
      show_schedule_set() {
        this.activeName = 'first'
        this.schedule_set_show = true
        //this.hover_name_index = -1
        //this.hover_head_index = -1

      },
      set_schedule_count() {
        let count_list = []
        this.schedule_count = []
        for (let i in this.schedule_list) {  // attendance_setting_ids
          count_list = []
          for (let k in this.table_header_list) { // table_header
            count_list.push({num: document.querySelectorAll('[data-count-key=' + 'class-count-' + this.table_header_list[k]['date'] + '-sid-' + this.schedule_list[i].id + ']').length})
          }
          this.schedule_count.push({
            id: this.schedule_list[i].id,
            name: this.schedule_list[i].name,
            count_list: count_list
          })
        }
      },
      get_group_info(id) {
        let self = this
        self.group_id = id
        self.loading = true
        this.$http('get','/integral.php/attendance_group/get_attendance_group',{id: id, time: self.month_val}).then((res) => {

          if (res.status == 200) {
            //console.log(res.data)
            self.schedule_list = res.data.data.attendance_setting_ids


            self.work_date_list = res.data.data.work_date
            let color = [
              '#1E90FF',
              '#FF69B4',
              '#F08080',
              '#8470FF',
              '#3CB371'
            ]
            for (let i in self.schedule_list) {
              self.color[self.schedule_list[i].id] = color[i]
            }
            self.color[0] = '#ffffff';
            console.log(self.color)
            self.$http('get','/integral.php/attendance_group/get_attendance_basetime',{date: self.month_val, group_id: id}).then((res) => {
              self.loading = false
              self.tableData = res.data.data.table_data
              for (let i in self.tableData) {
                for (let j in self.tableData[i].schedule_list) {
                  self.tableData[i].schedule_list[j].id = self.tableData[i].schedule_list[j].att_setting_id
                  self.tableData[i].schedule_list[j].name = self.tableData[i].schedule_list[j].att_setting_name
                }
              }
              
              self.table_header_list = res.data.data.table_header
              self.$nextTick(() => {
                self.set_schedule_count()
                self.td_width = (document.getElementById('schedule_table_header').offsetWidth - 120) / self.table_header_list.length
                console.log(document.getElementById('schedule_table_header').offsetWidth, self.td_width, self.table_header_list.length)
              })

            })
          } else {
            self.$message.error('网络错误')
          }
        })
      }
    }
  }
</script>

<style scoped>
  .schedule_list span {
    display: inline-block;
    margin: 5px;
    background-color: #ccc;
    padding: 2px 5px;
    border-radius: 3px;
  }

  .schedule_table {
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  .schedule_table td {
    border-right: 1px solid #ccc;
    cursor: default;
    border-top: 1px solid #ccc;
    text-align: center;
    padding: 0;
    height: 50px;
    width:46px;
  }

  .schedule_none {
    color: #666 !important;
  }

  .schedule_table td:hover {
    background-color: #8891f9 !important;
    color: #fff;
  }

  .td_hover {
    background-color: #c3d5f9 !important;
    color: #fff !important;
  }

  .work_not {
    color: #666 !important;
    background-color: #ccc !important;
  }

  .work_date_not {
    color: #f00;
  }
</style>
