<!-- 智能模型列表 -->
<script lang="ts" setup name="Dashboard">
import editScheduleDialog from './editSchedule.vue'
// import verificationDetail from './components/verificationDetail.vue'
const width = ref(document.body.clientWidth - 180)
const height = ref(document.body.clientHeight - 50 - 60 - 10)
window.addEventListener('resize', () => {
  const bodyWidth = document.body.clientWidth - 180
  width.value = bodyWidth
  const bodyHeight = document.body.clientHeight - 50 - 60
  height.value = bodyHeight
})
const notice = ref([
  {
    status: 1,
    content: '溯源公示|计量站智能模型溯源公告',
    time: '2023-09-01',
  },
  {
    status: 1,
    content: '溯源公示|计量站智能模型溯源公告',
    time: '2023-09-01',
  },
  {
    status: 0,
    content: '单位通知|单位通知单位通知',
    time: '2023-09-03',
  }, {
    status: 0,
    content: '单位通知|单位通知单位通知',
    time: '2023-09-03',
  },
])
const approve = ref([
  {
    status: 1,
    content: '审批名称审批名称审批名称',
    time: '2023-09-01',
  },
  {
    status: 1,
    content: '审批名称审批名称审批名称',
    time: '2023-09-01',
  },
  {
    status: 1,
    content: '审批名称审批名称审批名称',
    time: '2023-09-01',
  },
  {
    status: 0,
    content: '审批名称审批名称审批名称',
    time: '2023-09-01',
  },
])
const remind = ref([
  {
    status: 0,
    content: '智能模型到期|压力表JL8938292S已超有效期 ',
    time: '2023-09-01',
  },
  {
    status: 1,
    content: '智能模型到期|压力表JL8938292S已超有效期 ',
    time: '2023-09-09',
  },
  {
    status: 1,
    content: '计量计划|2023年第二季度计量计划已发布 ',
    time: '2023-09-04',
  },
  {
    status: 1,
    content: '智能模型到期|压力表JL8938292S已超有效期 ',
    time: '2023-09-03',
  },
])
// -----------------------------------日历--------------------------------------------
const calendarValue = ref(new Date())
const selectedDate = ref('') // 选中的日期
const selectDateRecord = ref('') // 选中的日期记录--完整日期
const editScheduleRef = ref() // 编辑日程ref
const redCircleData = ref() // 日程列表
// 点击编辑日程
const editSchedule = () => {
  editScheduleRef.value.initDialog()
}
// 获取日程列表
const fetchCalendarList = () => {
  const param = {
    userId: user.id,
    calendarMonth: selectedDate.value,
  }
  // getCalendarList(param).then((res) => {
  //   redCircleData.value = res.data
  // })
}
// 点击日期
const clickDate = (day: string) => {
  selectDateRecord.value = day
  selectedDate.value = day.slice(0, 7)
  fetchCalendarList() // 获取日历列表
}
// 点击删除icon
const deleteData = () => {
  if (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(() => {
      const param = {
        userId: user.id,
        scheduleDate: selectDateRecord.value,
      }
      // delSchedule(param).then((res) => {
      //   ElMessage({
      //     type: 'success',
      //     message: '删除成功',
      //   })
      //   fetchCalendarList() // 获取日历列表
      // })
    })
}

// 编辑日程成功
const editScheduleSuccess = () => {
  fetchCalendarList() // 获取日历列表
}
const range = ref([new Date(2019, 2, 4), new Date(2019, 2, 4)])
</script>

<template>
  <div style="width: 99%;">
    <!-- 编辑日程组件 -->
    <edit-schedule-dialog ref="editScheduleRef" @edit-schedule-success="editScheduleSuccess" />
    <div class="detail-container" :style="`height:${height * 0.24}px;margin-top:5px;`">
      <div class="top">
        <div class="title">
          工作日历
        </div>
      </div>
      <div class="content">
        <el-calendar v-model="calendarValue" :range="range">
          <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">
                        <alarm-clock />
                      </el-icon>
                      <!-- <span v-if="key === data.day" class="redCircle" /> -->
                    </span>
                  </div>
                </template>
              </el-popover>
            </div>
          </template>
        </el-calendar>
      </div>
      <div class="expand">
        展开↓
      </div>
    </div>
    <div class="detail-container" :style="`height:${height * 0.25}px;margin-top:5px;`">
      <div class="top">
        <div class="title">
          通知公告
        </div>
        <div class="more">
          查看更多
        </div>
      </div>
      <div class="table">
        <el-table :data="notice" :max-height="`height:${height * 0.25 - 22}px`">
          <el-table-column label="" prop="status" width="50" aligin="center">
            <template #default="props">
              <div :class="`${props.row.status ? 'green' : 'red'}`" />
            </template>
          </el-table-column>
          <el-table-column label="" prop="content" aligin="center" />
          <el-table-column label="" prop="time" width="150" aligin="center" />
        </el-table>
      </div>
    </div>
    <div class="detail-container" :style="`height:${height * 0.25}px;margin-top:5px;`">
      <div class="top">
        <div class="title">
          审批提醒
        </div>
        <div class="more">
          查看更多
        </div>
      </div>
      <div class="table">
        <el-table :data="approve" :max-height="`height:${height * 0.25 - 22}px`">
          <el-table-column label="" prop="status" width="50" aligin="center">
            <template #default="props">
              <div :class="`${props.row.status ? 'green' : 'red'}`" />
            </template>
          </el-table-column>
          <el-table-column label="" prop="content" aligin="center" />
          <el-table-column label="" prop="time" width="150" aligin="center" />
        </el-table>
      </div>
    </div>
    <div class="detail-container" :style="`height:${height * 0.25}px;margin-top:5px;`">
      <div class="top">
        <div class="title">
          工作提醒
        </div>
        <div class="more">
          查看更多
        </div>
      </div>
      <div class="table">
        <el-table :data="remind" :max-height="`height:${height * 0.25 - 22}px`">
          <el-table-column label="" prop="status" width="50" aligin="center">
            <template #default="props">
              <div :class="`${props.row.status ? 'green' : 'red'}`" />
            </template>
          </el-table-column>
          <el-table-column label="" prop="content" aligin="center" />
          <el-table-column label="" prop="time" width="150" aligin="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.el-table__header-wrapper) {
  display: none;
}

.expand {
  position: absolute;
  z-index: 9;
  bottom: 0;
  text-align: center;
  width: 100%;
  background: #fff;
  // &:hover {
  //   cursor:
  // }
  font-size: 14px;
  color: #ccc;
}

.green {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: green;
}

.red {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgb(228 85 29);
}

.detail-container {
  background: #fff;
  width: 100%;
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
  position: relative;

  .top {
    display: flex;
    justify-content: space-between;

    .title {
      padding-left: 10px;
      font-size: 16px;
      font-weight: 700;
    }

    .more {
      color: blue;
    }
  }

  .table {
    margin-top: 10px;
  }

  .search {
    display: flex;
    padding: 5px 10px;
    justify-content: space-between;

    .input {
      padding-left: 15px;
      width: 30%;
    }
  }

  .content {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .pie1,
    .pie2 {
      width: 50%;
      position: relative;

      .title {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>