<!-- 工作台 -->
<script lang="ts" setup name="WorkBench">
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import tableList from './components/tableList.vue'
import editScheduleDialog from './components/editSchedule.vue'
import buttonSet from './components/buttonSet.vue'
import equipmentManage from './components/equipmentManage.vue'
import measureManage from './components/measureManage.vue'
import checkManage from './components/checkManage.vue'
import progressBar from './components/progressBar.vue'
// -----------------------------------日历--------------------------------------------
const calendarValue = ref(new Date())
const selectedDate = ref('') // 选中的日期
const selectDateRecord = ref('') // 选中的日期记录--完整日期
const editScheduleRef = ref() // 编辑日程ref
const redCircleData = ref() // 日程列表
const companyId = ref() // 用户单位
// 获取当前月份全部日期
const getDaysMonth = (time: string) => {
  // time => '2023-12'
  const currentMonth = dayjs(time).startOf('month')
  const daysInMonth = currentMonth.daysInMonth()
  const dates = []
  for (let i = 1; i <= daysInMonth; i++) { const date = currentMonth.date(i); dates.push(dayjs(date).format('YYYY-MM-DD')) }
  return dates as string[]
}
// 点击编辑日程
const editSchedule = () => {
  editScheduleRef.value.initDialog(selectDateRecord.value)
}
// 获取日程列表
const fetchCalendarList = () => {
  const paramas = {
    companyId: companyId.value,
    startDate: `${selectedDate.value}-01`,
    endDate: `${selectedDate.value}-31`,
  }
  const dates = getDaysMonth(selectedDate.value)
  const timeObj: { [key: string]: any } = {}
  dates.forEach((item) => {
    timeObj[item] = []
  })
  // getCalendarList(paramas).then((res) => {
  //   redCircleData.value = res.data.forEach((item: any) => {
  //     for (const i in timeObj) {
  //       if (i === item.markDate) {
  //         timeObj[i].push(item)
  //       }
  //     }
  //   })
  //   redCircleData.value = timeObj
  // })
}
// 点击日期
const clickDate = (day: string) => {
  selectDateRecord.value = day
  selectedDate.value = day.slice(0, 7)
  fetchCalendarList() // 获取日历列表
}
// 点击删除icon
const deleteData = () => {
  if (!redCircleData.value || (Object.keys(redCircleData.value).length && !redCircleData.value[selectDateRecord.value].length)) {
    ElMessage.warning(`${selectDateRecord.value}没有日程，无法删除`)
    return false
  }
  ElMessageBox.confirm(
    `确定删除${selectDateRecord.value}的日程吗？`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      // for (const i in redCircleData.value) {
      //   if (selectDateRecord.value === i && redCircleData.value[i].length) {
      //     delSchedule({ id: redCircleData.value[i][0].id }).then((res) => {
      //       ElMessage({
      //         type: 'success',
      //         message: '删除成功',
      //       })
      //       fetchCalendarList() // 获取日历列表
      //     })
      //   }
      // }
    })
}

// 编辑日程成功
const editScheduleSuccess = () => {
  fetchCalendarList() // 获取日历列表
}

// -------------------------------------------------------------------------------------------
// ------------------------------------UI------------------------------------------
const blockHeight = ref(300) // 每个展示块高度
const bigBlockHeight = ref(300) // 大展示块的高度
const blockWidth = ref(400)
const smallBlockHeight = ref()
// 计算工作台区域高度 - 顶部-面包屑-边距
const benchDivHeight = ref(215)
function calcBlockSize() { // 36是消息滚动栏的高度
  const bodyHeight = document.body.clientHeight - 60 - 20 - 50 - 15
  bigBlockHeight.value = bodyHeight
  blockHeight.value = bodyHeight > 610 ? (bodyHeight) / 3 : 300
  // smallBlockHeight.value = bodyHeight > 610 ? (bodyHeight) / 4 : 215
  blockWidth.value = (document.body.clientWidth - 180 - 20 - 20) / 3
  benchDivHeight.value = blockHeight.value - 60
}
onMounted(() => {
  calcBlockSize()

  // -------------------监听日历三个按钮操作（上个月、今天、下个月）------------------
  // 点击上个月
  const prevBtn = document.querySelector(
    '.el-calendar__button-group .el-button-group>button:nth-child(1)',
  )
  prevBtn!.addEventListener('click', (e) => {
    const day = dayjs(calendarValue.value).format('YYYY-MM')
    clickDate(day)
  })

  // 点击下一个月
  const nextBtn = document.querySelector(
    '.el-calendar__button-group .el-button-group>button:nth-child(3)',
  )
  nextBtn!.addEventListener('click', () => {
    const day = dayjs(calendarValue.value).format('YYYY-MM')
    clickDate(day)
  })

  // 点击今天
  const todayBtn = document.querySelector(
    '.el-calendar__button-group .el-button-group>button:nth-child(2)',
  )
  todayBtn!.addEventListener('click', () => {
    const day = dayjs(calendarValue.value).format('YYYY-MM')
    clickDate(day)
  })
})
</script>

