<template>
  <div class="app-container">
    <el-card class="topCard">
      <el-row>
        <el-date-picker
          v-model="monthValue"
          :clearable="false"
          class="elDataPicker"
          type="month"
          size="small"
          style="width:150px;"
          @change="changeMonth"
        />
        <el-button type="distribution" size="small" icon="el-icon-circle-plus" style="margin-top: 10px">保存设置</el-button>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-table
            ref="multipleTable"
            :data="tableData"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            class="main"
            tooltip-effect="dark"
            height="1090px"
            style="width: 100%;"
            border
            size="mini"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="45" align="center"/>
            <el-table-column align="center" width="70" label="工位号">
              <template slot-scope="scope">
                {{ scope.row.工位号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工序名称">
              <template slot-scope="scope">
                {{ scope.row.工序名称 }}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="20">
          <div style="margin-left: 10px">
            <el-calendar v-if="loading" v-model="value">
              <div
                slot="dateCell"
                slot-scope="{data}"
                @click="viewDayWork(data)">
                <p style="margin: 0!important;margin-left: 42%!important;">
                  <span>{{ data.day.split('-').slice(1).join('-') }}</span>
                  <!--              <span>{{ data.day }}</span>-->
                </p>
                <div style="margin-left: 20%;margin-top: 5px">
                  <el-checkbox v-model="dataC[data.day]['banCheck']" @change="selectBox(dataC[data.day])">班</el-checkbox>
                  <el-time-picker v-model="dataC[data.day]['banTime']" :key="dataC[data.day]['banTime']" :clearable="false" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}" value-format="HH:mm:ss" style="width: 80px;height: 20px" @blur="selectTime(dataC[data.day]['banTime'], data.day)"/>
                </div>
                <div style="margin-left: 20%;margin-top: 5px">
                  <el-checkbox v-model="dataC[data.day]['dayCheck']">天</el-checkbox>
                  <el-time-picker v-model="dataC[data.day]['dayTime']" :clearable="false" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}" value-format="HH:mm:ss" style="width: 80px;height: 20px" @blur="selectTime(dataC[data.day]['banTime'], data.day)"/>
                </div>
                <div style="margin-left: 20%;margin-top: 5px">
                  <el-checkbox v-model="dataC[data.day]['weekCheck']">周</el-checkbox>
                  <el-time-picker v-model="dataC[data.day]['weekTime']" :clearable="false" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}" value-format="HH:mm:ss" style="width: 80px;height: 20px"/>
                </div>
                <div style="margin-left: 20%;margin-top: 5px">
                  <el-checkbox v-model="dataC[data.day]['monthCheck']">月</el-checkbox>
                  <el-time-picker v-model="dataC[data.day]['monthTime']" :clearable="false" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}" value-format="HH:mm:ss" style="width: 80px;height: 20px"/>
                </div>
                <div style="margin-left: 20%;margin-top: 5px">
                  <el-checkbox v-model="dataC[data.day]['yearCheck']">年</el-checkbox>
                  <el-time-picker v-model="dataC[data.day]['yearTime']" :clearable="false" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}" value-format="HH:mm:ss" style="width: 80px;height: 20px"/>
                </div>
              </div>
            </el-calendar>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { arrDeepCopy } from '../../../utils/tool.js'
