<template>
  <!-- 选择部门 -->
  <div class="select-team">
    <main-page
      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')"
          @click="$router.push('/team/search-team')"
        />
      </template>
      <div class="px-4 pt-14 pb-16">
        <!-- 顶部 -->
        <div class="bread">
          <template v-if="currentDep.parentId === '-1'">
            <div class="font-medium py-3.5">{{ entName }}</div>
          </template>
          <template v-else>
            <div class="flex items-center">
              <div class="text-text-secondary font-medium py-3" @click="goPre">所有部门</div>
              <div class="text-text-secondary py-3 text-xs mx-2">></div>
              <div class="font-medium py-3">{{ currentDep.name }}</div>
            </div>

          </template>
        </div>
        <!-- 部门列表 -->
        <div class="list mt-1.5">
          <div
            v-for="t in currentDep.children"
            :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="checked === t.id"
                  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.children && t.children.length > 0 ? ` (${t.children.length}) ` : '' }}
              </div>
            </div>
            <div
              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>
</template>

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

export default Vue.extend({
  name: 'SelectTeam',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-button': () => import('@/components/common/c-button.vue')
  },
  beforeRouteEnter(to, from, next) {
    console.log(to, from)
    next((vm: any) => {
      vm.fromPath = from.path
    })
  },
  data() {
    return {
      checked: '',
      fromPath: '',
      loading: false,
      entId: '',
      depId: '',
      currentDep: {} as Department,
      entName: ''
    }
  },
  created() {
    const ent = JSON.parse(localStorage.getItem('ENT_INFO') || '{}')
    this.entId = ent.id
    this.depId = ent.rootDepId
    this.checked = ent.id
    this.getSub()
  },
  methods: {
    getSub() {
      this.loading = true
      this.$service.department.getSub({
        entId: this.entId,
        parentId: this.depId
      }).then((res: any) => {
        const { data } = res
        this.loading = false
        if (data.code === this.$global.success) {
          console.log(data, 'adad')
          this.currentDep = data.data.dep
          if (this.currentDep.parentId === '-1') {
            this.entName = this.currentDep.name
          }
          this.currentDep.children = data.data.subDepList
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 下一级
    goNext(team: Department) {
      console.log(team, 'team')
      // this.currentTeamId = team.id
      this.depId = team.id
      this.getSub()
    },
    // 所有部门
    goPre() {
      this.depId = this.currentDep.parentId
      this.getSub()
    },
    // 选择
    selectTeam(team: Department) {
      if (this.checked === team.id) {
        this.checked = this.currentDep.id
        return
      }
      this.checked = team.id
    },
    // 确认选择
    confirm() {
      console.log(this.checked, 'checked')
      this.$router.push({
        path: this.fromPath,
        query: {
          id: String(this.checked)
        }
      })
    }
  }
})
</script>

<style lang="less">

</style>
