<template>
    <div class="patient-info">
        <span>营养病例</span>
    </div>
    <div class="content-area">
        <div class="medical-content">
            <div class="row">
                <span class="label">复诊日期：</span>
            </div>
            <div class="row">
                <span class="label">主诉：</span>
                <span v-if="mainSult" class="content-text">{{ mainSult }}</span>
                <span class="edit-link" @click="handleEditMainSult">编辑</span>
            </div>
            <div class="row">
                <span class="label">现病史：</span>
                <span v-if="presentIllness" class="content-text">{{ presentIllness }}</span>
                <span class="edit-link" @click="handleEditPresentIllness">编辑</span>
            </div>
            <div class="row">
                <span class="label">既往史：</span>
                <span v-if="pastIllness" class="content-text">{{ pastIllness }}</span>
                <span class="edit-link" @click="handleEditPastIllness">编辑</span>
            </div>
            <div class="row">
                <span class="label">家族史：</span>
                <span v-if="familyHistory" class="content-text">{{ familyHistory }}</span>
                <span class="edit-link" @click="handleEditFamilyHistory">编辑</span>
            </div>
            <div class="row">
                <span class="label">营养诊断：</span>
            </div>
            <div class="row multi-line">
                <span class="label">营养诊断依据：</span>
            </div>
            <div class="row multi-line">
                <span class="label">会诊结果：</span>
            </div>

            <div class="row">
                <span class="label">营养医嘱：</span>
            </div>
            <div class="row">
                <span class="label">知情同意书(0/5)：</span>
                <imageUpload :limit="5" :isShowTip="false" />
            </div>
        </div>
    </div>
    <!-- 主诉编辑对话框 -->
    <MainSultDialog v-model:visible="showMainSultDialog" :main-sult-data="mainSult" @save="handleMainSultSave" @close="handleMainSultClose" />

    <!-- 现病史编辑对话框 -->
    <PresentIllnessDialog v-model:visible="showPresentIllnessDialog" :present-illness-data="presentIllness" @save="handlePresentIllnessSave" @close="handlePresentIllnessClose" />

    <!-- 既往史编辑对话框 -->
    <PastIllnessDialog v-model:visible="showPastIllnessDialog" :past-illness-data="pastIllness" @save="handlePastIllnessSave" @close="handlePastIllnessClose" />

    <!-- 家族史编辑对话框 -->
    <FamilyHistoryDialog v-model:visible="showFamilyHistoryDialog" :family-history-data="familyHistory" @save="handleFamilyHistorySave" @close="handleFamilyHistoryClose" />

</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import MainSultDialog from '../../edit/mainSultDialog.vue';
    import FamilyHistoryDialog from '../../edit/familyHistoryDialog.vue';
    import PastIllnessDialog from '../../edit/pastIllnessDialog.vue';
    import PresentIllnessDialog from '../../edit/presentIllnessDialog.vue';



    // 主诉相关
    const mainSult = ref('');
    const showMainSultDialog = ref(false);

    const handleEditMainSult = () => {
        showMainSultDialog.value = true;
    };


    const handleMainSultSave = (data: string) => {
        mainSult.value = data;
        // 这里可以调用API保存数据
        console.log('保存主诉:', data);
    };

    const handleMainSultClose = () => {
        showMainSultDialog.value = false;
    };

    // 现病史相关
    const presentIllness = ref('');
    const showPresentIllnessDialog = ref(false);

    const handleEditPresentIllness = () => {
        showPresentIllnessDialog.value = true;
    };

    const handlePresentIllnessSave = (data: string) => {
        presentIllness.value = data;

    };

    const handlePresentIllnessClose = () => {
        showPresentIllnessDialog.value = false;
    };

    // 既往史相关
    const pastIllness = ref('');
    const showPastIllnessDialog = ref(false);

    const handleEditPastIllness = () => {
        showPastIllnessDialog.value = true;
    };

    const handlePastIllnessSave = (data: string) => {
        pastIllness.value = data;
        console.log('保存既往史:', data);
    };

    const handlePastIllnessClose = () => {
        showPastIllnessDialog.value = false;
    };

    // 家族史相关
    const familyHistory = ref('');
    const showFamilyHistoryDialog = ref(false);

    const handleEditFamilyHistory = () => {
        showFamilyHistoryDialog.value = true;
    };

    const handleFamilyHistorySave = (data: string) => {
        familyHistory.value = data;
        console.log('保存家族史:', data);
    };

    const handleFamilyHistoryClose = () => {
        showFamilyHistoryDialog.value = false;
    };
</script>

<style lang="scss" scoped>
    .custom-tab-bar {
        display: flex;
        background: #7ec0fa;
        height: 56px;
        line-height: 55px;
        align-items: stretch;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 24px;
    }

    .custom-tab {
        color: #fff;
        font-size: 16px;
        padding: 0 32px;
        display: flex;
        align-items: center;
        cursor: pointer;
        height: 100%;
        transition: background 0.2s;
        background: #7ec0fa;
        font-weight: 500;
    }

    .patient-info {
        background-color: #fff;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 20px;
        font-size: 24px;

        :deep(.el-descriptions__label) {
            width: 80px;
            justify-content: flex-end;
        }
    }

    .content-area {
        background-color: #fff;
        margin-top: -20px;
        padding: 10px;
        border-radius: 4px;
        min-height: calc(100vh - 200px);
    }

    .custom-tab.first.active,
    .custom-tab.active {
        background: #4a7ebc;
    }

    .custom-tab:not(.active):hover {
        background: #6bb0e6;
    }

    .custom-tab+.custom-tab {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .medical-content {
        background: #fff;
        border-radius: 4px;
        padding: 50px 60px 40px 60px;
        min-height: 80vh;
        font-size: 15px;
        color: #222;
    }

    .row {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }

    .label {
        min-width: 110px;
        color: #222;
        font-weight: 500;
        margin-right: 8px;
        line-height: 28px;
        text-align: right;
    }

    .edit-link {
        color: #409eff;
        margin-right: 24px;
        cursor: pointer;
        font-size: 14px;
        line-height: 28px;
    }

    .content-text {
        flex: 1;
        color: #333;
        line-height: 28px;
        margin-right: 16px;
        word-break: break-all;
    }

    .multi-line {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .add-btn {
        margin-left: 12px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f5f7fa;
        border: 1px dashed #dcdfe6;
        color: #999;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>