<template>
  <!-- 团队详情 -->
  <main-page left-arrow @click-left="$router.go(-1)">
    <template slot="right">
      <app-icon
        type="png"
        class-name="w-6.5 h-6.5"
        :path="require('@/assets/icons/search.png')"
      />
    </template>
    <div class="px-4 pt-14">
      <!-- 团队架构详情 -->
      <team-tree
        isDetail
        :tree-data="[currentTeam]"
        :pre-team="parentTeam.name"
        @click-child="clickItem"
      />
      <!-- 通讯录 -->
      <div class="pb-16">
        <div class="text-text-secondary py-1">成员</div>
        <team-contacts
          :radio="showRadio"
          :checked.sync="checkedMemberId"
          :contacts="contacts"
          @click-member="clickMember"
        />
      </div>
      <!-- 底部操作 -->
      <!-- <div class="py-2 px-4 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
        <template v-if="showRadio">
            <c-button round @click="$router.push('/team/team-management')">确定</c-button>
          </template>
          <template v-else>
            <div class="grid grid-cols-3 gap-2.5">
              <c-button round @click="$router.push('/team/add-member')">添加成员</c-button>
              <c-button round @click="$router.push('/team/add-department')">添加部门</c-button>
              <c-button round @click="$router.push('/team/department-management')">部门设置</c-button>
            </div>
          </template>
      </div> -->
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import { team, contacts } from '@/DTO'
import { Member } from '@/DTO'

export default Vue.extend({
  name: 'TeamDetail',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'team-tree': () => import('@/views/team/components/team-tree.vue'),
    'team-contacts': () => import('@/views/team/components/team-contacts.vue'),
    'c-button': () => import('@/components/common/c-button.vue')
  },
  created() {
    this.showRadio = this.$route.query.transfer === '1'
  },
  data() {
    let flatTeams: Array<Member> = []
    let currentTeam: Member = {
      id: 0,
      name: ''
    }
    return {
      title: '导航',
      team,
      contacts,
      parentTeam: {},
      currentTeam,
      flatTeams,
      checkedMemberId: [],
      showRadio: false
      // newTeams: []
    }
  },
  methods: {
    getFlatTeams(arr: Array<Member>) {
      let newArr: Array<Member> = []
      for (let i=0; i<arr.length; i++) {
        newArr.push(arr[i])
        if (arr[i].children?.length) {
          newArr = newArr.concat(this.getFlatTeams(arr[i].children as Array<Member>))
        }
      }
      return newArr
    },
    clickItem(val: Member) {
      this.$router.push(`/schedule/team/${val.id}`)
    },
    addDepartment() {
      console.log('添加部门')
    },
    clickMember(member: Member) {
      this.$router.push({
        path: '/schedule/schedule-home',
        query: {
          member: JSON.stringify(member)
        }
      })
    },
  },
  watch: {
    $route: {
      handler() {
        const id = parseInt(this.$route.params.id)
        this.flatTeams = this.getFlatTeams(this.team)
        this.currentTeam = this.flatTeams.find(team => team.id === id) as Member
        const parentId = this.currentTeam.parentId
        this.parentTeam = this.flatTeams.find(team => team.id === parentId) as Member
      },
      immediate: true
    }
  }
})
</script>

<style lang="less">

</style>
