<template>
    <el-dialog :model-value="visible" title="查看门诊患者信息" width="900px" append-to-body @close="handleClose" class="detail-dialog-root">
        <div class="detail-dialog-body">
            <el-row :gutter="0">
                <el-col :span="12">
                    <div class="detail-row"><span class="label required">看诊类型：</span><span class="value">{{ detailData.type === '0' ? '门诊' : '住院' }}</span></div>
                    <div class="detail-row"><span class="label">诊疗卡号：</span><span class="value">{{ detailData.treatNum || '--' }}</span></div>
                    <div class="detail-row"><span class="label required">科室：</span><span class="value">{{ detailData.deptName || '--' }}</span></div>
                    <div class="detail-row"><span class="label required">姓名：</span><span class="value">{{ detailData.treatName || '--' }}</span></div>
                    <div class="detail-row"><span class="label required">身份证：</span><span class="value">{{ detailData.idCard || '--' }}</span></div>
                    <div class="detail-row"><span class="label">年龄：</span><span class="value">{{ detailData.age || '--' }}</span></div>
                    <div class="detail-row"><span class="label">身高：</span><span class="value">{{ detailData.height ? detailData.height + 'cm' : '--' }}</span></div>
                    <div class="detail-row"><span class="label">BMI：</span><span class="value">{{ detailData.bmi || '--' }}</span></div>
                    <div class="detail-row"><span class="label">过敏食物：</span><span class="value">{{ detailData.allergyFoot || '--' }}</span></div>
                    <div class="detail-row"><span class="label">过敏药物：</span><span class="value">{{ detailData.allergyDrug || '--' }}</span></div>
                    <div class="detail-row"><span class="label">体力活动：</span><span class="value">{{ getDictLabel(physicalActivityDict, detailData.activity) || '--' }}</span></div>
                </el-col>
                <el-col :span="12">
                    <div class="detail-row"><span class="label">门诊号：</span><span class="value">{{ detailData.outpatientNo || '--' }}</span></div>
                    <div class="detail-row"><span class="label required">性别：</span><span class="value">{{ detailData.sex === '0' ? '男' : detailData.sex === '1' ? '女' : '--' }}</span></div>
                    <div class="detail-row"><span class="label">出生日期：</span><span class="value">{{ detailData.birthday || '--' }}</span></div>
                    <div class="detail-row"><span class="label">联系电话：</span><span class="value">{{ detailData.phoneNum || '--' }}</span></div>
                    <div class="detail-row"><span class="label">体重：</span><span class="value">{{ detailData.weight ? detailData.weight + 'kg' : '--' }}</span></div>
                </el-col>
            </el-row>
        </div>
        <template #footer>
            <el-button @click="handleClose">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
    import { computed } from 'vue';
    import { ElDialog, ElRow, ElCol, ElButton } from 'element-plus';

    const props = defineProps({
        visible: Boolean,
        detailData: {
            type: Object,
            default: () => ({})
        },
        physicalActivityDict: {
            type: Array,
            default: () => []
        }
    });
    const emit = defineEmits(['update:visible', 'close']);

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

    function getDictLabel(dictList: any[], value: any) {
        if (!Array.isArray(dictList)) return value || '--';
        const item = dictList.find((item) => item.value === value);
        return item ? item.label : value || '--';
    }

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

<style scoped>
    .detail-dialog-root>>>.el-dialog__body {
        padding: 40px 40px 10px 40px;
    }

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

    .detail-row {
        display: flex;
        align-items: flex-start;
        margin-bottom: 18px;
        min-height: 22px;
    }

    .label {
        display: inline-block;
        width: 110px;
        font-weight: bold;
        color: #222;
        text-align: right;
        margin-right: 8px;
        line-height: 22px;
    }

    .label.required::before {
        content: '*';
        color: #f56c6c;
        margin-right: 2px;
        font-size: 15px;
        font-weight: bold;
    }

    .value {
        flex: 1;
        color: #333;
        text-align: left;
        word-break: break-all;
        line-height: 22px;
    }
</style>