<template>
  <!-- 团队详情 -->
  <main-page
    main-bg="bg-white"
    header-bg="bg-white"
    left-arrow
    :loading="loading"
    @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
        is-detail
        :tree-data="[currentTeam]"
        :pre-team="parentTeam.name"
        @click-child="clickItem"
      />
      <!-- 显示成员是否包含子部门成员 -->
      <switch-cell
        title="部门包含子部门成员"
        :checked.sync="ifContainChildDep"
      />
      <!-- 通讯录 -->
      <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-white 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 v-if="getUserInfo.role === 3" 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="setDepartment">部门设置</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'
import { getContacts } from '@/util/Contact'
import { openCompanyUserInfo, appNavBack, getUserInfo } from '@/util/Bridge'

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'),
    'switch-cell': () => import('@/components/common/switch-cell.vue')
  },
  data() {
    const currentTeam: Member = {
      id: 0,
      name: ''
    }
    return {
      title: '导航',
      parentId: '',
      parentDepId: '',
      entId: '',
      team,
      contacts: {},
      parentTeam: {},
      currentTeam,
      checkedMemberId: [],
      showRadio: false,
      ifContainChildDep: true,
      loading: false,
      multiple: false
    }
  },
  computed: {
    getUserInfo() {
      return JSON.parse(getUserInfo())
    }
  },
  watch: {
    $route: {
      async handler() {
        const id = this.$route.params.id
        this.getStaff(id)
      },
      immediate: false
    }
  },
  created() {
    this.showRadio = this.$route.query.showRadio === '1'
    this.multiple = this.$route.query.multiple === '2'
    this.parentId = this.$route.params.id
    this.entId = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').id
    this.getStaff(this.parentId)
  },
  methods: {
    appNavBack,
    // 获取成员
    getStaff(id: string) {
      this.loading = true
      this.$service.department.getSub({
        parentId: id,
        entId: this.entId,
        hasStaff: true,
        isDirect: !this.ifContainChildDep
      }).then((res: any) => {
        this.loading = false
        const { data } = res
        if (data.code === this.$global.success) {
          this.contacts = getContacts(data.data.staffList || [])
          this.currentTeam = data.data.dep
          this.currentTeam.children = data.data.subDepList || []
          this.parentDepId = data.data.dep.parentId
          this.getDepInfo(this.parentDepId)
        } else {
          this.$toast(data.msg)
        }
      })
    },
    getDepInfo(id: string) {
      this.loading = true
      this.$service.department.getDep({
        entId: this.entId,
        id: id
      }).then((res: any) => {
        const { data } = res
        this.loading = false
        if (data.code === this.$global.success) {
          this.parentTeam = res.data.data
          res.data.data
        } else {
          this.$toast(data.msg)
        }
      })
    },
    clickItem(val: Member) {
      this.$router.push(`/team/team/${val.id}`)
    },
    addDepartment() {
      console.log('添加部门')
    },
    clickMember(member: Member) {
      openCompanyUserInfo(String(member.id))
      // this.$router.push(`/team/team-member/${member.id}`)
    },
    setDepartment() {
      const id = this.currentTeam.id
      this.$router.push(`/team/department-management/${id}`)
    }
  }
})
</script>

<style lang="less">

</style>
