<template>
  <div class="collapse-record-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="第一季度" name="1">
        <RecordItem :data="data1" />
      </el-collapse-item>
      <el-collapse-item title="第二季度" name="2">
        <RecordItem :data="data2" />
      </el-collapse-item>
      <el-collapse-item title="第三季度" name="3">
        <RecordItem :data="data3" />
      </el-collapse-item>
      <el-collapse-item title="第四季度" name="4">
        <RecordItem :data="data4" />
      </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([]);
  const data2 = ref([
    {
      id: 1,
      title: 'title-2-quarter-1',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2-1',
    },
    {
      id: 2,
      title: 'title-2-quarter-2',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-2-2',
    },
  ]);
  const data3 = ref([
    {
      id: 3,
      title: 'title-3-quarter-1',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-3-1',
    },
    {
      id: 4,
      title: 'title-3-quarter-2',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-3-2',
    },
    {
      id: 5,
      title: 'title-3-quarter-3',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-3-3',
    },
  ]);
  const data4 = ref([
    {
      id: 6,
      title: 'title-4-quarter-1',
      time: '2017-10-31 23:12:00',
      department: 'XXX-部门-4-1',
    },
  ]);
</script>

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