<template>
  <!-- 选择部门 -->
  <van-overlay :show="show" z-index="3000" :lock-scroll="false">
    <div class="select-team w-screen h-screen overflow-auto">
      <main-page
        title="所属团队"
        left-arrow
        :loading="loading"
        @click-left="goBack"
      >
        <div class="px-4 pt-14 pb-16">
          <!-- 顶部 -->
          <team-tree
            :teams="teams"
            @click-child="clickItem"
            @click-bread="goPre"
          />
          <!-- 部门列表 -->
          <div class="list mt-1.5">
            <div
              v-for="t in depList"
              :key="t.id"
              class="flex items-center"
            >
              <div
                class="content flex-1 flex items-center mr-4"
                @click="selectTeam(t)"
              >
                <div class="radio-wrapper flex-shrink-0">
                  <app-icon
                    v-if="showChecked(t)"
                    icon-name="radio-checked"
                    class-name="w-4 h-4"
                  />
                  <app-icon
                    v-else
                    icon-name="radio"
                    class-name="w-4 h-4"
                  />
                </div>
                <div class="title flex-1 truncate py-3 ml-6">
                  {{ t.name }}{{ t.staffNum ? ` (${t.staffNum}) ` : '' }}
                </div>
              </div>
              <div
                v-if="t.hasSubDep"
                class="flex-shrink-0 flex items-center text-color-primary py-3"
                @click="goNext(t)"
              >
                <app-icon
                  icon-name="tree"
                  class-name="h-5 w-5 mr-2.5"
                />
                下一级
              </div>
            </div>
          </div>
          <div
            class="action fixed bottom-0 left-0 w-full px-4 py-2 z-10 bg-common-bg"
            @click="confirm"
          >
            <c-button round>确定</c-button>
          </div>
        </div>
      </main-page>
    </div>
  </van-overlay>
</template>

<script lang="ts">
import Vue, {PropType} from 'vue'
import {Department} from '@/Interface'
import { Overlay } from 'vant'
Vue.use(Overlay)

export default Vue.extend({
  name: 'DepSelector',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'team-tree': () => import('@/views/team/components/team-tree.vue')
  },
  props: {
    show: Boolean,
    // dep: Object as PropType<Department>,
    selected: String,
    entId: String
  },
  data() {
    // const selectedIds: Array<Department> = []}
    return {
      checked: '',
      loading: false,
      depId: '-1',
      currentDep: {} as Department,
      teams: [{
        name: '首页',
        id: '-1'
      }] as Department[],
      depList: [] as Department[]
    }
  },
  created() {
    // const entInfo = JSON.parse(localStorage.getItem("ENT_INFO") as string)
    // this.depId = entInfo.rootDepId
    // this.entId = entInfo.id
    this.getSub()
  },
  methods: {
    // 点击面包屑部门
    clickItem(val: Department) {
      this.depId = val.id
      this.getSub()
    },
    // 点击面包屑上一级部门
    goPre(dep: Department) {
      this.depId = dep.id
      this.getSub()
    },
    showChecked (dep: Department): boolean {
      return this.checked === dep.id
    },
    goBack() {
      this.$emit('update:show', false)
    },
    getSub() {
      this.loading = true
      let depId = ''
      if (this.depId === '-1') {
        depId = JSON.parse(localStorage.getItem('ENT_INFO') as string).rootDepId
      } else {
        depId = this.depId
      }
      return this.$service.department.getSub({
        entId: this.entId,
        parentId: depId
      }).then((res: any) => {
        const {data} = res
        this.loading = false
        if (data.code === this.$global.success) {
          this.currentDep = data.data.dep
          if (this.depId === '-1') {
            const dep = {...data.data.dep, hasSubDep: true}
            this.depList = [dep]
            this.teams = this.teams.slice(0, 1)
          } else {
            const index = this.teams.findIndex(d => d.id === this.depId)
            this.depList = data.data.subDepList || []
            if (index < 0) {
              this.teams.push(data.data.dep)
            } else {
              this.teams = this.teams.slice(0, index + 1)
            }
          }
          this.$emit('update:dep', this.currentDep)
        }
      }).catch(()=>{
        this.loading=false
      })
    },
    // 下一级
    goNext(team: Department) {
      this.depId = team.id
      this.checked = ''
      this.getSub()
    },
    // 选择
    selectTeam(team: Department) {
      if (this.checked !== team.id) {
        this.checked = team.id
        return
      }
    },
    // 确认选择
    confirm() {
      if (this.checked === '') {
        this.$toast('请选择部门')
        return
      }
      this.$emit('update:selected', this.checked)
      this.$emit('update:show', false)
    }
  },
  watch: {
    show(val:boolean) {
      if (val) {
        this.checked = this.selected
      } else {
        this.checked = ''
      }
    }
  }
})
</script>

<style lang="less">

</style>
