<template>
  <el-dialog
    title="编辑用户"
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
    :align-center="true"
    :fullscreen="false"
    @close="handleClose"
    width="500px"
  >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
      <!-- 姓名和用户名 -->
      <el-form-item label="唯一标识" prop="useridentifier">
        <el-input v-model="form.useridentifier" placeholder="请输入真实姓名" />
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>
      <!-- 备注 -->
      <el-form-item label="备注" prop="note">
        <el-input
          v-model="form.note"
          placeholder="请输入备注"
        />
      </el-form-item>

      <!-- 是否明文和是否脱敏 -->
      <el-form-item>
        <el-checkbox v-model="form.isoriginal" :true-value="'1'" :false-value="'0'">是否明文</el-checkbox>
        <el-checkbox v-model="form.ismask" :true-value="'1'" :false-value="'0'" style="margin-left: 20px">是否脱敏</el-checkbox>
      </el-form-item>
      </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div class="footer-buttons">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { addAppUser } from '@/api/safetyManagement/appUserConfig.js'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: () => null
  }
})
const emit = defineEmits(['update:visible', 'success'])

const formRef = ref(null)
const form = reactive({
  useridentifier: '',
  username: '',
  note: '',
  isoriginal: '0', // 默认字符串类型
  ismask: '0'
})
const rules = {
  useridentifier: [
    { required: true, message: '请输入唯一标识', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ]
}

watch(() => props.visible, (val) => {
  if (val && props.formData) {
    Object.assign(form, {
      ...props.formData,
      isoriginal: String(props.formData.isoriginal ?? '0'),
      ismask: String(props.formData.ismask ?? '0')
    })
  }
  console.log('表单数据', form)
})

const handleClose = () => {
  emit('update:visible', false)
  formRef.value?.resetFields()
  Object.assign(form, {
    useridentifier: '',
    username: '',
    note: '',
    isoriginal: '0',
    ismask: '0'
  })
}

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const params = { ...form }
      try {
          const res = await addAppUser(params)
          if (res.code === 'POP_00014') {
            emit('success')
            handleClose()
          }
      } catch (error) {
        // 可根据需要添加错误提示
        console.error('添加用户失败', error)
      }
    }
  })
}
</script>

<style lang="scss" scoped>


</style>
