<template>
  <!-- 团队架构树 -->
  <div class="tree text-text-primary">
    <!-- 显示面包屑 -->
    <div
      class="bread py-3 flex items-center overflow-x-auto"
    >
      <div
        v-for="(d, index) in teams"
        :key="d.id"
        class="pre flex items-center flex-shrink-0"
        :class="index === teams.length - 1 ? 'text-color-primary' : 'text-text-secondary'"
        @click="goPre(d)">
          <div class="flex-shrink-0">{{ d.name }}</div>
          <div v-if="index < teams.length - 1">
            <app-icon
              icon-name="left-arrow"
              class-name="w-3 h-3 transform rotate-180 ml-1 mr-2"
            />
          </div>
        </div>
      <!-- <div class="pre text-text-primary font-medium">{{ member.name }}</div> -->
    </div>
    <!-- 子部门 -->
    <div v-if="(treeData && treeData.length > 0) && showTree" class="children">
      <div
        v-for="(t, tIndex) in treeData"
        :key="t.id"
        class="child-wrapper py-3 relative pl-10"
        @click="clickChild(t, t.name)"
      >
        <!-- 左边框 -->
        <div
          class="left-border w-0.5 bg-border-lighter absolute left-3 top-0"
          :class="tIndex <treeData.length - 1
            ? 'h-full'
            : 'h-1/2'"
        />
        <!-- 左icon -->
        <div class="left absolute z-10 left-6 h-1.5 w-1.5 bg-color-primary rounded-sm top-1/2 transform -translate-y-1/2" />
        <!-- 横线 -->
        <div class="absolute w-3 h-0.5 left-3 bg-border-lighter top-1/2 transform -translate-y-1/2" />
        <!-- 标题 -->
        <div class="title">{{ t.name }} {{ t.staffNum ?  `(${t.staffNum})` : "" }}</div>
        <!-- 右icon -->
        <div
          class="dot absolute right-3 top-1/2 transform -translate-y-1/2"
        >
          <app-icon
            type="png"
            :path="require('@/assets/icons/dot.png')"
            class-name="h-5 w-1"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { Department } from '@/Interface'

export default Vue.extend({
  name: 'TeamTree',
  components: {
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  props: {
    treeData: {
      type: Array,
      default() {
        return []
      }
    },
    teams: {
      type: Array as PropType<Department[]>,
      default() {
        return []
      }
    },
    showTree: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    clickChild(team: Department, parentName: string) {
      this.$emit('click-child', {
        parentName,
        ...team
      })
    },
    goPre(team: Department) {
      this.$emit('click-bread', team)
    },
  }
})
</script>

<style lang="less">

</style>
