<!-- 选择审批人 -->
<script lang="ts" setup name="SelectUser">
import type { Ref } from 'vue'
import { defineExpose, nextTick, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getUserList } from '@/api/system/user'
import type { userType } from '@/views/system/user/user-interface'
import { getProcessDetail } from '@/api/system/process'
const $props = defineProps({
  nextName: {
    type: String,
    default: '',
  },
  showNextText: {
    type: Boolean,
    default: false,
  },
  formId: {
    type: String,
    default: '',
  }
})
const emits = defineEmits(['confirm'])
const dataFormRef = ref()
const dialogFormVisible = ref(false) // 对话框是否显示
// 表单
const areaForm = ref({
  user: '',
})
const nextText = ref('')
// 前端校验规则
const rules: FormRules = {
  user: [{ required: true, message: '审批人必选', trigger: ['blur', 'change'] }],
}
// 重置表单
const resetForm = () => {
  areaForm.value = {
    user: '',
  }
}
// 获取用户列表
const userList = ref<userType[]>([])
const dict = {
  监督负责: ['质量监督', '质量负责', '监督负责'],
  质量负责: ['质量监督', '质量负责', '监督负责'],
  内审组长: ['组长'],
  部门负责: ['部门负责'],
} as { [key: string]: string[] }
const fetchDict = () => {
  getUserList({ offset: 1, limit: 99999 }).then((res) => {
    if ($props.nextName) {
      const data = dict[$props.nextName]
      userList.value = res.data.rows.filter((item: any) => item.roleName.split(',').some((citem: string) => data.some((ccitem: string) => citem.includes(ccitem))))
    }
    else {
      userList.value = res.data.rows
    }
  })
}
fetchDict()
// 保存按钮
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('选择的审批人', areaForm.value.user)

      emits('confirm', areaForm.value.user)
      dialogFormVisible.value = false
    }
  })
}
// 获取当前审批节点的下一节点
const getApprovalNextRecord = () => {
  if (!$props.formId) {
    nextText.value = ''
    return
  }
  getProcessDetail($props.formId).then(res => {
    if (res.data?.nodeConfig) {
      function flattenObject(obj: any, parentKey: string = '', result: any = {}): any {
        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            const newKey = parentKey ? `${parentKey}.${key}` : key;
            if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
              flattenObject(obj[key], newKey, result);
            } else {
              result[newKey] = obj[key];
            }
          }
        }
        return result;
      }
      const response = flattenObject(res.data.nodeConfig)
      const result = []
      for (let key in response) {
        if (key.includes('nodeName')) {
          result.push(response[key])
        }
      }
      nextText.value = result[1] || ''
    }
    else {
      nextText.value = ''
    }
  })
}
// 初始化对话框
const initDialog = () => {
  dialogFormVisible.value = true
  nextText.value = ''
  getApprovalNextRecord()
  resetForm()
  nextTick(() => {
    dataFormRef.value?.clearValidate()
  })
}
defineExpose({
  initDialog,
})

const cancel = () => {
  dialogFormVisible.value = false
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :close-on-click-modal="false" title="选择审批人" append-to-body width="30%">
    <el-form ref="dataFormRef" :rules="rules" :model="areaForm" label-position="right" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="审批人" prop="user">
            <el-select v-model="areaForm.user" filterable multiple placeholder="审批人">
              <el-option v-for="(item) in userList" :key="item.id" :label="item.name" :value="item.id">
                <span style="float: left;">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px;">{{ item.deptName }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="showNextText && nextText" :gutter="24">
        <el-col :span="24">
          <el-form-item label="下一节点:">
            <el-input v-model="nextText" placeholder="下一节点" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveForm(dataFormRef)">
          保存
        </el-button>
        <el-button @click="cancel">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>