<!-- 角色分配弹窗 -->
<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 { approvalAdd, 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 useApproval = ref('') // 是否走审批
const userId = ref('')// 用户id
const userName = ref('') // 用户名称
const deptName = ref('') // 所在组织机构
const ids = ref([]) // 选中项id
const pageType = ref('')
const defaultExpanded = ref<string[]>([]) // 默认展开的项
const defaultChecked = ref<string[]>([]) // 默认选中的树
const defaultExpandAll = ref<boolean>(true)// 是否展开树
const handleCheckChange = () => {

}
const treeRef = ref()
const currentCheckedKeys = ref<string[]>([])
// 获取角色列表
const fetchRoleTree = () => {
  getRoleTreeListByUser(userId.value).then((response) => {
    // 过滤掉计量人员角色
    response.data = response.data.filter((item: any) => item.name !== '计量人员')
    const tempData = response.data.map((item: any) => {
      return {
        ...item,
        disabled: pageType.value === 'detail',
      }
    })
    if (tempData) {
      roleTreeList.value = toTreeList(tempData)
      // 获取展开项和选中项
      const expArr: string[] = []
      const cheArr: string[] = []
      tempData.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
      defaultChecked.value = pageType.value === 'detail' ? currentCheckedKeys.value : cheArr
      treeRef.value?.setCheckedNodes(defaultChecked.value)
      loading.value = false
    }
  })
}
// 弹窗初始化
const initDialog = (row: any, useApprovalParam = '', type = '') => {
  loading.value = true
  userId.value = row.id
  userName.value = row.name || row.userName
  deptName.value = row.deptName
  pageType.value = type
  useApproval.value = useApprovalParam
  currentCheckedKeys.value = row.roleIds
  dialogFormVisible.value = true
  fetchRoleTree()
}

defineExpose({ initDialog })
const saveData = () => {
  ids.value = treeRef.value.getCheckedKeys()
  if (useApproval.value !== 'true') {
    roleAssign(userId.value, ids.value).then((response) => {
      if (response.code === 200) {
        ElMessage.success('角色分配成功')
        dialogFormVisible.value = false
        emits('resetData')
      }
    })
  }
  else {
    const params = {
      jsonContext: { userId: userId.value, roleIds: ids.value, deptName: deptName.value, userName: userName.value }, // 操作内容
      operationRemark: '用户角色分配', // 操作备注
      title: '用户角色分配', // 申请标题
      status: '0',
      operationType: 'user_roleAssign',
      id: '',
    }
    approvalAdd(params).then(() => {
      ElMessage.success('审批提交成功，请耐心等待审批！')
      dialogFormVisible.value = false
    }).catch(() => {
      ElMessage.warning('审批提交失败，请重新申请或联系管理员！')
    })
  }
}
const cancel = () => {
  dialogFormVisible.value = false
  userId.value = ''
  userName.value = ''
  deptName.value = ''
  defaultExpanded.value = []
  defaultChecked.value = []
  treeRef.value?.setCheckedNodes([])
  emits('resetData')
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :title="titleText" width="30%" append-to-body>
    <div v-if="pageType === 'detail' && userName" style="margin: 0 0 20px 0;font-size: 13px;color: #4181ff;">
      <span>为</span>
      <span v-if="deptName" style="font-weight: 600;">【{{ deptName }}】</span>
      <span v-if="deptName">的</span>
      <span v-if="userName" style="font-weight: 600;">【{{ userName }}】</span>
      <span>分配角色</span>
    </div>
    <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 v-if="pageType !== 'detail'" 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>