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

    <el-tree
      ref="dataruleTree"
      v-loading="loading"
      :data="dataruleTrees"
      show-checkbox
      :check-strictly="!isOpen"
      node-key="key"
      :props="{ children: 'children', label: 'title' }"
    />
    <el-button v-if="dataruleTrees && dataruleTrees.length > 0" v-permission="['role:datarule:assign']" :disabled="!roleId" type="primary" @click="saveRoleDatarule">
      {{ $t('ec.dialog.save') }}
    </el-button>
  </div>
</template>

<script>
import { findTreeByAppTenant as findDataruleTreeByAppTenant } from 'ecip-web/api/vue/resource/sysrDataruleApi'
import { getRoleDatarule, assignRoleDatarule } from 'ecip-web/api/vue/role/sysrRoleApi'
import { superAdmin } from '@/settings'
import permissionMixin from 'ecip-web/utils/permission-mixin'

export default {
  name: 'DataRuleAuthTab',
  mixins: [permissionMixin],
  props: {
    roleId: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      isOpen: false,
      loading: false,
      emptyText: this.$t('ec.table.loading'),
      dataruleTrees: [], // 数据规则
      roleDatarules: [] // 角色的数据权限
    }
  },
  watch: {
    // appId: {
    //   handler(val) {
    //     this.getDataRulesTree(val, this.tenantId)
    //   },
    //   immediate: true
    // },
    // tenantId: {
    //   handler(val) {
    //     this.getDataRulesTree(this.appId, val)
    //   },
    //   immediate: true
    // },
    roleId: {
      handler(val) {
        if (val) {
          this.getRoleDatarule(val)
        }
      },
      immediate: true
    }
  },
  methods: {
    init(appId, tenantId) {
      this.getDataRulesTree(appId, tenantId)
    },
    async getDataRulesTree(appId, tenantId) {
      if (superAdmin && !appId) {
        this.dataruleTrees = []
        return
      }
      try {
        this.loading = true
        const { data } = await findDataruleTreeByAppTenant(appId, tenantId)
        this.dataruleTrees = data
      } finally {
        this.loading = false
      }
    },
    async getRoleDatarule(roleId) {
      this.loading = true
      const { data } = await getRoleDatarule(roleId)
      // this.roleDatarules = data
      this.$refs.dataruleTree.setCheckedKeys(data)
      this.loading = false
    },
    async saveRoleDatarule() {
      const checkedNodes = this.$refs.dataruleTree.getCheckedNodes()
      const checkedIds = []
      if (!checkedNodes || checkedNodes.length === 0) {
        this.$notify.warning(this.$t('ec.message.selectEmpty'))
        return
      }
      checkedNodes.forEach(node => {
        checkedIds.push(node.key)
      })
      const saveLoading = this.$loading({
        lock: true,
        spinner: 'el-icon-loading'
      })
      try {
        await assignRoleDatarule(this.roleId, checkedIds)
      } finally {
        saveLoading.close()
        this.$notify.success(this.$t('ec.role.dataRuleAuthSuccess'))
      }
    }
  }
}
</script>

<style scoped>

</style>
