<template>
  <!-- 团队权限管理 -->
  <div class="auth-management">
    <main-page
      left-arrow
      @click-left="$router.push('/team/team-management')"
    >
      <member-selector
        :show.sync="showMemberSelector"
        :show-team="true"
        :multiple="multiple"
        :title="selectorTitle"
        :checked-member-id.sync="selectedLeaderId"
        @confirm="confirm"
      ></member-selector>
      <div class="px-4 pt-14">
        <div class="bg-white rounded px-4">
          <div class="title py-1.5 text-sm text-text-secondary">权限范围</div>
          <div class="content py-3 text-text-primary">
            <div class="">1.可以添加、管理部门</div>
            <div class="">2.可以添加、删除部门成员</div>
          </div>
        </div>
        <!-- 负责人 -->
        <div class="text-xs text-text-secondary mt-4">负责人</div>
        <div v-if="leaderList.length > 0">
          <div
            v-for="l in leaderList"
            :key="l.id"
            class="flex items-center py-2"
          >
            <app-icon
              icon-name="avator"
              class-name="h-9 w-9 flex-shrink-0"
            ></app-icon>
            <div class="name truncate ml-3">{{l.name}}</div>
          </div>
        </div>
        <div v-else>
          暂无负责人
        </div>
        <!-- 管理员 -->
        <div class="text-xs text-text-secondary mt-2">管理员</div>
        <!-- 没有管理员 -->
        <div
          v-if="adminList.length === 0"
          class="text-text-secondary text-center text-sm pt-2"
        >
          暂无管理员
        </div>
        <div v-else>
          <div
            v-for="a in adminList"
            :key="a.id"
            class="flex items-center py-2"
          >
            <app-icon
              icon-name="avator"
              class-name="h-9 w-9 flex-shrink-0"
            ></app-icon>
            <div class="name truncate mx-3">{{ a.name }}</div>
            <app-icon
              icon-name="minus-round"
              class-name="h-6 w-6 flex-shrink-0 ml-auto"
              @click="removeManager(a.id)"
            ></app-icon>
          </div>
        </div>
        <c-button type="text" class="mt-4" @click="addManager">
          <template slot="icon">
            <app-icon
              type="png"
              icon-name="plus"
              class-name="w-6 h-6"
            ></app-icon>
          </template>
          添加管理员
        </c-button>
      </div>
    </main-page>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {LocalStoreEnt, Staff} from '@/Interface'
import { Role } from '@/service/moudles/service.dto'

export default Vue.extend({
  name: 'AuthManagement',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'member-selector': () => import('@/views/team/components/member-selector.vue')
  },
  data() {
    return {
      showMemberSelector: false,
      selectedLeaderId: [] as string[],
      loading: false,
      entInfo: {} as LocalStoreEnt,
      leaderList: [] as Staff[],
      adminList: [] as Staff[],
      multiple: false,
      selectorTitle: ''
    }
  },
  mounted() {
    this.entInfo = JSON.parse(localStorage.getItem('ENT_INFO') as string)
    this.getSub()
  },
  methods: {
    // 添加管理员
    confirm(arr: string[]) {
      if (arr.length === 0) return
      this.changeRole(arr[0], 1, 'add')
    },
    changeRole(id: string, role: number, action: string) {
      this.loading=true
      return this.$service.staff.changeRole({
        entId: this.entInfo.id,
        role: role,
        id
      }).then((res: any) => {
        const {data} = res
        this.loading=false
        if (data.code === this.$global.success) {
          this.$toast(action === 'remove' ? '删除成功' : '添加成功')
          // this.getSub()
          this.$router.push('/team/team-management')
        } else {
          this.$toast(data.msg)
        }
      }).catch(() =>this.loading=false)
    },
    getSub() {
      this.loading = true
      const { id, rootDepId } = this.entInfo
      this.$service.department.getSub({
        entId: id,
        parentId: rootDepId,
        hasStaff: true,
        isDirect: false
      }).then((res: any) => {
        const {data} = res
        this.loading = false
        if (data.code === this.$global.success) {
          this.leaderList = data.data.staffList.filter((s: Staff) => s.role === Role.LEADER)
          this.adminList = data.data.staffList.filter((s: Staff) => s.role === Role.SUPER_ADMIN)
        } else {
          this.$toast(data.msg)
        }
      }).catch(() => this.loading = false)
    },
    removeManager(id: string) {
      // this.list = this.list.filter(item => item.id !== id)
      this.loading = true
      this.changeRole(id, 3, 'remove')
    },
    addManager() {
      this.selectedLeaderId = []
      this.adminList.length && this.adminList.forEach((a: Staff) => {
        this.selectedLeaderId.push(a.id)
      })
      this.showMemberSelector = true
      this.selectorTitle = '添加管理员'
      this.multiple = false
    }
  }
})
</script>

<style lang="less">

</style>
