<template>
  <div class="calendar">
    <table class="calendar-table calendar-table-hour">
      <thead class="calendar-head">
        <tr>
          <th rowspan="8" class="week-td">星期 / 时间</th>
          <th colspan="12">00:00 - 12:00</th>
          <th colspan="12">12:00 - 24:00</th>
          <th colspan="4" rowspan="2" class="week-td" style="display: none">小时</th>
        </tr>
        <tr>
          <th colspan="1" v-for="(_, i) in 24" :key="i">{{ i }}</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(hoursList, week) in items">
          <tr>
            <th>{{ WeekMap[week] }}</th>
            <td
              v-for="(info, hour) in hoursList"
              :key="hour"
              @mousedown="handleMouseDown(week, hour, $event)"
              @mouseover="handleMouseMove(week, hour)"
              @mouseup="handleMouseUp"
              :style="getTdStyle(info)">
              <span class="cell-text"> {{ info.value ? info.value : '' }} </span>
            </td>
          </tr>
        </template>
        <tr>
          <th colspan="28" class="clear-bar">
            <span class="middle">可拖动鼠标选择时间段</span>
            <el-button class="hover-link fr" link @click="resetAllBid" :disabled="disabled">全部重置</el-button>
          </th>
        </tr>
      </tbody>
    </table>

    <el-dialog v-model="dialogVisible" title="修改出价系数" width="30%" :close-on-click-modal="false" :before-close="closeDialog">
      <el-input-number v-model="bid" :min="0" :max="100" :step="0.1" controls-position="right" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelBid">取消</el-button>
          <el-button type="primary" @click="submitBid">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, reactive } from 'vue'

interface Props {
  data: number[][]
  disabled: boolean
}
const props = withDefaults(defineProps<Props>(), {
  disabled: false,
})
const bidData = ref(props.data)

const mouseDown = ref(false)
const startRowIndex = ref(0)
const startColIndex = ref(0)
const items = ref([])
const WeekMap = {
  0: '星期一',
  1: '星期二',
  2: '星期三',
  3: '星期四',
  4: '星期五',
  5: '星期六',
  6: '星期日',
}
const dialogVisible = ref(false)
const bid = ref(0)
const selectedItems = ref({})

const getTdStyle = (info: any) => {
  if (props.disabled) {
    return { cursor: 'not-allowed', background: '#fff' }
  }
  return { background: info.selected ? '#ccdbff' : '' }
}

for (let i = 0; i < 7; i++) {
  selectedItems.value[i] = []
  const tmp = []
  for (let j = 0; j < 24; j++) {
    tmp.push({ value: bidData.value.length === 0 ? 0 : bidData.value[i][j], selected: false })
  }
  items.value.push(tmp)
}

watch(
  () => props.data,
  () => {
    // console.log(100, 'watch', props.data)
    if (props.data.length === 0) {
      for (let i = 0; i < 7; i++) {
        const tmp = []
        for (let j = 0; j < 24; j++) {
          tmp.push(0)
        }
        props.data.push(tmp)
      }
    }
    for (let i = 0; i < 7; i++) {
      for (let j = 0; j < 24; j++) {
        items.value[i][j].value = props.data[i][j]
      }
    }
    bidData.value = props.data
  },
  { immediate: true }
)

const handleMouseDown = (rowIndex: number, colIndex: number, event: any) => {
  if (props.disabled) return
  if (event.button === 0) {
    mouseDown.value = true
    startRowIndex.value = rowIndex
    startColIndex.value = colIndex
    items.value[rowIndex][colIndex].selected = true
    selectedItems.value[rowIndex].push(colIndex)
  }
}

const handleMouseUp = (event: any) => {
  if (props.disabled) return
  if (event.button === 0) {
    mouseDown.value = false
    startColIndex.value = 0
    startRowIndex.value = 0
    dialogVisible.value = true
  }
}

const handleMouseMove = (rowIndex: number, colIndex: number) => {
  if (props.disabled) return
  if (mouseDown.value) {
    selectCell(rowIndex, colIndex)
  }
}

const selectCell = (rowIndex: number, colIndex: number) => {
  if (props.disabled) return
  const rowStart = Math.min(startRowIndex.value, rowIndex)
  const rowEnd = Math.max(startRowIndex.value, rowIndex)
  const cellStart = Math.min(startColIndex.value, colIndex)
  const cellEnd = Math.max(startColIndex.value, colIndex)

  for (let i = rowStart; i <= rowEnd; i++) {
    for (let j = cellStart; j <= cellEnd; j++) {
      items.value[i][j].selected = true
      selectedItems.value[i].push(j)
    }
  }
}

const submitBid = () => {
  // console.log(151, 'submitBid', bidData)
  for (const row of Object.keys(selectedItems.value)) {
    for (const col of selectedItems.value[row]) {
      items.value[row][col].value = bid.value
      bidData.value[row][col] = bid.value
    }
  }
  clearSelectedItems()
  clearCellBackgroundColor()
  dialogVisible.value = false
}

const cancelBid = () => {
  clearSelectedItems()
  clearCellBackgroundColor()
  dialogVisible.value = false
}

const clearCellBackgroundColor = () => {
  for (const hoursList of items.value) {
    for (const info of hoursList) {
      info.selected = false
    }
  }
}
const clearSelectedItems = () => {
  for (var i = 0; i < 7; i++) {
    selectedItems.value[i] = []
  }
}
const resetAllBid = () => {
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 24; j++) {
      items.value[i][j].value = 0
      items.value[i][j].selected = false
      bidData.value[i][j] = 0
    }
  }
}
const closeDialog = (done: Function) => {
  // console.log("closeDialog")
  cancelBid()
  done()
}
</script>

<style lang="scss" scoped>
.calendar {
  background-color: #fff;
  -webkit-user-select: none;
  position: relative;
  display: inline-block;

  .calendar-table {
    border-collapse: collapse;
  }

  .week-td {
    width: 90px;
  }
}

table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  text-indent: initial;
  border-spacing: 2px;
  border-color: gray;

  thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
  }

  tr {
    border: 1px solid #e0e5f4;
    font-size: 12px;
    text-align: center;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.5);

    th {
      min-width: 40px;
      border: 1px solid #e0e5f4;
      font-size: 12px;
      text-align: center;
      line-height: 32px;
      background: #f7f8fa;
    }

    td {
      border: 1px solid #e0e5f4;
      font-size: 12px;
      text-align: center;
      line-height: 32px;
      min-width: 40px;

      &:hover {
        background: #ccdbff;
        cursor: pointer;
      }

      .cell-text {
        color: black;
      }
    }
  }
}

.clear-bar {
  line-height: 32px;
  padding: 0 12px;

  .hover-link {
    color: #1c6bde;
    font-size: 13px;
    margin-top: 7px;
  }
  .fr {
    float: right;
  }
  .middle {
    float: center;
  }
}
</style>
