<template>
    <div class="edit-drawer">
        <el-drawer
            v-model="visible"
            size="60%"
            :before-close="handleClose"
            :z-index="viewOnly ? 4000 : 1500"
            :modal="true"
            class="diagnosis-drawer tcm-diagnosis-drawer"
        >
            <template #header>
                <div class="tcm-dd-header">
                    <div class="tcm-dd-header__row">
                        <h2 class="tcm-dd-header__title">{{ drawerTitle }}</h2>
                        <el-tag
                            v-if="viewOnly"
                            type="info"
                            effect="plain"
                            round
                            size="small"
                            class="tcm-dd-header__badge"
                        >
                            只读
                        </el-tag>
                        <el-tag
                            v-else-if="mode === 'add'"
                            type="success"
                            effect="plain"
                            round
                            size="small"
                            class="tcm-dd-header__badge"
                        >
                            新建
                        </el-tag>
                        <el-tag
                            v-else
                            type="warning"
                            effect="plain"
                            round
                            size="small"
                            class="tcm-dd-header__badge"
                        >
                            编辑
                        </el-tag>
                    </div>
                    <p v-if="formData.patient_name || formData.id" class="tcm-dd-header__sub">
                        <span v-if="formData.patient_name" class="tcm-dd-header__name">{{ formData.patient_name }}</span>
                        <span v-if="formData.id" class="tcm-dd-header__id">
                            <span v-if="formData.patient_name" class="tcm-dd-header__sep">·</span>
                            诊单 {{ formData.patient_id || formData.id }}
                        </span>
                    </p>
                </div>
            </template>
            <el-tabs v-model="activeTab" class="diagnosis-tabs tcm-diagnosis-tabs">
                <!-- 基本信息标签页 -->
                <el-tab-pane label="病历" name="basic">
                    <el-form
                        ref="formRef"
                        :model="formData"
                        :rules="formRules"
                        label-width="160px"
                    >
                <fieldset
                    :disabled="viewOnly"
                    class="diagnosis-view-fieldset border-0 min-w-0 p-0 m-0"
                >
                <!-- 基本信息 -->
                <el-divider content-position="left">基本信息</el-divider>
                
                <el-form-item label="诊单ID">
                    <el-input v-model="formData.patient_id" disabled placeholder="系统自动生成" />
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="patient_name">
                            <el-input
                                v-model="formData.patient_name"
                                placeholder="请输入姓名"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证号" prop="id_card">
                            <el-input
                                v-model="formData.id_card"
                                placeholder="请输入身份证号"
                                maxlength="18"
                                @focus="handleIdCardFocus"
                                @blur="handleIdCardBlur"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <template v-if="showPhoneMaskedEdit">
                                <el-input
                                    :model-value="
                                        phoneRevealUnlocked ? originalPhone || '' : maskPhone(originalPhone || '')
                                    "
                                    readonly
                                    placeholder="点击可查看完整手机号"
                                    maxlength="11"
                                    class="cursor-pointer phone-mask-toggle"
                                    @click="togglePhoneReveal"
                                />
                                <p
                                    v-if="originalPhone && !phoneRevealUnlocked"
                                    class="text-xs text-gray-400 mt-1"
                                >
                                    当前为脱敏显示，点击输入框可查看完整号码
                                </p>
                            </template>
                            <el-input
                                v-else
                                v-model="formData.phone"
                                placeholder="请输入手机号"
                                maxlength="11"
                                @focus="handlePhoneFocus"
                                @blur="handlePhoneBlur"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="gender">
                            <el-radio-group v-model="formData.gender">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="0">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="年龄" prop="age">
                            <el-input-number
                                v-model="formData.age"
                                :min="0"
                                :max="150"
                                placeholder="请输入年龄"
                                class="w-full"
                            />
                        </el-form-item>
                    </el-col>
                    
                </el-row>

           
                <!-- 生命体征 -->
                <el-divider content-position="left">生命体征</el-divider>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="婚姻状态" prop="marital_status">
                            <el-select
                                v-model="formData.marital_status"
                                placeholder="请选择婚姻状态"
                                class="w-full"
                                :popper-options="{ strategy: 'fixed' }"
                                popper-class="high-z-index"
                            >
                                <el-option label="未婚" :value="0" />
                                <el-option label="已婚" :value="1" />
                                <el-option label="离异" :value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="就诊人身高(cm)" prop="height">
                            <el-input-number
                                v-model="formData.height"
                                :min="0"
                                :max="300"
                                placeholder="请输入身高"
                                class="w-full"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="体重(kg)" prop="weight">
                            <el-input-number
                                v-model="formData.weight"
                                :min="0"
                                :max="500"
                                :step="0.1"
                                placeholder="请输入体重"
                                class="w-full"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="地区" prop="region">
                            <el-input
                                v-model="formData.region"
                                placeholder="请输入地区"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="就诊人血压(高压mmHg)" prop="systolic_pressure">
                            <el-input-number
                                v-model="formData.systolic_pressure"
                                :min="0"
                                :max="250"
                                placeholder="请输入高压"
                                class="w-full"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="就诊人血压(低压mmHg)" prop="diastolic_pressure">
                            <el-input-number
                                v-model="formData.diastolic_pressure"
                                :min="0"
                                :max="150"
                                placeholder="请输入低压"
                                class="w-full"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="空腹血糖(mmol/L)" prop="fasting_blood_sugar">
                            <el-input
                                v-model="formData.fasting_blood_sugar"
                                placeholder="请输入空腹血糖，如：8.5 或 8-9"
                                maxlength="20"
                                class="w-full"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="诊断类型" prop="diagnosis_type">
                            <el-select
                                v-model="formData.diagnosis_type"
                                placeholder="请选择诊断类型"
                                class="w-full"
                                :popper-options="{ strategy: 'fixed' }"
                                popper-class="high-z-index"
                            >
                                <el-option
                                    v-for="item in diagnosisTypeOptions"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="formData.status">
                                <el-radio :label="1">启用</el-radio>
                                <el-radio :label="0">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                    <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="在用药物" prop="current_medications">
                            <el-input
                                v-model="formData.current_medications"
                                type="textarea"
                                :rows="3"
                                placeholder="请填写患者当前正在使用的药物（如降压药、降糖药等），多种请换行或顿号分隔"
                                maxlength="2000"
                                show-word-limit
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-divider content-position="left">主诉</el-divider>
                
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="当地医院诊断日期" prop="diagnosis_date">
                            <el-date-picker
                                v-model="formData.diagnosis_date"
                                type="date"
                                placeholder="请选择诊断日期"
                                value-format="YYYY-MM-DD"
                                class="w-full"
                                :popper-options="{ strategy: 'fixed' }"
                                popper-class="high-z-index"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发现糖尿病患病史" prop="diabetes_discovery_year">
                            <el-input
                                v-model="formData.diabetes_discovery_year"
                                clearable
                                maxlength="50"
                                show-word-limit
                                placeholder="可填数字或文字，如：5、1年、半年"
                                class="w-full"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="当地医院诊断结果" prop="local_hospital_diagnosis" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.local_hospital_diagnosis">
                        <el-checkbox-button label="糖尿病">糖尿病</el-checkbox-button>
                        <el-checkbox-button label="消渴病">消渴病</el-checkbox-button>
                        <el-checkbox-button label="糖尿病前期">糖尿病前期</el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="当地就诊医院名称" prop="local_hospital_name">
                    <el-input
                        v-model="formData.local_hospital_name"
                        placeholder="请输入当地就诊医院名称（不能填写当地、本地、互联网等关键词）"
                    />
                </el-form-item>
                
                <el-divider content-position="left">现病史</el-divider>

                <el-row :gutter="20">
                <el-form-item label="口腔感觉" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.appetite">
                        <el-checkbox-button v-for="item in appetiteOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>
                  
                </el-row>
                 <el-row :gutter="20">
                    <el-col :span="20">
                        <el-form-item label="每日饮水量" class="compact-form-item">
                            <el-radio-group v-model="formData.water_intake">
                                <el-radio-button label="">无</el-radio-button>
                                <el-radio-button v-for="item in waterIntakeOptions" :key="item.value" :label="item.value">
                                    {{ item.name }}
                                </el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="近一个月体重变化" class="compact-form-item">
                            <el-radio-group v-model="formData.weight_change">
                                <el-radio-button label="">无</el-radio-button>
                                <el-radio-button v-for="item in weightChangeOptions" :key="item.value" :label="item.value">
                                    {{ item.name }}
                                </el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                  <el-row :gutter="20">  
                    <el-col :span="12">
                        <el-form-item label="脂肪肝程度" class="compact-form-item">
                            <el-radio-group v-model="formData.fatty_liver_degree">
                                <el-radio-button label="">无</el-radio-button>
                                <el-radio-button v-for="item in fattyLiverDegreeOptions" :key="item.value" :label="item.value">
                                    {{ item.name }}
                                </el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                  </el-row>
                <el-form-item label="饮食情况" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.diet_condition">
                        <el-checkbox-button v-for="item in dietConditionOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="肢体感觉" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.body_feeling">
                        <el-checkbox-button v-for="item in bodyFeelingOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="睡眠情况" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.sleep_condition">
                        <el-checkbox-button v-for="item in sleepConditionOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="眼睛情况" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.eye_condition">
                        <el-checkbox-button v-for="item in eyeConditionOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="头部感觉" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.head_feeling">
                        <el-checkbox-button v-for="item in headFeelingOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="出汗情况" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.sweat_condition">
                        <el-checkbox-button v-for="item in sweatConditionOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="皮肤情况" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.skin_condition">
                        <el-checkbox-button v-for="item in skinConditionOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="小便情况" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.urine_condition">
                        <el-checkbox-button v-for="item in urineConditionOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="大便情况" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.stool_condition">
                        <el-checkbox-button v-for="item in stoolConditionOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="腰肾情况" class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.kidney_condition">
                        <el-checkbox-button v-for="item in kidneyConditionOptions" :key="item.value" :label="item.value">
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>
                  <el-form-item label="其他补充" prop="symptoms">
                    <el-input
                        v-model="formData.symptoms"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入症状"
                    />
                </el-form-item>
                
                <!-- 既往史 -->
                <el-divider content-position="left">既往史</el-divider>

                <el-form-item label="" prop="past_history"  class="checkbox-form-item">
                    <el-checkbox-group v-model="formData.past_history">
                        <el-checkbox-button
                            v-for="item in pastHistoryOptions"
                            :key="item.value"
                            :label="item.value"
                        >
                            {{ item.name }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>

                <!-- 其他病史 -->
                <el-divider content-position="left">其他病史</el-divider>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="外伤史">
                            <el-radio-group v-model="formData.trauma_history">
                                <el-radio-button :label="1">有</el-radio-button>
                                <el-radio-button :label="0">无</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手术史">
                            <el-radio-group v-model="formData.surgery_history">
                                <el-radio-button :label="1">有</el-radio-button>
                                <el-radio-button :label="0">无</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="过敏史">
                            <el-radio-group v-model="formData.allergy_history">
                                <el-radio-button :label="1">有</el-radio-button>
                                <el-radio-button :label="0">无</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="家族病史">
                            <el-radio-group v-model="formData.family_history">
                                <el-radio-button :label="1">有</el-radio-button>
                                <el-radio-button :label="0">无</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="妊娠哺乳史">
                            <el-radio-group v-model="formData.pregnancy_history">
                                <el-radio-button :label="1">有</el-radio-button>
                                <el-radio-button :label="0">无</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 诊断信息 -->
                <el-divider content-position="left">诊断信息</el-divider>



               

                <el-form-item label="病史补充" prop="remark">
                    <el-input
                        v-model="formData.remark"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入病史补充"
                    />
                </el-form-item>
                </fieldset>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="医生备注" name="doctorNote" :disabled="!formData.id" lazy>
                    <div v-if="formData.id" class="p-4">
                        <NoteTimeline
                            :notes="diagNotes"
                            :diagnosis-id="Number(formData.id)"
                            :readonly="viewOnly"
                            @refresh="fetchDiagNotes"
                        />
                    </div>
                    <el-empty v-else description="请先保存诊单后查看" />
                </el-tab-pane>
                <!-- <el-tab-pane label="跟踪备注" name="trackingNote" :disabled="!formData.id" lazy>
                    <div v-if="formData.id" class="p-4">
                        <TrackingNoteTimeline
                            :notes="trackingNotes"
                            :diagnosis-id="Number(formData.id)"
                            :readonly="viewOnly"
                            @refresh="fetchTrackingNotes"
                        />
                    </div>
                    <el-empty v-else description="请先保存诊单后查看" />
                </el-tab-pane> -->
                <el-tab-pane
                    v-if="hasDailyRecordPermission"
                    label="日常记录"
                    name="daily"
                    :disabled="!formData.id"
                    lazy
                >
                    <daily-matrix
                        v-if="formData.id"
                        :diagnosis-id="Number(formData.id)"
                        :patient-id="Number(formData.patient_id)"
                        :age="formData.age"
                        :patient-name="formData.patient_name"
                        :read-only="viewOnly"
                    />
                    <el-empty v-else description="请先保存诊单后查看" />
                </el-tab-pane>

                <!-- 病历记录标签页（开方后自动显示） -->
                <el-tab-pane label="处方" name="bingli" :disabled="!formData.id"  v-if="hasPermission(['tcm.diagnosis/chufang'])">
                    <div v-if="formData.id" class="bingli-tab-content">
                        <!-- 病历记录列表 -->
                        <case-record-list
                            ref="caseRecordListRef"
                            :diagnosis-id="Number(formData.id)"
                            :read-only="viewOnly"
                            @view="handleViewCase"
                            @openPrescription="handleOpenPrescription"
                        />
                    </div>
                    <el-empty v-else description="请先保存诊单，开方后病历将在此显示" />
                </el-tab-pane>

                <!-- 业务订单：复用处方业务订单接口，按患者ID聚合 / 按当前诊单过滤 -->
                <el-tab-pane
                    label="业务订单"
                    name="patientOrders"
                    :disabled="!formData.id"
                    lazy
                    v-if="hasPermission(['tcm.diagnosis/patientOrders'])"
                >
                    <patient-order-list
                        v-if="formData.id"
                        :diagnosis-id="Number(formData.id)"
                        :patient-id="Number(formData.patient_id) || 0"
                    />
                    <el-empty v-else description="请先保存诊单后查看业务订单" />
                </el-tab-pane>

                <el-tab-pane
                    v-if="hasPermission(['tcm.diagnosis/huifang'])"
                    label="视频录制回放记录"
                    name="visit"
                    :disabled="!formData.id"
                    lazy
                >
                    <call-record-panel
                        v-if="formData.id"
                        ref="callRecordPanelRef"
                        :diagnosis-id="Number(formData.id)"
                    />
                    <el-empty v-else description="请先保存诊单后再查看视频录制回放记录" />
                </el-tab-pane>
                <el-tab-pane
                    v-if="hasPermission(['tcm.diagnosis/chat'])"
                    label="聊天记录"
                    name="chat"
                    :disabled="!formData.id"
                    lazy
                >
                    <im-chat-record-panel
                        v-if="activeTab === 'chat' && formData.id"
                        :diagnosis-id="Number(formData.id)"
                    />
                    <el-empty v-else-if="!formData.id" description="请先保存诊单后再查看聊天记录" />
                </el-tab-pane>
                <el-tab-pane
                    v-if="
                        hasPermission(['tcm.diagnosis/assign']) ||
                        hasPermission(['tcm.diagnosis/detail'])
                    "
                    label="指派医助记录"
                    name="assignLog"
                    :disabled="!formData.id"
                    lazy
                >
                    <assign-log-panel
                        v-if="formData.id"
                        :diagnosis-id="Number(formData.id)"
                    />
                    <el-empty v-else description="请先保存诊单后再查看指派记录" />
                </el-tab-pane>
                <el-tab-pane
                    v-if="hasPermission(['doctor.appointment/lists'])"
                    label="挂号记录"
                    name="appointmentRecords"
                    :disabled="!formData.id"
                    lazy
                >
                    <appointment-record-panel
                        v-if="formData.id"
                        :diagnosis-id="Number(formData.id)"
                    />
                    <el-empty v-else description="请先保存诊单后再查看挂号记录" />
                </el-tab-pane>
       
            </el-tabs>

            <!-- 处方详情（查看病历） -->
            <tcm-prescription ref="prescriptionRef" @success="caseRecordListRef?.refresh?.()" />
            
            <template #footer>
                <div class="tcm-dd-footer">
                    <el-button class="tcm-dd-footer__btn" @click="handleClose">
                        {{ viewOnly ? '关闭' : '取消' }}
                    </el-button>
                    <el-button
                        v-if="!viewOnly && activeTab === 'basic'"
                        class="tcm-dd-footer__btn"
                        type="primary"
                        @click="handleSubmit"
                        :loading="submitting"
                    >
                        保存病历
                    </el-button>
                </div>
            </template>
        </el-drawer>

    </div>
</template>

<script setup lang="ts">
import { tcmDiagnosisAdd, tcmDiagnosisEdit, tcmDiagnosisDetail, checkPhone, checkIdCard, diagnosisTrackingNotes } from '@/api/tcm'
import { getDictData } from '@/api/app'
import feedback from '@/utils/feedback'
import { hasPermission } from '@/utils/perm'
import useUserStore from '@/stores/modules/user'
import useAppStore from '@/stores/modules/app'
import { ElMessage } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'
import DailyMatrix from './components/DailyMatrix.vue'
import CaseRecordList from './components/CaseRecordList.vue'
import CallRecordPanel from './components/CallRecordPanel.vue'
import ImChatRecordPanel from './components/ImChatRecordPanel.vue'
import AssignLogPanel from './components/AssignLogPanel.vue'
import AppointmentRecordPanel from './components/AppointmentRecordPanel.vue'
import NoteTimeline from '@/views/patient/reception/components/NoteTimeline.vue'
import TrackingNoteTimeline from './components/TrackingNoteTimeline.vue'
import PatientOrderList from './components/PatientOrderList.vue'
import TcmPrescription from '@/components/tcm-prescription/index.vue'
import { getDoctorNotes } from '@/api/patient'

const emit = defineEmits(['success'])
const appStore = useAppStore()
const getImageUrl = (url: string) => (url?.indexOf?.('http') === 0 ? url : appStore.getImageUrl(url || ''))
const caseRecordListRef = ref()
const callRecordPanelRef = ref<{ refresh?: () => void } | null>(null)
const prescriptionRef = ref()

const visible = ref(false)
/** 只读查看：与 consumers 处方等处「查看诊单」一致，全部 Tab 仅展示不可保存 */
const viewOnly = ref(false)
const formRef = ref()
const mode = ref('add')
const submitting = ref(false)

/** 拥有后手机号可正常编辑，失焦不再强制脱敏 */
const hasPhonePlainPermission = computed(() => hasPermission(['tcm.diagnosis/phonePlain']))
const hasDailyRecordPermission = computed(() => hasPermission(['tcm.diagnosis/dailyRecord']))
/** 编辑且无明文权限：只读脱敏，点击切换查看完整号 */
const showPhoneMaskedEdit = computed(() => mode.value === 'edit' && !hasPhonePlainPermission.value)
const phoneRevealUnlocked = ref(false)
const activeTab = ref('basic')
const drawerTitle = computed(() => {
    if (viewOnly.value) return '诊单详情'
    return mode.value === 'add' ? '新增诊单' : '编辑诊单'
})

const diagNotes = ref<any[]>([])

const fetchDiagNotes = async () => {
    if (!formData.value.id) return
    try {
        diagNotes.value = await getDoctorNotes({ diagnosis_id: Number(formData.value.id) }) || []
    } catch { diagNotes.value = [] }
}

const trackingNotes = ref<any[]>([])

const fetchTrackingNotes = async () => {
    if (!formData.value.id) return
    try {
        trackingNotes.value = await diagnosisTrackingNotes({ diagnosis_id: Number(formData.value.id) }) || []
    } catch { trackingNotes.value = [] }
}

watch(() => activeTab.value, async (tab) => {
    if (tab === 'doctorNote' && formData.value.id) {
        await fetchDiagNotes()
    }
    if (tab === 'trackingNote' && formData.value.id) {
        await fetchTrackingNotes()
    }
})

watch([visible, activeTab], () => {
    if (!visible.value) return
    if (activeTab.value === 'chat' && !hasPermission(['tcm.diagnosis/chat'])) {
        activeTab.value = 'basic'
    }
    if (activeTab.value === 'visit' && !hasPermission(['tcm.diagnosis/huifang'])) {
        activeTab.value = 'basic'
    }
    if (
        activeTab.value === 'assignLog' &&
        !hasPermission(['tcm.diagnosis/assign']) &&
        !hasPermission(['tcm.diagnosis/detail'])
    ) {
        activeTab.value = 'basic'
    }
    if (activeTab.value === 'appointmentRecords' && !hasPermission(['doctor.appointment/lists'])) {
        activeTab.value = 'basic'
    }
    if (activeTab.value === 'daily' && !hasDailyRecordPermission.value) {
        activeTab.value = 'basic'
    }
})


const formData = ref({
    id: '',
    patient_id: '',
    patient_name: '',
    id_card: '',
    phone: '',
    gender: 1,
    age: undefined as number | undefined,
    diagnosis_date: '',
    diagnosis_type: '',
    syndrome_type: '',
    diabetes_type: '',
    diabetes_discovery_year: '',
    local_hospital_diagnosis: [],
    local_hospital_name: '',
    marital_status: undefined as number | undefined,
    height: undefined as number | undefined,
    weight: undefined as number | undefined,
    region: '',
    systolic_pressure: undefined as number | undefined,
    diastolic_pressure: undefined as number | undefined,
    fasting_blood_sugar: '',
    appetite: [] as string[],
    water_intake: '',
    diet_condition: [],
    weight_change: '',
    body_feeling: [],
    sleep_condition: [],
    eye_condition: [],
    head_feeling: [],
    sweat_condition: [],
    skin_condition: [],
    urine_condition: [],
    stool_condition: [],
    kidney_condition: [],
    fatty_liver_degree: '',
    past_history: [],
    trauma_history: 0,
    surgery_history: 0,
    allergy_history: 0,
    family_history: 0,
    pregnancy_history: 0,
    assistant_id: undefined as number | undefined,
    symptoms: '',
    tongue_coating: '',
    pulse: '',
    treatment_principle: '',
    prescription: '',
    doctor_advice: '',
    remark: '',
    current_medications: '',
    status: 1,
    external_userid: ''
})

// 保存原始完整数据
const originalPhone = ref('')
const originalIdCard = ref('')
const isPhoneFocused = ref(false)
const isIdCardFocused = ref(false)

// 脱敏函数
const maskPhone = (phone: string) => {
    if (!phone || phone.length < 11) return phone
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

const togglePhoneReveal = () => {
    if (!originalPhone.value) return
    phoneRevealUnlocked.value = !phoneRevealUnlocked.value
}

const maskIdCard = (idCard: string) => {
    if (!idCard) return idCard
    if (idCard.length === 15) {
        return idCard.replace(/(\d{6})\d{5}(\d{4})/, '$1*****$2')
    } else if (idCard.length === 18) {
        return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')
    }
    return idCard
}

// 手机号聚焦 - 显示完整数据（无「明文」权限时仅新增模式在失焦后可再次展开编辑）
const handlePhoneFocus = () => {
    isPhoneFocused.value = true
    if (!originalPhone.value) return
    if (hasPhonePlainPermission.value) {
        formData.value.phone = originalPhone.value
        return
    }
    if (mode.value === 'add') {
        formData.value.phone = originalPhone.value
    }
}

// 手机号失焦：有明文权限则保持明文并校验；新增且无明文权限时仍脱敏展示
const handlePhoneBlur = async () => {
    isPhoneFocused.value = false

    if (hasPhonePlainPermission.value) {
        if (formData.value.phone && formData.value.phone.length === 11) {
            originalPhone.value = formData.value.phone
            if (/^1[3-9]\d{9}$/.test(formData.value.phone)) {
                try {
                    const result = await checkPhone({
                        phone: formData.value.phone,
                        id: formData.value.id || ''
                    })
                    if (result.exists) {
                        ElMessage.warning(result.message)
                    }
                } catch (error) {
                    console.error('检查手机号失败:', error)
                }
            }
        }
        return
    }

    if (mode.value !== 'add') {
        return
    }

    if (formData.value.phone && formData.value.phone.length === 11) {
        originalPhone.value = formData.value.phone
        if (/^1[3-9]\d{9}$/.test(formData.value.phone)) {
            try {
                const result = await checkPhone({
                    phone: formData.value.phone,
                    id: formData.value.id || ''
                })
                if (result.exists) {
                    ElMessage.warning(result.message)
                }
            } catch (error) {
                console.error('检查手机号失败:', error)
            }
        }
        formData.value.phone = maskPhone(formData.value.phone)
    }
}

// 身份证聚焦 - 显示完整数据
const handleIdCardFocus = () => {
    isIdCardFocused.value = true
    if (originalIdCard.value) {
        formData.value.id_card = originalIdCard.value
    }
}

// 身份证失焦 - 恢复脱敏并验证
const handleIdCardBlur = async () => {
    isIdCardFocused.value = false
    
    // 保存原始数据并脱敏显示
    if (formData.value.id_card && (formData.value.id_card.length === 15 || formData.value.id_card.length === 18)) {
        originalIdCard.value = formData.value.id_card
        
        // 验证身份证格式并计算年龄
        if (/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/.test(formData.value.id_card)) {
            // 从身份证提取出生日期计算年龄
            const id = formData.value.id_card
            const birthYear = parseInt(id.substring(6, 10))
            const birthMonth = parseInt(id.substring(10, 12))
            const birthDay = parseInt(id.substring(12, 14))
            const today = new Date()
            let age = today.getFullYear() - birthYear
            if (today.getMonth() + 1 < birthMonth || (today.getMonth() + 1 === birthMonth && today.getDate() < birthDay)) {
                age--
            }
            formData.value.age = age
            
            // 验证身份证唯一性
            try {
                const result = await checkIdCard({
                    id_card: formData.value.id_card,
                    id: formData.value.id || ''
                })
                
                if (result.exists) {
                    ElMessage.warning(result.message)
                }
            } catch (error) {
                console.error('检查身份证号失败:', error)
            }
        }
        
        // 脱敏显示
        formData.value.id_card = maskIdCard(formData.value.id_card)
    }
}

// 自定义验证规则
const validatePhone = (rule: any, value: any, callback: any) => {
    // 使用原始数据进行验证
    const phoneToValidate = originalPhone.value || value
    if (!phoneToValidate) {
        callback(new Error('请输入手机号'))
        return
    }
    if (!/^1[3-9]\d{9}$/.test(phoneToValidate)) {
        callback(new Error('手机号格式不正确'))
        return
    }
    callback()
}

const validateIdCard = (rule: any, value: any, callback: any) => {
    // 使用原始数据进行验证
    const idCardToValidate = originalIdCard.value || value
    if (idCardToValidate && !/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/.test(idCardToValidate)) {
        callback(new Error('身份证号格式不正确'))
        return
    }
    callback()
}

const formRules = {
    patient_name: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
    id_card: [{ validator: validateIdCard, trigger: 'blur' }],
    phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
    gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
    fasting_blood_sugar: [{ required: true, message: '请输入空腹血糖', trigger: 'blur' }],
    diagnosis_type: [{ required: true, message: '请选择诊断类型', trigger: 'change' }],
    diabetes_discovery_year: [{ max: 50, message: '最多50个字符', trigger: 'blur' }],
}

// 获取字典选项
const diagnosisTypeOptions = ref<any[]>([])
const syndromeTypeOptions = ref<any[]>([])
const diabetesTypeOptions = ref<any[]>([])
const pastHistoryOptions = ref<any[]>([])
// 现病史字典选项
const appetiteOptions = ref<any[]>([])
const waterIntakeOptions = ref<any[]>([])
const dietConditionOptions = ref<any[]>([])
const weightChangeOptions = ref<any[]>([])
const bodyFeelingOptions = ref<any[]>([])
const sleepConditionOptions = ref<any[]>([])
const eyeConditionOptions = ref<any[]>([])
const headFeelingOptions = ref<any[]>([])
const sweatConditionOptions = ref<any[]>([])
const skinConditionOptions = ref<any[]>([])
const urineConditionOptions = ref<any[]>([])
const stoolConditionOptions = ref<any[]>([])
const kidneyConditionOptions = ref<any[]>([])
const fattyLiverDegreeOptions = ref<any[]>([])

const getDictOptions = async () => {
    try {
        const [
            diagnosisType, 
            syndromeType,
            diabetesType,
            pastHistory,
            appetite,
            waterIntake,
            dietCondition,
            weightChange,
            bodyFeeling,
            sleepCondition,
            eyeCondition,
            headFeeling,
            sweatCondition,
            skinCondition,
            urineCondition,
            stoolCondition,
            kidneyCondition,
            fattyLiverDegree
        ] = await Promise.all([
            getDictData({ type: 'diagnosis_type' }),
            getDictData({ type: 'syndrome_type' }),
            getDictData({ type: 'diabetes_type' }),
            getDictData({ type: 'past_history' }),
            getDictData({ type: 'appetite' }),
            getDictData({ type: 'water_intake' }),
            getDictData({ type: 'diet_condition' }),
            getDictData({ type: 'weight_change' }),
            getDictData({ type: 'body_feeling' }),
            getDictData({ type: 'sleep_condition' }),
            getDictData({ type: 'eye_condition' }),
            getDictData({ type: 'head_feeling' }),
            getDictData({ type: 'sweat_condition' }),
            getDictData({ type: 'skin_condition' }),
            getDictData({ type: 'urine_condition' }),
            getDictData({ type: 'stool_condition' }),
            getDictData({ type: 'kidney_condition' }),
            getDictData({ type: 'fatty_liver_degree' })
        ])
        
        diagnosisTypeOptions.value = diagnosisType?.diagnosis_type || []
        syndromeTypeOptions.value = syndromeType?.syndrome_type || []
        diabetesTypeOptions.value = diabetesType?.diabetes_type || []
        pastHistoryOptions.value = pastHistory?.past_history || []
        appetiteOptions.value = appetite?.appetite || []
        waterIntakeOptions.value = waterIntake?.water_intake || []
        dietConditionOptions.value = dietCondition?.diet_condition || []
        weightChangeOptions.value = weightChange?.weight_change || []
        bodyFeelingOptions.value = bodyFeeling?.body_feeling || []
        sleepConditionOptions.value = sleepCondition?.sleep_condition || []
        eyeConditionOptions.value = eyeCondition?.eye_condition || []
        headFeelingOptions.value = headFeeling?.head_feeling || []
        sweatConditionOptions.value = sweatCondition?.sweat_condition || []
        skinConditionOptions.value = skinCondition?.skin_condition || []
        urineConditionOptions.value = urineCondition?.urine_condition || []
        stoolConditionOptions.value = stoolCondition?.stool_condition || []
        kidneyConditionOptions.value = kidneyCondition?.kidney_condition || []
        fattyLiverDegreeOptions.value = fattyLiverDegree?.fatty_liver_degree || []
    } catch (error) {
        console.error('获取字典数据失败:', error)
    }
}

async function loadDiagnosisDetailIntoForm(id: number): Promise<void> {
    const data = await tcmDiagnosisDetail({ id })

    originalPhone.value = data.phone || ''
    originalIdCard.value = data.id_card || ''

    data.phone = hasPhonePlainPermission.value ? data.phone || '' : maskPhone(data.phone || '')
    data.id_card = maskIdCard(data.id_card || '')

    formData.value = data
    const y = data.diabetes_discovery_year
    formData.value.diabetes_discovery_year = y == null || y === '' ? '' : String(y)
}

const open = async (type: string, id?: number) => {
    viewOnly.value = false
    mode.value = type
    visible.value = true
    activeTab.value = 'basic' // 重置到基本信息标签页
    phoneRevealUnlocked.value = false

    // 加载字典数据
    await getDictOptions()

    if (type === 'edit' && id) {
        await loadDiagnosisDetailIntoForm(id)
    } else if (type === 'add') {
        const userStore = useUserStore()
        formData.value.assistant_id = userStore.userInfo?.id || ''
        // 字典 diagnosis_type：复诊 → follow_up（见 server/sql/tcm_diagnosis.sql）
        formData.value.diagnosis_type = 'follow_up'
    }
}

/** 只读打开：与编辑同一套界面与全部 Tab，不可保存 */
const openViewOnly = async (id: number) => {
    if (!id) return
    viewOnly.value = true
    mode.value = 'edit'
    visible.value = true
    activeTab.value = 'basic'
    phoneRevealUnlocked.value = false
    await getDictOptions()
    await loadDiagnosisDetailIntoForm(id)
}

const handleSubmit = async () => {
    if (viewOnly.value) return
    await formRef.value?.validate()
    
    submitting.value = true
    try {
        // 准备提交数据，使用原始完整数据
        const submitData = {
            ...formData.value,
            phone: originalPhone.value || formData.value.phone,
            id_card: originalIdCard.value || formData.value.id_card
        }
        
        if (mode.value === 'add') {
            const result = await tcmDiagnosisAdd(submitData)
            
            // 如果是新增，保存成功后切换到编辑模式，这样可以添加血糖血压记录
            if (result && result.id) {
                mode.value = 'edit'
                phoneRevealUnlocked.value = false
                formData.value.id = result.id

                // 重新获取详情，确保patient_id等字段正确
                try {
                    const detail = await tcmDiagnosisDetail({ id: result.id })
                    formData.value.patient_id = detail.patient_id
                    
                    // 更新原始数据
                    originalPhone.value = detail.phone || ''
                    originalIdCard.value = detail.id_card || ''

                    formData.value.phone = hasPhonePlainPermission.value
                        ? detail.phone || ''
                        : maskPhone(detail.phone || '')
                    formData.value.id_card = maskIdCard(detail.id_card || '')
                } catch (error) {
                    console.error('获取详情失败:', error)
                }
            }
        } else {
            await tcmDiagnosisEdit(submitData)
        }
        
        emit('success')
    } catch (error) {
        console.error('提交失败:', error)
    } finally {
        submitting.value = false
    }
}

const handleViewCase = (row: any) => {
    prescriptionRef.value?.openById(row.id)
}

// 开方：传入当前诊单数据，包含详细病历（深拷贝避免响应式引用）
const handleOpenPrescription = () => {
    if (viewOnly.value) return
    const data = {
        id: formData.value.id,
        diagnosis_id: formData.value.id,
        appointment_id: 0,
        patient_name: formData.value.patient_name,
        patient_phone: originalPhone.value || formData.value.phone,
        patient_gender: formData.value.gender,
        patient_age: formData.value.age,
        case_record: JSON.parse(JSON.stringify(formData.value))
    }
    prescriptionRef.value?.open(data)
}

const handleClose = () => {
    formRef.value?.resetFields()
    formData.value = {
        id: '',
        patient_id: '',
        patient_name: '',
        id_card: '',
        phone: '',
        gender: 1,
        age: undefined as number | undefined,
        diagnosis_date: '',
        diagnosis_type: '',
        syndrome_type: '',
        diabetes_type: '',
        diabetes_discovery_year: '',
        local_hospital_diagnosis: [],
        local_hospital_name: '',
        marital_status: undefined as number | undefined,
        height: undefined as number | undefined,
        weight: undefined as number | undefined,
        region: '',
        systolic_pressure: undefined as number | undefined,
        diastolic_pressure: undefined as number | undefined,
        fasting_blood_sugar: '',
        appetite: [] as string[],
        water_intake: '',
        diet_condition: [],
        weight_change: '',
        body_feeling: [],
        sleep_condition: [],
        eye_condition: [],
        head_feeling: [],
        sweat_condition: [],
        skin_condition: [],
        urine_condition: [],
        stool_condition: [],
        kidney_condition: [],
        fatty_liver_degree: '',
        past_history: [],
        trauma_history: 0,
        surgery_history: 0,
        allergy_history: 0,
        family_history: 0,
        pregnancy_history: 0,
        assistant_id: undefined as number | undefined,
        symptoms: '',
        tongue_coating: '',
        pulse: '',
        treatment_principle: '',
        prescription: '',
        doctor_advice: '',
        remark: '',
        current_medications: '',
        status: 1,
        external_userid: ''
    }
    
    // 重置原始数据
    originalPhone.value = ''
    originalIdCard.value = ''
    isPhoneFocused.value = false
    isIdCardFocused.value = false
    phoneRevealUnlocked.value = false
    viewOnly.value = false

    visible.value = false
}

defineExpose({
    open,
    openViewOnly,
    refreshCaseList: () => caseRecordListRef.value?.refresh?.()
})
</script>

<style lang="scss" scoped>
.edit-drawer {
    font-size: 12px;

    .diagnosis-view-fieldset:disabled {
        opacity: 1;
        :deep(.el-input__wrapper),
        :deep(.el-textarea__inner) {
            box-shadow: none;
        }
    }

    :deep(.el-form) {
        padding-bottom: 20px;
        font-size: 12px;
    }

    :deep(.el-divider) {
        margin: 28px 0 22px;
        border-color: transparent;

        &::before,
        &::after {
            border-top-color: #e2e8f0;
        }

        .el-divider__text {
            font-size: 14px;
            font-weight: 600;
            color: #0f172a;
            letter-spacing: -0.01em;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            padding: 7px 16px;
            border-radius: 999px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 2px rgb(15 23 42 / 6%);
        }
    }

    :deep(.el-form-item) {
        margin-bottom: 18px;
    }

    :deep(.el-form-item__label) {
        font-size: 12px;
        font-weight: 500;
        color: #606266;
    }
    
    :deep(.el-input__inner) {
        font-size: 12px;
    }
    
    :deep(.el-textarea__inner) {
        font-size: 12px;
    }
    
    :deep(.el-radio-button__inner) {
        font-size: 12px;
    }
    
    :deep(.el-checkbox-button__inner) {
        font-size: 12px;
    }
    
    :deep(.el-button) {
        font-size: 12px;
    }

    // 紧凑型表单项（单选框）
    .compact-form-item {
        :deep(.el-radio-group) {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            
            .el-radio {
                margin-right: 0;
                margin-bottom: 0;
            }
        }
    }

    // 复选框表单项
    .checkbox-form-item {
        :deep(.el-checkbox-group) {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 16px;
            
            .el-checkbox {
                margin-right: 0;
                margin-bottom: 0;
            }
        }
    }

    // 通用单选框样式
    :deep(.el-radio-group) {
        .el-radio {
            margin-right: 16px;
            margin-bottom: 8px;
            
            &:last-child {
                margin-right: 0;
            }
        }
    }

    // 通用复选框样式
    :deep(.el-checkbox-group) {
        .el-checkbox {
            margin-right: 16px;
            margin-bottom: 8px;
        }
    }
    
    .form-tips {
        font-size: 12px;
        color: #909399;
        margin-top: 4px;
        line-height: 1.5;
    }

    /* 病历 tab 诊断信息 */
    .bingli-tab-content {
        padding: 0 4px;
    }
    .bingli-diagnosis-section {
        margin-bottom: 24px;
        padding: 16px;
        background: #f5f7fa;
        border-radius: 6px;
    }
    .bingli-label {
        font-size: 13px;
        font-weight: 500;
        color: #606266;
        margin-bottom: 10px;
    }
    .bingli-images {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .bingli-img {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        cursor: pointer;
    }
    .bingli-empty {
        font-size: 13px;
        color: #909399;
    }

    // 输入圆角：医疗表单更易扫读
    :deep(.el-input__wrapper) {
        border-radius: 10px;
        transition:
            box-shadow 0.2s ease,
            border-color 0.2s ease;
    }

    :deep(.el-textarea__inner) {
        border-radius: 10px;
    }

    :deep(.el-select .el-input__wrapper) {
        border-radius: 10px;
    }

    :deep(.el-date-editor .el-input__wrapper) {
        border-radius: 10px;
    }

    :deep(.el-input-number .el-input__wrapper) {
        border-radius: 10px;
    }
}

.tcm-dd-header {
    min-width: 0;
    flex: 1;
    padding-right: 8px;
}

.tcm-dd-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.tcm-dd-header__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.tcm-dd-header__badge {
    flex-shrink: 0;
    font-weight: 500;
}

.tcm-dd-header__sub {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
}

.tcm-dd-header__name {
    font-weight: 600;
    color: #334155;
}

.tcm-dd-header__id {
    font-weight: 500;
    color: #64748b;
}

.tcm-dd-header__sep {
    margin: 0 4px;
    color: #94a3b8;
}

.tcm-dd-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px 18px;
    box-sizing: border-box;
    border-top: 1px solid rgb(226 232 240 / 90%);
    background: linear-gradient(180deg, rgb(248 250 252 / 95%) 0%, #fff 40%);
}

.tcm-dd-footer__btn {
    min-height: 40px;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 10px;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.tcm-dd-footer__btn:focus-visible {
    outline: 2px solid var(--el-color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tcm-dd-footer__btn {
        transition: none;
    }
}
</style>

<style lang="scss" scoped>
/* 全局样式，用于提高弹出层的z-index */
.high-z-index {
    z-index: 3000 !important;
}

/* 勿对全局 .el-drawer / .el-overlay 写 z-index，会覆盖子组件的 :z-index（例如从消费处方里嵌套打开只读诊单时会被压在下面） */

/* 确保日期选择器和下拉选择器的弹出层在最上层 */
.el-picker__popper,
.el-select__popper,
.el-popper {
    z-index: 3000 !important;
}

/* 确保Element Plus的弹出层容器在最上层 */
.el-picker-panel,
.el-select-dropdown {
    z-index: 3000 !important;
}
</style>

<style lang="scss">
/**
 * 诊单抽屉壳层（挂到 body 时通过 .diagnosis-drawer 限定作用域）
 */
.diagnosis-drawer.tcm-diagnosis-drawer {
    .el-drawer__header {
        align-items: flex-start !important;
        border-bottom: 1px solid #e2e8f0;
        background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    }

    .el-drawer__body {
        background: #f8fafc;
        min-width: 0;
    }

    .el-drawer__footer {
        padding: 0 !important;
        background: #fff;
        box-shadow: 0 -4px 24px rgb(15 23 42 / 7%);
    }

    /* 多 Tab 标签：保证在窄抽屉内可横向滚动（含 flex 子项 min-width 与 EP 内层 overflow 链） */
    .tcm-diagnosis-tabs.el-tabs {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .tcm-diagnosis-tabs .el-tabs__header {
        min-width: 0;
        width: 100%;
    }

    .tcm-diagnosis-tabs .el-tabs__nav-wrap {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgb(148 163 184 / 55%) transparent;
    }

    .tcm-diagnosis-tabs .el-tabs__nav-wrap::-webkit-scrollbar {
        height: 4px;
    }

    .tcm-diagnosis-tabs .el-tabs__nav-wrap::-webkit-scrollbar-thumb {
        background-color: rgb(148 163 184 / 55%);
        border-radius: 4px;
    }

    .tcm-diagnosis-tabs .el-tabs__nav-scroll {
        overflow: visible !important;
    }

    .tcm-diagnosis-tabs .el-tabs__nav {
        display: flex;
        flex-wrap: nowrap;
        float: none !important;
        width: max-content;
        min-width: 100%;
    }

    .tcm-diagnosis-tabs .el-tabs__item {
        flex: 0 0 auto;
        padding: 0 14px;
        font-weight: 500;
        color: #64748b;
        transition: color 0.2s ease;
    }

    .tcm-diagnosis-tabs .el-tabs__item.is-active {
        color: var(--el-color-primary);
        font-weight: 600;
    }

    .tcm-diagnosis-tabs .el-tabs__active-bar {
        height: 3px;
        border-radius: 3px 3px 0 0;
    }

    .tcm-dd-footer {
        box-shadow: none;
        border-top: 1px solid #e2e8f0;
        background: #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .diagnosis-drawer.tcm-diagnosis-drawer .tcm-diagnosis-tabs .el-tabs__item {
        transition: none;
    }
}

/**
 * 窄屏诊单抽屉：drawer 通过 teleport 挂到 body，scoped 无法作用到内部，此处用抽屉 class 做 H5 适配。
 */
@media screen and (max-width: 768px) {
    .diagnosis-drawer.el-drawer {
        width: 100% !important;
        max-width: 100vw;
    }

    .diagnosis-drawer .el-drawer__header {
        padding: 12px 14px !important;
        margin-bottom: 0 !important;
    }

    .diagnosis-drawer .el-drawer__body {
        padding: 10px 12px 12px !important;
    }

    .diagnosis-drawer .el-drawer__footer {
        padding: 0 !important;
    }

    .diagnosis-drawer .tcm-dd-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .diagnosis-drawer .tcm-dd-footer__btn {
        width: 100%;
        min-height: 44px;
    }

    .diagnosis-drawer .tcm-dd-header__title {
        font-size: 17px;
    }

    .diagnosis-drawer .diagnosis-tabs .el-tabs__header {
        margin: 0 0 10px;
    }

    .diagnosis-drawer .el-tabs__item {
        padding: 0 12px;
        font-size: 13px;
        min-height: 44px;
        line-height: 44px;
    }

    .diagnosis-drawer .el-tabs__nav-wrap::after {
        height: 1px;
    }

    /* 表单：标签在上、控件全宽，避免 160px 标签 + 三列栅格把内容挤没 */
    .diagnosis-drawer .el-form-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin-bottom: 14px !important;
    }

    .diagnosis-drawer .el-form-item__label {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        line-height: 1.4 !important;
        text-align: left !important;
        justify-content: flex-start !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .diagnosis-drawer .el-form-item__content {
        margin-left: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto;
    }

    .diagnosis-drawer .el-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        row-gap: 0;
    }

    .diagnosis-drawer .el-col,
    .diagnosis-drawer .el-col-12,
    .diagnosis-drawer .el-col-8,
    .diagnosis-drawer .el-col-20,
    .diagnosis-drawer [class*='el-col-'] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .diagnosis-drawer .el-input-number {
        width: 100% !important;
    }

    .diagnosis-drawer .el-radio-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px 16px;
        align-items: center;
    }

    .diagnosis-drawer .el-radio {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    .diagnosis-drawer .el-radio-button:last-child {
        margin-right: 0;
    }

    .diagnosis-drawer .el-checkbox-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px 10px;
    }

    .diagnosis-drawer .el-divider {
        margin: 18px 0 14px;
    }

    .diagnosis-drawer .el-divider__text {
        font-size: 13px;
        padding: 0 10px;
    }
}
</style>
