<template>
  <div class="leader-team-bar">
    <div class="leader-team-bar__decoration"></div>

    <div class="leader-team-bar__teams">
      <el-scrollbar>
        <div class="leader-team-bar__add-team" v-if="leaderTeamTree.teamId < 0" @click="showAddTeam">
          <div class="leader-team-bar__add-team__icon">
            <img src="@/assets/icons/nine-square-grid/add.png" />
          </div>
          <div>添加一级队伍</div>
        </div>

        <el-collapse v-model="activeTeam" v-else>
          <LeaderTeam :teamData="leaderTeamTree" :parentId="leaderTeamTree.teamId" @expand="expandCollapse" />
        </el-collapse>
      </el-scrollbar>
    </div>
  </div>

  <AddTeam ref="addTeamRef" @emit-team-name="handleCreateTeam" />
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { storeToRefs } from 'pinia';
  import { ElScrollbar, ElCollapse } from 'element-plus';
  import LeaderTeam from './LeaderTeam.vue';
  import AddTeam from './components/AddTeam.vue';
  import useTeamStore from '../store/userTeam';

  const activeTeam = ref<number[]>([]);
  const addTeamRef = ref<InstanceType<typeof AddTeam>>();

  const { leaderTeamTree } = storeToRefs(useTeamStore());
  const { getLeaderTeams, createFirstLevelTeam } = useTeamStore();

  function expandCollapse(collapseId: number) {
    activeTeam.value.push(collapseId);
  }

  function showAddTeam() {
    addTeamRef.value?.dialogShow();
  }

  async function handleCreateTeam(teamName: string) {
    await createFirstLevelTeam(teamName);
    getLeaderTeams();
  }

  onMounted(async () => {
    await getLeaderTeams();
    activeTeam.value.push(leaderTeamTree.value.teamId); // 默认展开一级队伍
  });
</script>

<style lang="scss" scoped>
  .leader-team-bar {
    height: 100%;
    background: #f4f7ff;

    .leader-team-bar__decoration {
      height: 5px;
      margin-bottom: 20px;
      border-radius: 8px 8px 0 0;
      background-color: #1777ff;
    }

    .leader-team-bar__teams {
      height: calc(100% - 25px);
      color: #333333;
      padding: 0px 16px;
      padding-right: 4px;

      .leader-team-bar__add-team {
        height: 34px;
        width: 100cpx;
        display: flex;
        margin-right: 16px;
        cursor: pointer;

        &__icon {
          margin-right: 12px;
          position: relative;

          img {
            height: 24px;
            width: 24px;
          }

          &::after {
            content: '+';
            position: absolute;
            top: -4px;
            left: 0;
            right: 0;
            font-size: 20px;
            font-weight: 500;
            color: #1777ff;
            text-align: center;
          }
        }
      }
    }
  }

  :deep(.el-collapse) {
    border: 0px;
  }
  :deep(.el-collapse-item__arrow) {
    margin-right: 12px;
    color: #333333;
  }

  :deep(.el-collapse-item__wrap) {
    background: transparent;
    border-bottom: transparent;
  }
  :deep(.el-collapse-item__content) {
    padding: 0px;
    margin-right: 10px;
  }
  :deep(.el-collapse-item__header) {
    background: #f4f7ff;
    border: 0px;
    flex-direction: row-reverse;
    padding-left: 12px;
    margin-right: 10px;
  }
</style>
