<template>
  <el-dialog v-model="visible" title="政治面貌" width="600px" @close="handleClose">
    <el-form :model="form" label-width="120px" ref="formRef">
      <el-form-item label="政治面貌" 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="加入时间" required>
        <el-date-picker
          v-model="form.joinTime"
          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="转正时间" required>
        <el-date-picker
          v-model="form.correctionTime"
          type="date"
          placeholder="选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
      </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>({})

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 = () => {
  emit('submit', { ...form.value })
}
</script>

<style scoped>
</style>

