<!-- 角色分配弹窗 -->
<script lang="ts" setup name="roleAssigmentDialog">
import { ElMessage } from 'element-plus'
import type { userType } from './user_interface'
import { getShowItem, toTreeList } from '@/utils/structure'
import { getRoleTreeListByUser } from '@/api/system/role'
import { roleAssign } from '@/api/system/user'
const props = defineProps({
  titleText: {
    type: String,
    default: '分配角色',
  },
})
const emits = defineEmits(['resetData'])
const dialogFormVisible = ref<boolean>(false)
const loading = ref<boolean>(false) // 加载动态效果
const roleTreeList = ref([])// 角色树列表数据
const defaultProps = ref({
  label: 'name',
  children: 'children',
})
const userId = ref('')// 用户id
const userName = ref('') // 用户名称
const ids = ref([]) // 选中项id
const defaultExpanded = ref<string[]>([]) // 默认展开的项
const defaultChecked = ref<string[]>([]) // 默认选中的树
const defaultExpandAll = ref<boolean>(true)// 是否展开树
const handleCheckChange = () => {

}
const treeRef = ref()
// 获取角色列表
const fetchRoleTree = () => {
  getRoleTreeListByUser(userId.value).then((response) => {
    if (response.data) {
      roleTreeList.value = toTreeList(response.data)
      // 获取展开项和选中项
      const expArr: string[] = []
      const cheArr: string[] = []
      response.data.forEach((element: any) => {
        if (element.open && element.checked) {
          expArr.push(element.id)
          cheArr.push(element.id)
        }
        else if (element.open) {
          expArr.push(element.id)
        }
        else if (element.checked) {
          cheArr.push(element.id)
        }
      })
      defaultExpanded.value = expArr
      defaultChecked.value = cheArr
      treeRef.value?.setCheckedNodes(defaultChecked.value)
      loading.value = false
    }
  })
}
// 弹窗初始化
const initDialog = (row: userType) => {
  loading.value = true
  userId.value = row.id
  userName.value = row.name
  dialogFormVisible.value = true
  fetchRoleTree()
}

defineExpose({ initDialog })
const saveData = () => {
  ids.value = treeRef.value.getCheckedKeys()
  roleAssign(userId.value, ids.value).then((response) => {
    if (response.code === 200) {
      ElMessage.success('角色分配成功')
      dialogFormVisible.value = false
      emits('resetData')
    }
  })
}
const cancel = () => {
  dialogFormVisible.value = false
  userId.value = ''
  userName.value = ''
  defaultExpanded.value = []
  defaultChecked.value = []
  treeRef.value?.setCheckedNodes([])
  emits('resetData')
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
    <el-scrollbar>
      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
        @check-change="handleCheckChange" />
    </el-scrollbar>
    <div class="dialog-footer footer">
      <el-button type="primary" @click="saveData">
        保存
      </el-button>
      <el-button @click="cancel">
        取消
      </el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: flex-end;
}
</style>