<template>
  <el-dialog v-model="visible" title="社会关系" width="600px" @close="handleClose">
    <el-form :model="form" :rules="rules" label-width="130px" ref="formRef">
      <el-form-item label="称谓" prop="title" required>
        <el-select v-model="form.title" placeholder="请选择称谓" style="width: 100%">
          <el-option
            v-for="item in titleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="realName" required>
        <el-input v-model="form.realName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="出生年月" prop="birthday" required>
        <el-date-picker
          v-model="form.birthday"
          type="date"
          placeholder="选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="政治面貌" prop="politicsStatusId" required>
        <el-select v-model="form.politicsStatusId" placeholder="请选择政治面貌" style="width: 100%">
          <el-option
            v-for="item in politicsStatusList"
            :key="item.id"
            :label="item.politicsStatus"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工作单位及职务" prop="workStation" required>
        <el-input 
          v-model="form.workStation" 
          type="textarea"
          :rows="2"
          placeholder="请输入工作单位及职务" 
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  modelValue: boolean
  formData?: any
  politicsStatusList?: any[]
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'submit', data: any): void
}

const props = withDefaults(defineProps<Props>(), {
  formData: () => ({}),
  politicsStatusList: () => []
})

const emit = defineEmits<Emits>()

const visible = ref(false)
const formRef = ref()
const form = ref<any>({})

// 称谓选项
const titleOptions = [
  { label: '父亲', value: '父亲' },
  { label: '母亲', value: '母亲' },
  { label: '配偶', value: '配偶' },
  { label: '子女', value: '子女' },
  { label: '兄弟姐妹', value: '兄弟姐妹' },
  { label: '其他', value: '其他' }
]

watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val && props.formData) {
    form.value = { ...props.formData }
  } else {
    form.value = {}
  }
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

const handleClose = () => {
  visible.value = false
  form.value = {}
}

const handleSubmit = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      emit('submit', { ...form.value })
    }
  })
}

// 表单验证规则
const rules = {
  title: [
    { required: true, message: '请选择称谓', trigger: 'change' }
  ],
  realName: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  birthday: [
    { required: true, message: '请选择出生年月', trigger: 'change' }
  ],
  politicsStatusId: [
    { required: true, message: '请选择政治面貌', trigger: 'change' }
  ],
  workStation: [
    { required: true, message: '请输入工作单位及职务', trigger: 'blur' }
  ]
}
</script>

<style scoped>
</style>

