<template>
  <div>
    <el-tabs v-model="examType">
      <el-tab-pane label="理论考试" :name="1" />
      <el-tab-pane label="实践考试" :name="2" />
      <el-calendar>
        <template #date-cell="{ data }">
          <el-popover placement="top" width="500px" trigger="click">
            <template #reference>
              <div>
                <div>{{ new Date(data.day).getDate() }}</div>
                <div class="mt-10px">
                  考场数量：{{ getRoomCount(new Date(data.day).getDate()) }}
                </div>
              </div>
            </template>
            <div style="max-height: 300px; overflow: auto">
              <el-table :data="showRoomList(new Date(data.day).getDate())" border stripe>
                <el-table-column prop="placeName" label="考场名称" width="120px" />
                <el-table-column
                  :prop="examType == 1 ? 'theoryExamAddress' : 'practiceExamAddress'"
                  label="考场地址"
                />
              </el-table>
            </div>
          </el-popover>
        </template>
      </el-calendar>
    </el-tabs>
  </div>
</template>

<script setup name="Calendar">
import { searchTestroom } from '@/api/uav/testRoom'

const examType = ref(1)

const roomList = ref([])

onMounted(() => {
  getRoomList()
})

function getRoomList() {
  searchTestroom({
    pageNum: -1,
    pageSize: -1
  }).then((res) => {
    roomList.value = res.list
  })
}

function getRoomCount(date) {
  return roomList.value.filter((item) => {
    const pro = {
      1: 'theoryExamDate',
      2: 'practiceExamDate'
    }[examType.value]
    return item[pro].split(',').includes(date + '')
  }).length
}

function showRoomList(date) {
  return roomList.value.filter((item) => {
    const pro = {
      1: 'theoryExamDate',
      2: 'practiceExamDate'
    }[examType.value]
    return item[pro].split(',').includes(date + '')
  })
}
</script>

<style lang="scss" scoped></style>
