<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="overflow: auto; margin-top: 15px">
      {{ !!dataString ? setItemDate(dataString.join("")) : "" }}
    </div> -->
  </div>
</template>
<script>
var num = ["一", "二", "三", "四", "五", "六", "日"];
var arr_hour = get_hour_arr();
//生成时间值数组
function get_hour_arr() {
  var arr_hour = [];
  var oDate = new Date("2016/07/01 00:00:00"); //实例一个时间对象；
  var oDate_hour = oDate.getHours();
  var oDate_minute = oDate.getMinutes();
  for (var i = 0; i < 24; i++) {
    if (oDate_minute < 10) {
      var oDate_minute = "0" + oDate_minute;
    }
    if (i >= 1) {
      oDate.setMinutes(oDate.getMinutes() + 60);
      oDate_hour = oDate.getHours();
      oDate_minute = oDate.getMinutes();
      if (oDate_minute < 10) {
        var oDate_minute = "0" + oDate_minute;
      }
    }
    arr_hour[i] = oDate_hour + ":" + oDate_minute;
    // alert(oDate_hour + ':' + oDate.getMinutes());
  }
  return arr_hour;
}
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(external_binary) {
      //初始化周数数组
      if (external_binary) {
        var time_week_arr = [];

        var date_html = "";
        var binary = external_binary;

        for (var y = 0; y < 7; y++) {
          //初始化小时数组
          var time_hour_arr = [];

          for (var x = 0; x < 24; x++) {
            //获取当前点击元素的位置
            if (y == 0) {
              var index = x;
            } else {
              var index = y * 24 + x;
            }
            //获取td对应的二进制值
            var Selected_val = binary.charAt(index);

            if (Selected_val == 1) {
              //组装保存进数组里
              if (time_hour_arr == []) {
                //表格的第一个位置的值
                time_hour_arr = arr_hour[x];
              } else if (
                binary.charAt(index - 1) == 1 &&
                binary.charAt(index - 2) == 1
              ) {
                //此位置（包含上一行）的前两个都为选中时

                if (x == 0 && binary.charAt(index + 1) == 0) {
                  //选中行里第一个，后一个表格没选中，加逗号
                  time_hour_arr[time_hour_arr.length] = arr_hour[x] + ", ";
                } else if (x == 0 && binary.charAt(index + 1) == 1) {
                  //选中行里第一个，后一个表格已选中，不加逗号
                  time_hour_arr[time_hour_arr.length] = arr_hour[x];
                } else if (x == 1 && binary.charAt(index - 1) == 0) {
                  //选中行里第二个，上一个表格没选中，加逗号
                  time_hour_arr[time_hour_arr.length] = arr_hour[x] + ", ";
                } else if (x == 1 && binary.charAt(index - 1) == 1) {
                  //选中行里第二个，上一个表格已选中，前加-号，后加逗号
                  time_hour_arr[time_hour_arr.length] =
                    "-" + arr_hour[x] + ", ";
                } else {
                  //选中行里除第一、二的表格以外，前一个表格已经选中，此元素前加- 后加逗号
                  time_hour_arr[time_hour_arr.length - 1] =
                    "-" + arr_hour[x] + ", ";
                }
              } else if (binary.charAt(index - 1) == 1 && x > 0) {
                //选中的前一个已选中，且此次选中的不是行里第一个，此次选中的元素前加-后加逗号
                time_hour_arr[time_hour_arr.length] = "-" + arr_hour[x] + ", ";
              } else if (binary.charAt(index + 1) != 1 || x == 47) {
                //选中的后一个没选中，或者此次选中的是行里最后一个，此次选中的元素加逗号
                time_hour_arr[time_hour_arr.length] = arr_hour[x] + ", ";
              } else {
                //选中的后一已选中，此次选中的元素不加逗号
                time_hour_arr[time_hour_arr.length] = arr_hour[x];
              }
            }
          }

          time_week_arr[y] = time_hour_arr;
        }
        //再次组装并输出数组
        var time_html = [];
        for (var y = 0; y < 7; y++) {
          for (var x = 0; x < time_week_arr[y].length; x++) {
            if (!time_html[y]) {
              time_html[y] = time_week_arr[y][x];
            } else {
              time_html[y] += time_week_arr[y][x];
            }
          }

          if (time_html[y]) {
            time_html[y] = time_html[y].substring(0, time_html[y].length - 1);

            date_html += "星期" + num[y] + " (" + time_html[y] + ")" + ", ";
          }
        }

        if (external_binary) {
          return date_html;
        }
        // console.info(time_html);
      } else {
        return "不限";
      }
    },
    init() {
      var str = "";
      if (this.scheduleTime) {
        str = this.scheduleTime;
      } else {
        str =
          "000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000";
      }
      this.dataString = str.split();
      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>
