<!-- 角色分配弹窗 -->
<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 { getRoles } from '@/api/system/user'
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 roleId = 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 = () => {
  getRoles().then(response => {
    if (response.data) {
      roleTreeList.value = toTreeList(response.data)
      // 获取展开项和选中项
      const expArr: string[] = []
      let cheArr: string[] = []
      response.data.forEach((element: any) => {
        expArr.push(element.id)
      })
      if (roleId.value) {
        const roles = roleId.value.split(',')
        cheArr = roles
      }
      defaultExpanded.value = expArr
      defaultChecked.value = cheArr
      treeRef.value?.setCheckedNodes(defaultChecked.value)
      loading.value = false
    }
    else {
      roleTreeList.value =  []
      defaultExpanded.value = []
      defaultChecked.value = []
      loading.value = false
    }

  })
  // getRoleTreeListByUser(userId.value).then((response) => {
  //   // 过滤掉计量人员角色
  //   response.data = response.data.filter((item: any) => item.name !== '计量人员')
  //   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) => {
  roleId.value = row.roleId
  loading.value = true
  userId.value = row.id
  userName.value = row.name
  dialogFormVisible.value = true
  fetchRoleTree()
}

defineExpose({ initDialog })
const saveData = () => {
  ids.value = treeRef.value.getCheckedKeys()
  if(!ids.value.length) {
    ElMessage.warning('请选择角色')
    return
  }
  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="30%" append-to-body>
    <el-scrollbar v-show="roleTreeList.length">
      <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>
    <el-empty  v-show="!roleTreeList.length" description="暂无数据" :image-size="100"  />
    <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>