<template>
    <el-dialog :model-value="visible" title="编辑家族史" width="600px" append-to-body @close="handleClose" class="family-history-dialog">
        <div class="dialog-body">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
                <el-form-item label="家族史：" prop="familyHistory">
                    <el-input 
                        v-model="form.familyHistory" 
                        type="textarea" 
                        :rows="6"
                        placeholder="请输入家族史内容"
                        maxlength="500"
                        show-word-limit
                    />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <el-button type="primary" @click="handleSave">保存</el-button>
            <el-button @click="handleClose">取消</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElDialog, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

const props = defineProps({
    visible: Boolean,
    familyHistoryData: {
        type: String,
        default: ''
    }
});

const emit = defineEmits(['update:visible', 'save', 'close']);

const formRef = ref();
const form = ref({
    familyHistory: ''
});

watch(() => props.familyHistoryData, (val) => {
    form.value.familyHistory = val || '';
}, { immediate: true });

const rules = {
    familyHistory: [
        { required: true, message: '请输入家族史内容', trigger: 'blur' }
    ]
};

function handleSave() {
    formRef.value.validate((valid) => {
        if (valid) {
            emit('save', form.value.familyHistory);
            emit('update:visible', false);
        }
    });
}

function handleClose() {
    emit('update:visible', false);
    emit('close');
}

defineOptions({
    name: 'FamilyHistoryDialog'
});
</script>

<style scoped>
.family-history-dialog :deep(.el-dialog__body) {
    padding: 20px 20px 10px 20px;
}

.dialog-body {
    font-size: 14px;
    color: #222;
}

.el-form-item {
    margin-bottom: 18px;
}
</style>
