<!-- 选择审批人 -->
<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'
const $props = defineProps({
  nextName: {
    type: String,
    default: '',
  },
})
const emits = defineEmits(['confirm'])
const dataFormRef = ref()
const dialogFormVisible = ref(false) // 对话框是否显示
// 表单
const areaForm = ref({
  user: '',
})
// 前端校验规则
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) {
      emits('confirm', areaForm.value.user)
      dialogFormVisible.value = false
    }
  })
}
// 初始化对话框
const initDialog = () => {
  dialogFormVisible.value = true
  resetForm()
  nextTick(() => {
    dataFormRef.value?.clearValidate()
  })
}
defineExpose({
  initDialog,
})

const cancel = () => {
  dialogFormVisible.value = false
  // this.$emit('watchChild')
}
</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-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>