<template>
  <!-- 选择成员 -->
  <van-overlay :show="show" z-index="2000" :lock-scroll="false">
    <div class="select-team w-screen h-screen overflow-auto" id="contact-selector">
      <main-page
        main-bg="bg-white"
        header-bg="bg-white"
        :title="title"
        :loading="loading"
        left-arrow
        @click-left="goBack"
      >
        <div class="px-4 pt-14">
          <!-- <div class="py-2">{{currentDep.name}}</div> -->
          <!-- 通讯录 -->
          <div class="py-2 font-medium">{{contactTitle ? contactTitle : dep.name}}</div>
          <div class="pb-16">
            <!-- <div class="text-text-secondary py-1">成员</div> -->
            <team-contacts
              container-id="contact-selector"
              :leader="leader"
              :radio="true"
              :multiple="multiple"
              :checked.sync="checkedMember"
              :contact-list="contacts"
            />
          </div>
          <!-- 底部操作 -->
          <div class="py-2 px-4 bg-white w-screen fixed bottom-0 left-0 z-30">
            <c-button round @click="confirm">确定</c-button>
          </div>
        </div>
      </main-page>
    </div>
  </van-overlay>
</template>

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

interface Leader {
  list: Staff[],
  title?: string
}

export default Vue.extend({
  name: 'ContactSelector',
  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')
  },
  props: {
    show: Boolean,
    entId: String,
    dep: Object,
    multiple: {
      type: Boolean,
      default: false
    },
    checkedMemberId: {
      type: Array as PropType<Array<String>>
    },
    title: {
      type: String,
      default: '团队成员'
    },
    contacts: {
      type: Array,
      default() {
        return []
      }
    },
    leader: {
      type: Object as PropType<Leader>,
      default() {
        return {
          list: []
        }
      }
    },
    action: String,
    contactTitle: String
  },
  data() {
    let changedVal: Array<string> = []
    return {
      loading: false,
      changed: false,
      changedVal,
      checkedMember: [] as string[]
    }
  },
  watch: {
    checkedMemberId(val: string[]) {
      this.checkedMember = val
    }
  },
  methods: {
    // 确认选择
    confirm() {
      if (typeof this.checkedMember === 'undefined' || this.checkedMember.length === 0) {
        this.$toast('请选择成员')
        return
      }
      const data = {
        entId: this.entId,
        depId: '',
        ids: this.checkedMember as Array<string>
      }
      if (this.action === 'remove') {
        const rootDepId = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').rootDepId
        data.depId = rootDepId
        this.$dialog.confirm({
          title: '提示',
          message: '移出成员后，将移出对应的部门群，若是主管，则对应部门群群主将随机抽取群管理员或群内成员临时担任，确定移出吗？'
          // confirmButtonText: '解散'
        }).then(() => {
          this.loading=true
          this.$service.staff.changeDep(data).then((res:any) => {
            this.loading=false
            const {data} = res
            if (data.code===this.$global.success) {
              if (this.action === 'remove') {
                this.$toast('移除成功')
                this.$emit('update:show', false)
                this.$emit('update:checkedMemberId', this.checkedMember)
                const usrId = JSON.parse(localStorage.getItem('USR_INFO') as string).id
                if (this.checkedMember.indexOf(usrId) > -1) {
                  this.getStaffInfo(usrId)
                }
                this.checkedMember=[]
              }
            } else {
              this.$toast(data.msg)
            }
          })
        }).catch(()=>{})
      }
    },
    getStaffInfo(id: string) {
      this.$service.staff.getInfo({id})
        .then((res: any) => {
          const {data} = res
          if (data.code === this.$global.success) {
            localStorage.setItem('USR_INFO', JSON.stringify(data.data))
          }
        })
    },
    goBack(){
      this.$emit('update:show', false)
    }
  }
})
</script>

<style lang="less">

</style>