<template>
  <div class="calendar">
    <table class="time_table table" v-on:mouseleave="mouseleave">
      <thead>
        <tr>
          <th rowspan="2" style="width:120px">日期/时间(时)</th>
        </tr>
        <tr>
          <th class="unselectable" colspan="2" v-for="(num, index) in numData" :key="index" style="width:50px">{{ num }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(options, index) in timeData" :key="index">
          <th scope="row">{{ options.date }}</th>
          <td v-for="(timeItem, key) in options.time" :key="key" style="width:15px"
            :class="[{ active_select: timeItem.isSelected, active_select_move: timeItem.show }]"
            v-on:mousedown="mousedown(index, key)" v-on:mouseover="mouseover(index, key)"
            v-on:mouseup="mouseup(index, key)" @click="showOne(index, key)"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  var arr = []
  for (let i = 0; i < 48; i++) {
    arr.push(i / 2)
  }
  export default {
    name: 'calendar-table',
    props: {
      scheduleTime: {
        type: String,
        default () {
          var str = ''
          for (let i = 0; i < 7 * 48; i++) {
            str += '0'
          }
          return str
        }
      }
    },
    data() {
      return {
        show: false,
        numData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, ],
        // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, ],
        dateTime: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        timeData: [{
            date: '周一',
            time: []
          },
          {
            date: '周二',
            time: []
          },
          {
            date: '周三',
            time: []
          },
          {
            date: '周四',
            time: []
          },
          {
            date: '周五',
            time: []
          },
          {
            date: '周六',
            time: []
          },
          {
            date: '周日',
            time: []
          }
        ],
        selectFlag: false,
        max: {
          x: 0,
          y: 0
        },
        dataString: ''
      }
    },
    methods: {
      // handleClose(item) {
      //   var index = Math.floor(item / 24)
      //   var key = item % 7
      //   if (this.timeData[index].time[key].value == false) {
      //     if (this.timeData[index].time[key].isSelected) {
      //       this.timeData[index].time[key].isSelected = false
      //     } else {
      //       this.$set(this.timeData[index].time[key], 'isSelected', true)
      //     }
      //   }
      // },
      showOne(index, key) {
        //   this.timeData[index].time[key].isSelected = !this.timeData[index].time[key].isSelected
      },
      mousedown: function (index, key) {
        this.selectStart = []
        this.selectFlag = true
        if (this.timeData[index].time[key].value == false) {
          if (this.timeData[index].time[key].isSelected) {
            this.timeData[index].time[key].isSelected = false
          } else {
            this.$set(this.timeData[index].time[key], 'isSelected', true)
          }
        }
        this.selectStart.push({
          index: index,
          key: key
        })
      },
      mouseover: function (index, key) {
        // x 垂直方向  y 水平方向
        if (this.selectFlag) {
          if (index >= this.max.x) {
            this.max.x = index
          }
          if (key >= this.max.y) {
            this.max.y = key
          }
          var start = {
            x: this.selectStart[0].index,
            y: this.selectStart[0].key
          }
          var end = {
            x: index,
            y: key
          }
          for (var i = end.x; i <= this.max.x; i++) {
            for (var j = end.y; j <= this.max.y; j++) {
              this.$set(this.timeData[i].time[j], 'isSelected', false)
            }
          }
          /* 渲染选中的区域 */
          // for (var i = start.x; i <= end.x; i++) {
          //   for (var j = start.y; j <= end.y; j++) {
          //     // this.$set(this.timeData[i].time[j], 'isSelected', true)
          //     this.$set(this.timeData[i].time[j], 'show', true)
          //   }
          // }
          for (var i = start.x; i <= end.x; i++) {
            for (var j = start.y; j <= end.y; j++) {
              this.$set(this.timeData[i].time[j], 'isSelected', true)
            }
          }
        }
      },
      mouseup: function (index, key) {
        var start = {
          x: this.selectStart[0].index,
          y: this.selectStart[0].key
        }
        var end = {
          x: index,
          y: key
        }
        /* 渲染选中的区域 */
        var data = []
        var arr = []
        //   for (let i = 0; i < this.timeData.length; i++) {
        //     for (let j = 0; j < this.timeData[i].time.length; j++) {
        //       this.timeData[i].time[j].show = false
        //     }
        //   }
        arr = data.concat(
          this.timeData[0].time,
          this.timeData[1].time,
          this.timeData[2].time,
          this.timeData[3].time,
          this.timeData[4].time,
          this.timeData[5].time,
          this.timeData[6].time
        )
        this.dataString = arr.map(item => {
          if (item.isSelected) {
            return 1
          } else {
            return 0
          }
        })
        console.log(this.dataString.join(''))
        this.$emit('update:scheduleTime', this.dataString.join(''))
        this.selectFlag = false
        this.max = {
          x: 0,
          y: 0
        }
      },
      mouseleave: function () {
        this.selectFlag = false
      },
      setItemDate(sum) {
        let i = sum
        if (i < 24) {
          return '周一' + i + ':00~' + (i + 1) + ':00'
        } else if (i < 48 && i >= 24) {
          return '周二' + (i - 24) + ':00~' + (i - 23) + ':00'
        } else if (i < 72 && i >= 48) {
          return '周三' + (i - 48) + ':00~' + (i - 47) + ':00'
        } else if (i < 96 && i >= 72) {
          return '周四' + (i - 72) + ':00~' + (i - 71) + ':00'
        } else if (i < 120 && i >= 96) {
          return '周五' + (i - 96) + ':00~' + (i - 95) + ':00'
        } else if (i < 144 && i >= 120) {
          return '周六' + (i - 120) + ':00~' + (i - 119) + ':00'
        } else {
          return '周日' + (i - 144) + ':00~' + (i - 143) + ':00'
        }
      },
      init() {
        var str = this.scheduleTime
        var arr = str.split('')
        this.timeData = [{
            date: '周一',
            time: []
          },
          {
            date: '周二',
            time: []
          },
          {
            date: '周三',
            time: []
          },
          {
            date: '周四',
            time: []
          },
          {
            date: '周五',
            time: []
          },
          {
            date: '周六',
            time: []
          },
          {
            date: '周日',
            time: []
          }
        ]
        for (let i = 0; i < arr.length; i++) {
          if (i < 48) {
            this.timeData[0].time.push({
              isSelected: arr[i] == 1 ? true : false,
              move: false,
              value: false
            })
          } else if (i < 96 && i >= 48) {
            this.timeData[1].time.push({
              isSelected: arr[i] == 1 ? true : false,
              move: false,
              value: false
            })
          } else if (i < 144 && i >= 96) {
            this.timeData[2].time.push({
              isSelected: arr[i] == 1 ? true : false,
              move: false,
              value: false
            })
          } else if (i < 192 && i >= 144) {
            this.timeData[3].time.push({
              isSelected: arr[i] == 1 ? true : false,
              move: false,
              value: false
            })
          } else if (i < 240 && i >= 192) {
            this.timeData[4].time.push({
              isSelected: arr[i] == 1 ? true : false,
              move: false,
              value: false
            })
          } else if (i < 288 && i >= 240) {
            this.timeData[5].time.push({
              isSelected: arr[i] == 1 ? true : false,
              move: false,
              value: false
            })
          } else {
            this.timeData[6].time.push({
              isSelected: arr[i] == 1 ? true : false,
              move: false,
              value: false
            })
          }
        }
      }
    },
    watch: {
      scheduleTime: {
        immediate: true, // immediate选项可以开启首次赋值监听
        handler(newVal, oldVal) {
          this.init()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .time_table {
    border: 1px solid #ccc;
    border-collapse: collapse;
  }

  .time_table th,
  .time_table td {
    border: 1px solid #ccc;
    text-align: center;
  }

  .time_table .unselectable {
    width: 5px !important;
    height: 30px;
  }

  .active_select {
    background: cornflowerblue;
  }

  .active_select_move {
    background: aqua;
  }

  * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
</style>