<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">考场数量：{{ new Date(data.day).getDate() % 5 }}</div>
              </div>
            </template>
            <el-table :data="roomList" border stripe>
              <el-table-column prop="name" label="考场名称" width="120px" />
              <el-table-column prop="address" label="考场地址" />
            </el-table>
          </el-popover>
        </template>
      </el-calendar>
    </el-tabs>
  </div>
</template>

<script setup name="Calendar">
const examType = ref(1)

const roomList = ref([
  {
    name: '合肥瑶海长安考场',
    address: '合肥瑶海大道100号'
  }
])
</script>

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