<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" v-for="(num, index) in numData" :key="index" style="width: 30px">{{ 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"
            :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 style="height:200px;overflow:auto">
      <span v-for="(item, index) of dataString" :key="index">
        <a-tag v-if="item" closable :afterClose="() => handleClose(index)">
          {{ setItemDate(index) }}
        </a-tag>
      </span>
    </div> -->
  </div>
</template>
<script>
export default {
  name: 'calendar-table',
  props: {
    scheduleTime: {
      type: String,
      default() {
        return '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
      },
    },
  },
  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],
      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
        }
      })
      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 = ''
      if (this.scheduleTime) {
        str = this.scheduleTime
      } else {
        str =
          '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
      }
      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 < 24) {
          this.timeData[0].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
        } else if (i < 48 && i >= 24) {
          this.timeData[1].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
        } else if (i < 72 && i >= 48) {
          this.timeData[2].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
        } else if (i < 96 && i >= 72) {
          this.timeData[3].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
        } else if (i < 120 && i >= 96) {
          this.timeData[4].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
        } else if (i < 144 && i >= 120) {
          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: 30px !important;
  height: 20px;
}
.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>
