<template>
  <div class="task-info-container">
    <section class="task-info">
      <span class="disaster-precaution-container__title">{{ taskName }}</span>
      <el-button type="primary" @click="emit('exportLossDetail')">
        <template #icon>
          <img :src="ExportIcon" />
        </template>
        导出损失明细
      </el-button>
    </section>
    <section class="overview-info" v-if="overviewLossRecordInfo">
      <div class="overview-info__item">
        <header class="overview-info__item-header">
          <div class="overview-info__item-title">
            <img :src="ReportIcon" />
            <span>需上报单位数量</span>
          </div>
          <span>{{ overviewLossRecordInfo.needToReportDeptCount }}</span>
        </header>
        <main class="overview-info__item-main">
          <div class="overview-info__item-main-item">
            <span class="overview-info-title">已上报</span>
            <span class="overview-info-value value--primary">{{ overviewLossRecordInfo.reportedDeptCount }}</span>
          </div>
          <div class="overview-info__item-main-item">
            <span class="overview-info-title">待上报</span>
            <span class="overview-info-value value--doing">{{ overviewLossRecordInfo.waitToReportDeptCount }}</span>
          </div>
          <div class="overview-info__item-main-item">
            <span class="overview-info-title">超期未上报</span>
            <span class="overview-info-value value--done">{{ overviewLossRecordInfo.overdueReportedDeptCount }}</span>
          </div>
        </main>
      </div>
      <div class="overview-info__item">
        <header class="overview-info__item-header">
          <div class="overview-info__item-title">
            <img :src="LossIcon" />
            <span>总灾害损失记录数量</span>
          </div>
          <span>{{ overviewLossRecordInfo.lossRecordCount }}</span>
        </header>
        <main class="overview-info__item-main">
          <div class="overview-info__item-main-item">
            <span class="overview-info-title">已整改</span>
            <span class="overview-info-value value--primary">{{ overviewLossRecordInfo.fixedLossCount }}</span>
          </div>
          <div class="overview-info__item-main-item">
            <span class="overview-info-title">整改中</span>
            <span class="overview-info-value value--doing">{{ overviewLossRecordInfo.fixingLossCount }}</span>
          </div>
          <div class="overview-info__item-main-item">
            <span class="overview-info-title">待整改</span>
            <span class="overview-info-value value--done">{{ overviewLossRecordInfo.waitToFixLossCount }}</span>
          </div>
        </main>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
  import { OverviewLossRecordInfo } from '@/types/disaster-control';
  import ExportIcon from 'assets/svg/export.svg';
  import ReportIcon from '../svg/report.svg';
  import LossIcon from '../svg/loss.svg';
  defineProps<{
    taskName?: string;
    overviewLossRecordInfo?: OverviewLossRecordInfo;
  }>();
  const emit = defineEmits<{
    (e: 'exportLossDetail'): void;
  }>();
</script>

<style lang="scss" scoped>
  @use '@/views/disaster/style/disaster.scss' as *;
  .task-info-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
    padding: 16px 22px;
    background-color: $white-color;
    border-radius: 4px;
  }
  .task-info {
    @include flex-center;
    justify-content: space-between;
    width: 100%;
  }
  .overview-info {
    display: flex;
    gap: 80px;
  }
  .overview-info__item {
    width: 283px;
    height: 116px;
    border-radius: 8px;
    background-color: #f2f8ff;
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 36px;
      padding: 8px 20px 8px 10px;
      background-color: #409eff;
      border-radius: 8px;
      line-height: 36px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.85);
    }
    &-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: calc(100% - 36px);
      padding: 0 20px;
      &-item {
        display: flex;
        flex-direction: column;
      }
    }
    &-title {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }
  $doing-color: #ffaa00;
  $done-color: #ff4d4f;
  .value--primary {
    color: $primary-color;
  }
  .value--doing {
    color: $doing-color;
  }
  .value--done {
    color: $done-color;
  }
  .overview-info-title {
    font-size: 14px;
    color: rgba(102, 102, 102, 0.85);
  }
  .overview-info-value {
    font-size: 20px;
    font-weight: 600;
  }
</style>
