<template>
  <!-- 添加部门 -->
  <main-page
    left-arrow
    :loading="loading"
    @click-left="goBack"
  >
    <member-selector
      :show.sync="showMemberSelector"
      :show-team="true"
      :checked-member-id.sync="selectedLeaderId"
    />
    <dep-selector
      :ent-id="entId"
      :show.sync="showDepSelector"
      :selected.sync="selectedDepId"
    />
    <div class="pt-14 px-4">
      <input-cell
        v-model="name"
        required
        :limit="20"
        label="部门名称"
        placeholder="请输入部门名称"
        error-msg="名称不能为空"
      />
      <group-cell class="mt-4" title="部门主管">
        <c-cell
          dot
          :title="leader.name || '选择主管'"
          @click="selectCharger"
        />
      </group-cell>
      <group-cell class="mt-4" title="上级部门">
        <c-cell
          dot
          :title="parentDep.name"
          @click="selectDep"
        />
      </group-cell>
      <switch-cell class="mt-4" title="创建部门群" :checked.sync="hasGroup"></switch-cell>
      <c-button round class="mt-10" @click="addDepConfirm">
        确定
      </c-button>
    </div>
  </main-page>
</template>

<script lang="ts">

import Vue from 'vue'
import {AddSubDTO} from '@/service/moudles/service.dto'
import { Department, Staff } from '@/Interface'
import { getContacts, trim } from '@/util/Contact'

export default Vue.extend({
  components:{
    'main-page': () => import('@/layout/main-page.vue'),
    'input-cell': () => import('@/components/common/input-cell.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'group-cell': () => import('@/components/common/group-cell.vue'),
    'member-selector': () => import('@/views/team/components/member-selector.vue'),
    'dep-selector': () => import('@/views/team/components/dep-selector.vue'),
    'switch-cell': () => import('@/components/common/switch-cell.vue')
  },
  name: 'AddDepartment',
  beforeRouteEnter(to, from, next) {
    const path = from.path
    next((vm: any) => {
      vm.fromManagement = path === '/team/team-management'
    })
  },
  data() {
    const addDep:AddSubDTO = {
      entId: '',
      leaderId: '',
      name: '',
      parentId: '',
      hasGroup: false,
    }
    return {
      name: '',
      check: false,
      enterpriseInfoObj:{
        data:null as any,
        loading:true as any,
        error:null as any
      },
      hasGroup: false,
      addDep,
      parentDep: {},
      leader: {},
      selectedLeaderId: [] as Array<string>,
      showMemberSelector: false,
      entId: '',
      depTree: {} as Department,
      selectedDepId: '',
      contacts: {},
      loading: false,
      showDepSelector: false,
      fromManagement: false
    }
  },
  created(){
    const entInfo = JSON.parse(localStorage.getItem('ENT_INFO') as string)
    this.entId = entInfo.id
    const leaderId = JSON.parse(localStorage.getItem('USR_INFO') as string)?.id
    this.selectedLeaderId = [leaderId]
    this.getStaffInfo(this.selectedLeaderId[0])
    const depId = this.$route.query.id as string || entInfo.rootDepId
    this.selectedDepId = depId
    this.getDepInfo(depId)
  },
  methods: {
    goBack() {
      // this.$router.replace('/team/team-frame')
      if (this.fromManagement) {
        this.$router.push('/team/team-management')
      } else {
        this.$router.push('/team/team-frame')
      }
    },
    addDepConfirm(){
      if (this.name === '') {
        this.$toast('请输入部门名称')
        return
      }
      const data = {
        entId: this.entId,
        leaderId: (this.leader as Staff).id,
        name: this.name,
        parentId: (this.parentDep as Department).id,
        hasGroup: this.hasGroup
      }
      this.$service.department.addDep(data).then((res: any) => {
        const {data} = res
        if (data.code === this.$global.success) {
          this.$toast('添加成功')
          this.goBack()
        } else {
          this.$toast(data.msg)
        }
      })
    },
    selectCharger() {
      this.showMemberSelector = true
    },
    getStaffInfo(id: string) {
      this.loading = true
      this.$service.staff.getInfo({
        id
      }).then((res: any) => {
        const {data} = res
        this.loading = false
        if (data.code === this.$global.success) {
          this.leader = data.data
        } else {
          this.$toast(data.msg)
        }
      })
    },
    getDepInfo(id: string) {
      this.loading = true
      this.$service.department.getDep({
        entId: this.entId,
        id
      }).then((res: any) => {
        this.loading = false
        const {data} = res
        if (data.code === this.$global.success) {
          this.parentDep = data.data
        } else {
          this.$toast(data.msg)
        }
      })
    },
    getSub(parentId: string) {
      this.loading = true
      this.$service.department.getSub({
        entId: this.entId,
        parentId: parentId
      }).then((res: any) => {
        const {data}=res
        this.loading = false
        if (data.code === this.$global.success) {
          this.depTree = data.data.dep
          this.depTree.children = data.data.subDepList
        } else {
          this.$toast(data.msg)
        }
      })
    },
    selectDep() {
      const parentId = JSON.parse(localStorage.getItem('ENT_INFO') as string).rootDepId
      this.getSub(parentId)
      this.showDepSelector = true
    }
  },
  watch: {
    selectedLeaderId(val) {
      const newLeader = val[0]
      this.getStaffInfo(newLeader)
    },
    selectedDepId(val: string) {
      this.getDepInfo(val)
    }
  }
})
</script>

<style lang="less">

</style>
