<template>
  <div class="collapse-record-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="(item, index) in quarterRecords" :key="index" :name="index">
        <template #title>
          <div class="quarter-title">
            <div class="quarter-index">第{{ numberToChinese(index + 1) }}季度</div>
            <div
              >共 <span class="record-num">{{ item.warnCount }}</span> 条</div
            >
          </div>
        </template>
        <div v-if="item.warnCount === 0" class="empty-style">
          <img class="empty-img" src="@/assets/images/empty@1X.png" alt="" />
          <span>暂无数据</span>
        </div>
        <RecordItem
          v-for="(record, subIndex) in item.warnRecord"
          :key="subIndex"
          :img-url="weatherDisasterDic.find((item) => item.itemCode === record.disasterType)?.imageUrl"
          :disasterType="weatherDisasterDic.find((item) => item.itemCode === record.disasterType)?.itemValue"
          :warnTime="record.warnTime"
          :source="record.source"
          :content="record.content"
        />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { ElCollapse, ElCollapseItem } from 'element-plus';
  import { numberToChinese } from '@/utils/number-to-chinese';
  import RecordItem from './RecordItem.vue';
  import { SysDictDataDetail } from '@/api/dict';
  import { DisasterWarningRecordsRes } from '@/api/disaster-overview';

  defineProps<{
    quarterRecords: DisasterWarningRecordsRes[];
    weatherDisasterDic: SysDictDataDetail[];
  }>();

  const activeName = ref('');
</script>

<style lang="scss" scoped>
  .collapse-record-container {
    width: 100%;
    height: 100%;
  }

  .empty-style {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.5);

    .empty-img {
      width: 100%;
      object-fit: contain;
    }
  }

  :deep(.el-collapse) {
    --el-collapse-border-color: transparent !important;

    .el-collapse-item {
      margin-bottom: 10px;
    }

    .el-collapse-item__header {
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.88);
      background-color: rgba($primary-color, 0.1);
      padding: 0 16px;
      border-radius: 4px;

      .quarter-title {
        display: flex;
        align-items: center;

        .quarter-index {
          margin-right: 48px;
        }

        .record-num {
          color: #1777ff;
        }
      }
    }

    .el-collapse-item__content {
      padding: 15px 0 0 0;
    }
  }
</style>
