<template>
  <div class="emergency-organization-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">应急架构体系</span>
      <img src="@/assets/svg/tip.svg" alt="" title="滚动缩放查看完整架构" />
    </div>
    <div class="container-chart">
      <OrgChart :treeData="treeData" v-if="treeData.id !== '-1'" />
      <div v-else class="no-data">暂无队伍</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import OrgChart from '@/views/emergency/components/OrgChart.vue';
  import useTeamStore from '@/views/emergency/organization/team-management/store/userTeam';

  const { getLeaderTeams } = useTeamStore();

  type OrganizationTreeType = {
    id: string;
    data: { name: string };
    children?: OrganizationTreeType[];
  };

  const treeData = ref<OrganizationTreeType>({
    id: 'root',
    data: { name: '应急领导小组' },
    children: [
      {
        id: 'group1',
        data: { name: '应急指挥小组' },
      },
      {
        id: 'group2',
        data: { name: '应急响应小组' },
      },
      {
        id: 'group3',
        data: { name: '应急支援小组' },
      },
    ],
  });

  function convertData(leaderTeams): OrganizationTreeType {
    return {
      id: leaderTeams.teamId.toString(),
      data: {
        name: leaderTeams.teamName,
      },
      children: leaderTeams.children?.map((child) => convertData(child)),
    };
  }

  onMounted(async () => {
    const res = await getLeaderTeams();
    treeData.value = convertData(res);
  });
</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-organization-container {
    padding: 10px 0;

    .container-chart {
      width: 100%;
      height: calc(100% - 34px);
      margin: 10px 0;
      padding: 10px;
    }

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