<!-- 角色分配弹窗 -->ey
<script lang="ts" setup name="roleAssigmentDialog">
import { toTreeList, getShowItem } from '@/utils/structure'
import { getRoleTreeListByUser } from '@/api/system/role'
import { roleAssign } from '@/api/system/user'
import { ElMessage } from 'element-plus'
import type { userType } from './user_interface'
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 fetchRoleTree = () => {
  getRoleTreeListByUser(userId.value).then((response) => {
    if (response.data) {
      roleTreeList.value = toTreeList(response.data)
      const temp = getShowItem(response.data) // 获取展开项和选中项
      defaultExpanded.value = temp.openedList
      defaultChecked.value = temp.expandList
      loading.value = false
    }
  })
}
// 弹窗初始化
const initDialog = (row: userType) => {
  loading.value = true
  userId.value = row.id
  userName.value = row.name
  dialogFormVisible.value = true
  fetchRoleTree()
}
const treeRef = ref()
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
  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 slot="footer" 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>