<template>
  <div class="emergency-plan-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">应急预案</span>
    </div>
    <div class="container-plan" v-loading="loading">
      <div class="plan-tabs">
        <div
          class="plan-tab"
          :class="{ 'active-tab': item.planType === activeTab }"
          v-for="item in emergencyPlanList"
          :key="item.planType"
          @click="handleChangeTab(item.planType)"
        >
          {{ getPlanType(item.planType) }}({{ item.count }})
        </div>
      </div>
      <div class="plan-list">
        <div v-if="activePlanDetailList.length === 0" class="plan-list-no-data">
          <span>暂无应急预案</span>
        </div>
        <div class="plan-item" v-for="item in activePlanDetailList" :key="item.id" @click="handleJumpToDetail(item.id)">
          <span class="plan-title" :title="item.planName">{{ item.planName }}</span>
          <span class="plan-dept" :title="item.deptName">{{ item.deptName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { useEmergencyPlanHook } from '@/views/emergency/emergency-plan/src/hook';
  import { PlanInfoList, PlanDetail, getOverviewEmergencyPlan } from '@/api/emergency-overview';

  const { getPlanTypeDict, getPlanType } = useEmergencyPlanHook();

  const router = useRouter();
  const loading = ref(true);

  const emergencyPlanList = ref<PlanInfoList[]>([]);
  const activeTab = ref('');
  const activePlanDetailList = ref<PlanDetail[]>([]);

  const handleChangeTab = (tabName: string) => {
    activeTab.value = tabName;
  };

  const handleJumpToDetail = (id: number | undefined) => {
    router.push({
      path: '/emergency-management/emergency-plan/plan-management-detail',
      query: {
        id: id,
        type: 'view',
      },
    });
  };

  watch(
    () => activeTab.value,
    () => {
      activePlanDetailList.value =
        emergencyPlanList.value.find((item) => item.planType === activeTab.value)?.planDetailList || [];
    },
    { immediate: true },
  );

  onMounted(() => {
    getPlanTypeDict();
    getOverviewEmergencyPlan().then((res) => {
      emergencyPlanList.value = res.planInfoList;
      activeTab.value = emergencyPlanList.value[0].planType;
      loading.value = false;
    });
  });
</script>

<style scoped lang="scss">
  .container-title {
    height: 24px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #000000;

    .line {
      width: 3px;
      height: 16px;
      background: #1777ff;
      margin-right: 10px;
    }

    .title {
      margin-right: 12px;
    }
  }

  .emergency-plan-container {
    padding: 10px 0;

    .container-plan {
      width: 100%;
      height: calc(100% - 34px);
      margin-top: 20px;
    }

    .plan-tabs {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);

      .plan-tab {
        cursor: pointer;
        padding: 0 10px;
        position: relative;
      }

      .plan-tab:hover {
        color: #1890ff;
      }

      .active-tab {
        color: #1890ff;
        font-weight: 500;
      }

      .active-tab::after {
        content: '';
        display: block;
        width: 28px;
        height: 2px;
        background-color: #1777ff;
        border-radius: 2px;
        position: absolute;
        left: 50%;
        margin-top: 5px;
        transform: translateX(-50%);
      }
    }

    .plan-list {
      width: 100%;
      height: calc(100% - 54px);
      margin-top: 25px;
      padding: 0 16px;
      overflow-y: auto;

      .plan-item {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ededed;
        display: flex;
        justify-content: space-between;
        cursor: pointer;

        .plan-title {
          width: 70%;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 10px;
        }

        .plan-dept {
          max-width: 30%;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .plan-item:hover {
        .plan-title,
        .plan-dept {
          color: #1890ff;
        }
      }

      .plan-item:last-child {
        margin-bottom: 0;
      }
    }

    .plan-list-no-data {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #666666;
    }
  }
</style>
