<template>
  <div class="role-auth">
    <el-dialog
      v-bind="$attrs"
      :title="state.dialogTitle"
      v-model="state.modalVisible"
      :before-close="cancelDialog"
      :append-to-body="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="false"
      class="role-dialog"
      draggable
    >
      <div class="role-auth-container" v-loading="treeLoading">
        <el-tree
          :default-expand-all="true"
          ref="roleAuthTree"
          expandNode="true"
          :props="{label: 'remark', children: 'children'}"
          show-checkbox
          :data="treeData"
          highlight-current
          node-key="menu_id"
        >
          <template #default="{data: {remark, menu_id}}"> {{ `${remark}(${menu_id})` }}</template>
        </el-tree>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确 定</el-button>
          <el-button @click="cancelDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import useSystemManageStore from '@store/modules/systemManage'
import {buildTreeData} from '@/utils/routerUtil'
import _ from 'lodash'

const systemManageStore = useSystemManageStore()
const {proxy} = getCurrentInstance()

const roleAuthTree = ref(null)
const menuOrigin = ref([])
const treeData = ref([])
const treeLoading = ref(false)

const state = reactive({
  modalVisible: false,
  dialogTitle: '',
  editView: {}
})

const getDataView = async (data) => {
  treeLoading.value = true
  const {Data, Total} = await systemManageStore.menuLoad(data)
  menuOrigin.vlaue = Data
  treeData.value = buildTreeData(Data, 'menu_id')
}

const setDefaultChecked = async (orginData) => {
  if (state.editView.popedom) {
    const init = state.editView.popedom.split(',')
    await roleAuthTree.value.setCheckedKeys(init) // 1.设置数据库保存的所有节点
    const checkedKeysLeaf = roleAuthTree.value.getCheckedKeys(true) // 2.getCheckedKeys方法获取leaf叶子节点
    const leafKeys = _.intersectionBy(init, checkedKeysLeaf, String) // 3.所有节点和叶子节点，取共有集合
    await roleAuthTree.value.setCheckedKeys(leafKeys) // 4.设置全部leaf叶子节点
  }
  treeLoading.value = false
}

const submitDialog = async () => {
  const list = roleAuthTree.value.getCheckedKeys().concat(roleAuthTree.value.getHalfCheckedKeys())
  if (!list.length) {
    proxy.$modal.msgError('未选择任何权限！')
    return
  }
  await systemManageStore.sysusergroupUp({
    popedom: list.join(','),
    id: state.editView.id,
    'id.value': state.editView.id
  })
  proxy.$modal.msgSuccess('修改成功！')
  state.modalVisible = false
}
const cancelDialog = () => {
  state.modalVisible = false
}

const openDialog = async (data = {}) => {
  state.modalVisible = true
  if (Object.keys(data).length) await getDataView({})
  state.editView = data
  state.dialogTitle = `权限分配【${data.title}】`
  setDefaultChecked(menuOrigin.vlaue)
}

defineExpose({
  openDialog
})
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