<template>
  <app-container style="background-color: #f2f3f5;display: flex;">
    <!-- 左侧 -->
    <div class="container" style="flex: 1;display: flex;flex-direction: column;">
      <!-- 上 -->
      <div style="flex: 1;width: 100%; display: flex;gap: 10px;">
        <div style="width: 50%; display: flex;flex-direction: column;">
          <div style="height: 30%;" class="workBench-div">
            敬请期待
          </div>
          <bench-col
            style="flex: 1;background-color: #fff;margin: 10px 0;padding: 10px;position: relative;"
            icon="icon-line"
            title="设备管理"
            :height="blockHeight"
          >
            <equipment-manage />
          </bench-col>
          <!-- </div> -->
        </div>
        <div style="width: 50%; height: 100%;display: flex;flex-direction: column;gap: 10px;padding-bottom: 10px;">
          <!-- 快捷入口：按钮集合 -->
          <div class="workBench-div" style="height: 110px;overflow: auto;">
            <button-set />
          </div>
          <!-- 检定管理 -->
          <bench-col
            style="flex: 1;background-color: #fff;padding: 10px;position: relative;"
            icon="icon-line"
            title="检定管理"
            :height="blockHeight"
          >
            <measure-manage />
          </bench-col>
          <!-- 核查管理 -->
          <bench-col
            style="overflow: auto;height: 360px;background-color: #fff;padding: 10px;position: relative;"
            icon="icon-line"
            title="核查管理"
            :height="blockHeight"
          >
            <check-manage />
          </bench-col>
        </div>
      </div>
      <!-- 下 -->
      <div style="width: 100%;height: 180px;overflow: auto;" class="workBench-div">
        <div>
          <span>内部审核进度</span>
          <progress-bar />
        </div>
      </div>
    </div>
    <!-- 右侧一列 -->
    <div class="container" style="width: 25%;margin-left: 10px;">
      <bench-col
        style="position: relative;overflow-y: scroll;"
        icon="icon-calendar"
        title="工作日历"
        :height="blockHeight"
        :is-edit="true"
        :is-show-delete="true"
        @edit-data="editSchedule"
        @delete-data="deleteData"
      >
        <el-calendar v-model="calendarValue" class="calendar" :style="`height:${blockHeight}px`">
          <template #dateCell="{ data }">
            <div style="width: 100%;height: 100%;text-align: center;" @click="clickDate(data.day)">
              <span>
                {{ data.day.split("-").slice(2).join() }}
              </span>
            </div>
            <div v-for="(value, key, index) in redCircleData" :key="index">
              <el-popover
                v-if="key === data.day && value.length"
                placement="top-start"
                trigger="hover"
                width="auto"
              >
                <div class="popover-content-area-class">
                  <span style="font-weight: 600;">{{ key }}</span>
                  <li v-for="(e, i) in value" :key="i" class="calendar-li-item">
                    {{ e.scheduleMatters }}
                  </li>
                </div>
                <template #reference>
                  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;" @click="clickDate(data.day)">
                    <!-- <span>
                        {{ data.day.split("-").slice(2).join() }}
                      </span> -->
                    <span style="margin-top: -30px;">
                      <el-icon :size="20" color="#f56c6c">
                        <svg-icon name="icon-alarm" />
                      </el-icon>
                      <!-- <span v-if="key === data.day" class="redCircle" /> -->
                    </span>
                  </div>
                </template>
              </el-popover>
            </div>
          </template>
        </el-calendar>
      </bench-col>
      <bench-col
        v-loading="false"
        path-url="/notice"
        style="width: 100%; margin-top: 6px;"
        icon="icon-book"
        title="通知公告"
        :height="smallBlockHeight"
      >
        <table-list name="通知公告" :height="smallBlockHeight - 50" :limit="5" />
      </bench-col>
      <bench-col
        v-loading="false"
        path-url="/workbench/approvalList"
        style="width: 100%; margin-top: 6px;"
        icon="icon-book"
        title="审批提醒"
        :height="smallBlockHeight"
      >
        <table-list name="审批提醒" :height="smallBlockHeight - 50" :limit="5" />
      </bench-col>
      <bench-col
        v-loading="false"
        path-url="/workbench/workList"
        style="width: 100%; margin-top: 6px;"
        icon="icon-book"
        title="工作提醒"
        :height="smallBlockHeight"
      >
        <table-list name="工作提醒" :height="smallBlockHeight - 50" :limit="5" />
      </bench-col>
    </div>
  </app-container>
  <!-- 编辑日程组件 -->
  <edit-schedule-dialog ref="editScheduleRef" @edit-schedule-success="editScheduleSuccess" />
</template>

<style lang="scss" scoped>
.workBench-div {
  padding: 10px;
  border-radius: 8px;
  background-color: #fff;
}

.device-name {
  position: absolute;
  bottom: 2px;
  display: flex;
  justify-content: space-around;
  width: 100%;
  z-index: 99;
}

.bench-table {
  .el-table__header-wrapper {
    border-radius: 8px;
  }
}

.bench-table-header {
  th {
    font-weight: normal;
    font-size: 14px;
  }
}

.bench-table-row {
  border-radius: 8px;
}

.device-search-table {
  position: absolute;
  top: 10px;
  right: 15px;
  display: flex;
  align-items: center;
}

.tab-active {
  background-color: #97b8fc !important;
}

.device-table {
  position: relative;
  top: 0;
  left: 10px;
  display: flex;

  .tab {
    background-color: #eee7e7;
    // margin: 0 10px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    margin-left: 10px;

    &:hover {
      cursor: pointer;
    }

    .content {
      display: inline-block;
      padding-right: 20px;
      text-align: center;
      margin-left: 10px;
    }
  }
}

.container {
  // width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
  overflow: hidden;

  .device-search {
    position: absolute;
    top: 10px;
    left: 150px;
    display: flex;
    align-items: center;
  }
}

.search {
  &:hover {
    cursor: pointer;
  }
}

.device-container {
  display: flex;
  justify-content: space-around;
  position: absolute;
  width: 98% !important;
}

// .calendar {
//   position: absolute;
//   top: 34px;
//   left: 0;

//   ::v-deep(.el-calendar__body) {
//     transform: scaleY(0.6);
//     padding: 0 15px;
//     margin-top: -76px;
//     // position: absolute;
//     // top: 0;
//   }
// }
</style>