<template>
  <!-- 所有成员 -->
  <div class="team-frame">
    <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
          :tree-data="team"
          @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.go(-1)">确定</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>
  </div>
</template>

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

export default Vue.extend({
  name: 'TeamFrame',
  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')
  },
  data() {
    return {
      title: '导航',
      team,
      contacts,
      checkedMemberId: [],
      showRadio: false
    }
  },
  created() {
    // console.log(Mock, 'mock')
    this.showRadio = this.$route.query.transfer === '1'
  },
  methods: {
    clickMember(member: Member) {
      this.$router.push({
        path: '/schedule/schedule-home',
        query: {
          member: JSON.stringify(member)
        }
      })
    },
    clickItem(val: Member) {
      // console.log(val)
      if (this.showRadio) {
        this.$router.push({
          path: `/schedule/team/${val.id}`,
          query: {
            transfer: '1'
          }
        })
        return
      }
      this.$router.push(`/schedule/team/${val.id}`)
    }
  }
})
</script>

<style lang="less">

</style>