export default {
  data() {
    return {
      tableData: [],
      dateValue: '',
      monthValue: new Date(),
      checked: '',
      value: new Date(),
      multipleSelection: '',
      loading: true,
      dataC: []
    }
  },
  created() {
    this.initializationDate()
    this.getStationNumber()
  },
  mounted() {
    var dataCur = new Date()
    let h = dataCur.getHours() + ':'
    h = h < 10 ? ('0' + h) : h
    let w = dataCur.getMinutes() + ':'
    w = w < 10 ? ('0' + w) : w
    let q = dataCur.getSeconds()
    q = q < 10 ? ('0' + q) : q
    const time = h + w + q
    console.log(time)
    this.dateValue = time
    window.dataC = this.dataC
  },
  methods: {
    initializationDate() {
      const date = this.monthValue
      const month = date.getMonth() < 10 ? ('0' + date.getMonth()) : date.getMonth()
      const month1 = date.getMonth() + 1 < 10 ? ('0') + (date.getMonth() + 1) : date.getMonth() + 1
      const month2 = date.getMonth() + 2 < 10 ? ('0') + (date.getMonth() + 2) : date.getMonth() + 2
      const time1 = date.getFullYear() + '-' + month1 + '-'
      let time2, time
      console.log(month, 'month')
      if (month === '00') {
        time = (date.getFullYear() - 1) + '-' + '12' + '-'
      } else {
        time = date.getFullYear() + '-' + month + '-'
      }
      if (month2 === 13) {
        time2 = (date.getFullYear() + 1) + '-' + '01' + '-'
      } else {
        time2 = date.getFullYear() + '-' + month2 + '-'
      }
      console.log(time, time1, time2)
      for (let i = 1; i < 32; i++) {
        let h = i
        h = h < 10 ? ('0' + h) : h
        this.dataC[time + h] = {
          banCheck: false, banTime: '11:00:00',
          dayCheck: false, dayTime: '11:00:00',
          weekCheck: false, weekTime: '11:00:00',
          monthCheck: false, monthTime: '11:00:00',
          yearCheck: false, yearTime: '11:00:00'
        }
        this.dataC[time1 + h] = {
          banCheck: false, banTime: '11:00:00',
          dayCheck: false, dayTime: '11:00:00',
          weekCheck: false, weekTime: '11:00:00',
          monthCheck: false, monthTime: '11:00:00',
          yearCheck: false, yearTime: '11:00:00'
        }
        this.dataC[time2 + h] = {
          banCheck: false, banTime: '11:00:00',
          dayCheck: false, dayTime: '11:00:00',
          weekCheck: false, weekTime: '11:00:00',
          monthCheck: false, monthTime: '11:00:00',
          yearCheck: false, yearTime: '11:00:00'
        }
      }
    },
    changeMonth() {
      this.value = new Date(this.monthValue)
      this.initializationDate()
    },
    selectBox(a) {
      // a[0].isSelected = !a[0].isSelected
      console.log('[data.day]', a)
    },
    selectTime(a, b) {
      // this.$forceUpdate()
      //
      // this.$set(this.dataC[b], 'banTime', a)
      // this.$forceUpdate()
      this.dataC[b]['banTime'] = a
      this.dataC = arrDeepCopy(this.dataC)
      // console.log('[data.day]', this.dataC[b])
      // this.viewDayWork(b)
    },
    viewDayWork(a) {
      console.log(a)
      // event.stopPropagation()
      // console.log(a)
    },
    // 初始化获取工位号
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data
        console.log('this.tableData', this.tableData)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection, 'this.multipleSelection')
    }
  }
}
</script>

<style scoped>
  ::v-deep.el-calendar-table{
    height: 1000px!important;
  }
  .is-selected {
    color: #1989FA;
  }
  ::v-deep.el-calendar-table .el-calendar-day{
    height: 163px!important;
  }
  ::v-deep.el-input--prefix .el-input__inner{
    padding-left: 0!important;
    padding-right: 0!important;
  }
  ::v-deep.el-input__inner{
    height: 20px;
    line-height: 20px;
    padding: 0;
  }
  ::v-deep.el-icon-time:before{
    display: none;
  }

  .weekClass{
    margin-left: 3px;
    border: 1px solid black;
    width: 180px;
    height: 32px;
    font-size: 18px;
    text-align: center;
    line-height: 32px;
    margin-top: 3px;
  }

  .dateDiv{
    border: 1px solid black;
    width: 180px;
    height: 180px;
    margin-left: 3px;
    margin-top: 3px;
  }
  ::v-deep.el-calendar-table:not(.is-range) td.next, .el-calendar-table:not(.is-range) td.prev{
    pointer-events: none;
  }
  .elDataPicker>>>.el-input__inner{
    height: 32px!important;
    padding-left: 30px!important;
    padding-right: 0!important;
  }
  ::v-deep.el-button-group{
    display: none!important;
  }
</style>
