<template>
  <div class="collapse-record-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="2023年" name="1">
        <RecordItem :data="data1" />
      </el-collapse-item>
      <el-collapse-item title="2024年" name="2">
        <RecordItem :data="data2" />
      </el-collapse-item>
      <el-collapse-item title="2025年" name="3">
        <RecordItem :data="data3" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  const activeName = ref('');
  import RecordItem from './RecordItem.vue';
  const data1 = ref([
    {
      id: 1,
      title: 'title-2023-year-1',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2023-1',
    },
  ]);
  const data2 = ref([]);
  const data3 = ref([
    {
      id: 1,
      title: 'title-2025-year-1',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2025-1',
    },
    {
      id: 2,
      title: 'title-2025-year-2',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2025-2',
    },
    {
      id: 3,
      title: 'title-2025-year-3',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2025-3',
    },
    {
      id: 4,
      title: 'title-2025-year-4',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2025-4',
    },
    {
      id: 5,
      title: 'title-2025-year-5',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2025-5',
    },
    {
      id: 6,
      title: 'title-2025-year-6',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2025-6',
    },
    {
      id: 7,
      title: 'title-2025-year-7',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2025-7',
    },
    {
      id: 8,
      title: 'title-2025-year-8',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2025-8',
    },
  ]);
</script>

<style lang="scss" scoped>
  @use '../styles/collapse-record.scss' as *;
</style>
