<template>
  <div>
    <el-switch
      v-model="isOpen"
      active-text="级联"
      inactive-text=""
      v-if="deptTrees && deptTrees.length"
    />

    <br />
    <br />

    <el-input
      v-if="filterBol"
      placeholder="输入关键字进行过滤"
      v-model="filterText"
    />

    <br />
    <br />

    <el-tree
      ref="deptTree"
      v-loading="loading"
      :data="deptTrees"
      show-checkbox
      :check-strictly="!isOpen"
      node-key="key"
      :filter-node-method="filterNode"
      :props="{ children: 'children', label: 'title' }"
    />

    <br />
    <el-button
      v-if="deptTrees && deptTrees.length > 0"
      v-permission="['role:dept:assign']"
      :disabled="!roleId"
      type="primary"
      @click="saveRoleDepts"
    >
      {{ $t('ec.dialog.save') }}
    </el-button>
  </div>
</template>

<script>
import { findTreeByAppTenant as findDeptTreeByAppTenant } from 'ecip-web/api/vue/dept/sysrDeptApi'
import { getRoleDept, assignRoleDept } from 'ecip-web/api/vue/role/sysrRoleApi'
import { superAdmin } from '@/settings'
import permissionMixin from 'ecip-web/utils/permission-mixin'

export default {
  name: 'DeptAuthTab',
  mixins: [permissionMixin],
  props: {
    roleId: {
      type: String,
      required: false
    },
    filterBol: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      filterText: '',
      isOpen: false,
      loading: false,
      emptyText: this.$t('ec.table.loading'),
      deptTrees: [], // 组织树
      roleDepts: [] // 角色的组织权限
    }
  },
  /* computed: {
    conditionChange() {
      const { appId, tenantId } = this
      return { appId, tenantId }
    }
  },*/
  watch: {
    /*  conditionChange: {
      handler(val) {
        this.getDeptTrees(this.appId, this.tenantId)
      },
      immediate: true
    },*/
    roleId: {
      handler(val) {
        if (val) {
          this.getRoleDept(val)
        }
      },
      immediate: true
    },
    filterText(val) {
      this.$refs.deptTree.filter(val)
    }
  },
  methods: {
    init(appId, tenantId) {
      this.getDeptTrees(appId, tenantId)
    },

    filterNode(value, data) {
      console.log('data', data)
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    async getDeptTrees(appId, tenantId) {
      if (superAdmin && !appId) {
        this.deptTrees = []
        return
      }
      try {
        this.loading = true
        const { data } = await findDeptTreeByAppTenant(appId, tenantId)
        this.deptTrees = data
      } finally {
        this.loading = false
      }
    },
    async getRoleDept(roleId) {
      this.loading = true
      const { data } = await getRoleDept(roleId)
      // this.roleDepts = data
      this.$refs.deptTree.setCheckedKeys(data)
      this.loading = false
    },
    async saveRoleDepts() {
      const checkedNodes = this.$refs.deptTree.getCheckedNodes()
      const checkedIds = []
      if (checkedNodes) {
        checkedNodes.forEach((node) => {
          checkedIds.push(node.key)
        })
      }
      const saveLoading = this.$loading({
        lock: true,
        spinner: 'el-icon-loading'
      })
      try {
        await assignRoleDept(this.roleId, checkedIds)
      } finally {
        saveLoading.close()
        this.$notify.success(this.$t('ec.role.deptAuthSuccess'))
      }
    }
  }
}
</script>

<style scoped>
</style>
