<template>
    <van-form ref="form">
        <div class="first-title">
            <span class="font-semibold">随访信息</span>
            <div class="btn-title">引入数据</div>
        </div>
        <!-- 随访方式 -->
        <div class="label-title mt-2" required>随访方式</div>
        <van-field
            v-model="form.visitWayName"
            isLink
            readonly
            placeholder="请选择"
            :rules="rules.visitWayName"
            @click="showVisitWay = true"
            class="form-input"
        />
        <van-popup v-model:show="showVisitWay" position="bottom">
            <div class="p-4" style="height: 100%">
                <div class="flex justify-between items-center mb-4 pop-title">
                    <div class="greyColor" @click="showVisitWay = false">取消</div>
                    <div>随访方式（单选）</div>
                    <div></div>
                </div>
                <div style="height: 80%; overflow: auto">
                    <CheckBtn
                        clearable
                        column-1
                        :options="store.getDict('CP00052')"
                        v-model:value="form.visitWay"
                        :fieldNames="{ text: 'name', value: 'value' }"
                        @change="visitWayChange"
                    />
                </div>
            </div>
        </van-popup>
        <!-- 症状 -->
        <div class="label-title mt-2" required>症状</div>
        <van-field
            v-model="form.symptomName"
            isLink
            readonly
            placeholder="请选择"
            :rules="rules.symptomName"
            @click="showSymptom = true"
            class="form-input"
        />
        <van-popup v-model:show="showSymptom" position="bottom">
            <div class="p-4" style="height: 100%">
                <div class="flex justify-between items-center mb-4 pop-title">
                    <div class="greyColor" @click="showSymptom = false">取消</div>
                    <div>症状（可多选）</div>
                    <div class="blueColor" @click="symptomConfirm">确定</div>
                </div>
                <div style="height: 80%; overflow: auto">
                    <CheckBtn
                        multiple
                        column-1
                        :options="store.getDict('CP00061')"
                        v-model:value="form.symptom"
                        :fieldNames="{ text: 'name', value: 'value' }"
                        @change="form.symptom = checkboxReject(form.symptom, [1])"
                    />
                </div>
            </div>
        </van-popup>
        <template v-if="(form.symptom || []).includes(99)">
            <div class="label-title mt-2">其他症状</div>
            <van-field
                v-model="form.symptomOther"
                placeholder="请填写其他症状"
                class="form-input"
            />
        </template>
        
        <!-- 身高 -->
        <div class="label-title mt-2" required>身高</div>
        <van-field
            v-model="form.signHeight"
            placeholder="10~300，1位小数"
            :rules="rules.signHeight"
            class="form-input"
        >
            <template #extra>
                <span>cm</span>
            </template>
        </van-field>
        <!-- 体重 -->
        <div class="label-title mt-2" required>体重</div>
        <van-field
            v-model="form.signWeight"
            placeholder="20~500，2位小数"
            :rules="rules.signWeight"
            class="form-input"
        >
            <template #extra>
                <span>kg</span>
            </template>
        </van-field>
        <!-- BMI -->
        <div class="label-title mt-2">BMI（体质指数）</div>
        <van-field
            readonly
            v-model="form.signBmi"
            placeholder="-"
            class="form-input"
        >
            <template #extra>
                <span>kg/m²</span>
            </template>
        </van-field>
        <!-- 呼吸频率 -->
        <div class="label-title mt-2" required>呼吸频率</div>
        <van-field
            v-model="form.respiratoryRate"
            placeholder="0~100，整数"
            :rules="rules.respiratoryRate"
            class="form-input"
        >
            <template #extra>
                <span>次/分钟</span>
            </template>
        </van-field>
        <!-- 心率 -->
        <div class="label-title mt-2" required>心率</div>
        <van-field
            v-model="form.signHeartRate"
            placeholder="0~300，整数"
            :rules="rules.signHeartRate"
            class="form-input"
        >
            <template #extra>
                <span>次/分</span>
            </template>
        </van-field>
        <!-- 口唇紫绀 -->
        <div class="label-title mt-2" required>口唇紫绀</div>
        <van-field :rules="rules.signCyanosis" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.signCyanosis"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('DC00069')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }}
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <!-- 下肢水肿 -->
        <div class="label-title mt-2" required>下肢水肿</div>
        <van-field :rules="rules.signEdema" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.signEdema"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('DC00069')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }}
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <!-- 外周水肿 -->
        <div class="label-title mt-2" required>外周水肿</div>
        <van-field :rules="rules.peripheralEdema" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.peripheralEdema"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('CP00193')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                        style="width: 48%"
                    >
                        {{ item.name }}
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <!-- 其他体征 -->
        <div class="label-title mt-2">其他</div>
        <van-field
            type="textarea"
            v-model="form.signOther"
            :maxlength="120"
            placeholder="如有其他体征情况请填写在此处，限120个字"
            class="form-input"
        />
        <!-- 合并症 -->
        <div class="label-title mt-2" required>合并症</div>
        <van-field
            v-model="form.complicationName"
            isLink
            readonly
            placeholder="请选择"
            :rules="rules.complicationName"
            @click="showComplication = true"
            class="form-input"
        />
        <van-popup v-model:show="showComplication" position="bottom">
            <div class="p-4" style="height: 100%">
                <div class="flex justify-between items-center mb-4 pop-title">
                    <div class="greyColor" @click="showComplication = false">取消</div>
                    <div>症状（可多选）</div>
                    <div class="blueColor" @click="complicationConfirm">确定</div>
                </div>
                <div style="height: 80%; overflow: auto">
                    <CheckBtn
                        multiple
                        column-2
                        :options="store.getDict('CP00189')"
                        v-model:value="form.complication"
                        :fieldNames="{ text: 'name', value: 'value' }"
                        @change="form.complication = checkboxReject(form.complication, [1])"
                    />
                </div>
            </div>
        </van-popup>
        <template v-if="(form.complication || []).includes(8)">
            <div class="label-title mt-2">其他合并症</div>
            <van-field
                v-model="form.complicationOther"
                placeholder="请填写其他症状"
                class="form-input"
            />
        </template>
        <!-- 吸烟 -->
        <div class="label-title mt-2" required>吸烟</div>
        <div class="bg-fa">
            <div class="label-title" required style="color: #262626; font-size: 14px">是否正在吸烟</div>
            <van-field :rules="rules.isSmoking" style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.isSmoking"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('CP00066')"
                            :key="item.value"
                            :name="item.value"
                            label-position="left"
                            style="width: 100%"
                        >
                            {{ item.name }}
                        </van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </div>
        <div v-if="form.isSmoking === 1" class="bg-fa mt-2">
            <div class="label-title" style="color: #262626; font-size: 14px">您大约从几岁起开始养成每天或基本每天都吸烟的习惯</div>
            <van-field
                v-model="form.startSmokeAge"
                placeholder="2~100，整数"
                :rules="rules.startSmokeAge"
                class="card-input"
            >
                <template #extra>
                    <span>岁</span>
                </template>
            </van-field>
        </div>
        <div v-if="form.isSmoking === 1 || form.isSmoking === 2" class="bg-fa mt-2">
            <div class="label-title" style="color: #262626; font-size: 14px">您最近7天是否吸烟</div>
            <van-field style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.lastSevenSmoke"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('DC00001')"
                            :key="item.value"
                            :name="item.value"
                            label-position="left"
                            style="width: 48%"
                        >
                            {{ item.name }}
                        </van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </div>
        <div v-if="form.isSmoking === 1 || form.isSmoking === 2" class="bg-fa mt-2">
            <div class="label-title" style="color: #262626; font-size: 14px">日吸烟量</div>
            <van-field
                v-model="form.daySmoking"
                placeholder="0~100，整数"
                :rules="rules.daySmoking"
                class="card-input"
            >
                <template #extra>
                    <span>支</span>
                </template>
            </van-field>
        </div>
        <div v-if="form.isSmoking === 1 || form.isSmoking === 2" class="bg-fa mt-2">
            <div class="label-title" style="color: #262626; font-size: 14px">目标日吸烟量</div>
            <van-field
                v-model="form.goalDaySmoking"
                placeholder="0~100，整数"
                :rules="rules.goalDaySmoking"
                class="card-input"
            >
                <template #extra>
                    <span>支</span>
                </template>
            </van-field>
        </div>
        
        <!-- 运动 -->
        <div class="label-title mt-2" required>运动</div>
        <div class="bg-fa">
            <div class="label-title" required style="color: #262626; font-size: 14px">有无规律活动</div>
            <van-field :rules="rules.regularExercise" style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.regularExercise"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('DC00069')"
                            :key="item.value"
                            :name="item.value"
                            label-position="left"
                            style="width: 48%"
                        >
                            {{ item.name }}
                        </van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </div>
        <div v-if="form.regularExercise === 1" class="bg-fa mt-2">
            <div class="label-title" required style="color: #262626; font-size: 14px">运动强度</div>
            <van-field :rules="rules.exerciseStrength" style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.exerciseStrength"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('CP00070')"
                            :key="item.value"
                            :name="item.value"
                            label-position="left"
                            style="width: 48%"
                        >
                            {{ item.name }}
                        </van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </div>
        <div class="bg-fa mt-2">
            <div class="label-title" required style="color: #262626; font-size: 14px">目前运动情况</div>
            <div class="flex">
                <van-field
                    v-model="form.nowExerciseWeek"
                    placeholder="0~50，整数"
                    :rules="rules.nowExerciseWeek"
                    class="card-input"
                >
                    <template #extra>
                        <span>次/周</span>
                    </template>
                </van-field>
                <van-field
                    v-model="form.nowExerciseMinute"
                    placeholder="0~500，整数"
                    :rules="rules.nowExerciseMinute"
                    class="card-input ml-2"
                >
                    <template #extra>
                        <span>分钟/次</span>
                    </template>
                </van-field>
            </div>
        </div>
        <div class="bg-fa mt-2">
            <div class="label-title" required style="color: #262626; font-size: 14px">目标运动情况</div>
            <div class="flex">
                <van-field
                    v-model="form.targetExerciseWeek"
                    placeholder="0~50，整数"
                    :rules="rules.targetExerciseWeek"
                    class="card-input"
                >
                    <template #extra>
                        <span>次/周</span>
                    </template>
                </van-field>
                <van-field
                    v-model="form.targetExerciseMinute"
                    placeholder="0~500，整数"
                    :rules="rules.targetExerciseMinute"
                    class="card-input ml-2"
                >
                    <template #extra>
                        <span>分钟/次</span>
                    </template>
                </van-field>
            </div>
        </div>
        <!-- 呼吸锻炼 -->
        <div class="label-title mt-2" required>呼吸锻炼</div>
        <div class="bg-fa">
            <div class="label-title" required style="color: #262626; font-size: 14px">有无呼吸锻炼</div>
            <van-field :rules="rules.isBreathExercise" style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.isBreathExercise"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('DC00069')"
                            :key="item.value"
                            :name="item.value"
                            label-position="left"
                            style="width: 48%"
                        >
                            {{ item.name }}
                        </van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </div>
        <div v-if="form.isBreathExercise === 1" class="bg-fa mt-2">
            <div class="label-title" required style="color: #262626; font-size: 14px">呼吸锻炼频率</div>
            <div class="flex">
                <van-field
                    v-model="form.breathExerciseWeek"
                    placeholder="0~50，整数"
                    :rules="rules.breathExerciseWeek"
                    class="card-input"
                >
                    <template #extra>
                        <span>次/周</span>
                    </template>
                </van-field>
                <van-field
                    v-model="form.breathExerciseMinute"
                    placeholder="0~120，整数"
                    :rules="rules.breathExerciseMinute"
                    class="card-input ml-2"
                >
                    <template #extra>
                        <span>分钟/次</span>
                    </template>
                </van-field>
            </div>
        </div>
        <!-- 健康教育 -->
        <div class="label-title mt-2" required>健康教育</div>
        <van-field :rules="rules.healthEducation" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.healthEducation"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('DC00069')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }}
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <!-- 心理调整 -->
        <div class="label-title mt-2" required>心理调整</div>
        <van-field :rules="rules.psychologicalRecovery" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.psychologicalRecovery"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('CP00072')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }}
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <!-- 遵医行为 -->
        <div class="label-title mt-2" required>遵医行为</div>
        <van-field :rules="rules.doctorAdvice" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.doctorAdvice"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('CP00072')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }}
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <!-- 疫苗免疫史 -->
        <div class="label-title mt-2" required>疫苗免疫史</div>
        <van-field :rules="rules.vaccinesHistory" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.vaccinesHistory"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('DC00069')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }}
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <template v-if="form.vaccinesHistory === 1">
            <div class="label-title mt-2" required>疫苗名称</div>
            <van-field
                v-model="form.vaccinesHistoryHaveName"
                isLink
                readonly
                placeholder="请选择"
                :rules="rules.vaccinesHistoryHaveName"
                @click="showVaccinesHistoryHave = true"
                class="form-input"
            />
            <van-popup v-model:show="showVaccinesHistoryHave" position="bottom">
                <div class="p-4" style="height: 100%">
                    <div class="flex justify-between items-center mb-4 pop-title">
                        <div class="greyColor" @click="showVaccinesHistoryHave = false">取消</div>
                        <div>症状（可多选）</div>
                        <div class="blueColor" @click="vaccinesHistoryHaveConfirm">确定</div>
                    </div>
                    <div style="height: 80%; overflow: auto">
                        <CheckBtn
                            multiple
                            column-1
                            :options="store.getDict('CP00190')"
                            v-model:value="form.vaccinesHistoryHave"
                            :fieldNames="{ text: 'name', value: 'value' }"
                        />
                    </div>
                </div>
            </van-popup>
        </template>
        <!-- 最近三个月内是否有急性加重情况 -->
        <div class="label-title mt-2" required>最近三个月内是否有急性加重情况</div>
        <van-field :rules="rules.acuteExacerbation" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.acuteExacerbation"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('DC00069')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }} 
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <div v-if="form.acuteExacerbation === 1" class="bg-fa mt-2">
            <div class="label-title" required style="color: #262626; font-size: 14px">处理方式</div>
            <van-field :rules="rules.handlingMethod" style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.handlingMethod"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('CP00191')"
                            :key="item.value"
                            :name="item.value"
                            label-position="left"
                            style="width: 31%"
                        >
                            {{ item.name }}
                        </van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </div>
        <div v-if="form.acuteExacerbation === 1 && form.handlingMethod === 2" class="bg-fa mt-2">
            <div class="label-title" style="color: #262626; font-size: 14px">住院医院级别</div>
            <van-field style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.hospitalLevel"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('CP00192')"
                            :key="item.value"
                            :name="item.value"
                            label-position="left"
                            style="width: 48%"
                        >
                            {{ item.name }}
                        </van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </div>
        <!-- 服药依从性 -->
        <div class="label-title mt-2" required>服药依从性</div>
        <van-field :rules="rules.medicationCompliance" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.medicationCompliance"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('CP00080')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }} 
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <!-- 药物不良反应 -->
        <div class="label-title mt-2" required>药物不良反应</div>
        <van-field :rules="rules.drugsAdverse" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.drugsAdverse"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('DC00069')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }} 
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <div v-if="form.drugsAdverse === 1" class="bg-fa mt-2">
            <div class="label-title" style="color: #262626; font-size: 14px">不良反应</div>
            <van-field
                type="textarea"
                v-model="form.drugsAdverseOther"
                :maxlength="120"
                placeholder="请填写具体描述哪种药物，何种不良反应，限120字"
                class="card-input"
            />
        </div>
        <!-- 此次随访分类 -->
        <div class="label-title mt-2" required>此次随访分类</div>
        <van-field :rules="rules.visitType" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.visitType"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('CP00085')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                        style="width: 48%"
                    >
                        {{ item.name }} 
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <!-- 目前诊断 -->
        <div class="label-title mt-2" required>目前诊断</div>
        <van-field
            v-model="form.currentDiagnosisName"
            isLink
            readonly
            placeholder="请选择"
            :rules="rules.currentDiagnosisName"
            @click="showCurrentDiagnosis = true"
            class="form-input"
        />
        <van-popup v-model:show="showCurrentDiagnosis" position="bottom">
            <div class="p-4" style="height: 100%">
                <div class="flex justify-between items-center mb-4 pop-title">
                    <div class="greyColor" @click="showCurrentDiagnosis = false">取消</div>
                    <div>目前诊断（可多选）</div>
                    <div class="blueColor" @click="currentDiagnosisConfirm">确定</div>
                </div>
                <div style="height: 80%; overflow: auto">
                    <CheckBtn
                        multiple
                        column-2
                        :options="store.getDict('CP00086')"
                        v-model:value="form.currentDiagnosis"
                        :fieldNames="{ text: 'name', value: 'value' }"
                    />
                </div>
            </div>
        </van-popup>
        <!-- 家庭氧疗 -->
        <div class="label-title mt-2">家庭氧疗</div>
        <van-field
            label="每日"
            label-width="36px"
            v-model="form.otEveryday"
            placeholder="0~24，整数"
            :rules="rules.otEveryday"
            class="form-input"
        >
            <template #extra>
                <span>小时</span>
            </template>
        </van-field>
        <van-field
            label="氧流量"
            label-width="48px"
            v-model="form.otFlow"
            placeholder="0~10，整数"
            :rules="rules.otFlow"
            class="form-input mt-2"
        >
            <template #extra>
                <span>L</span>
            </template>
        </van-field>
        <div class="bg-fa mt-2">
            <div class="label-title" style="color: #262626; font-size: 14px">副作用</div>
            <van-field style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.otSideEffect"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('DC00069')"
                            :key="item.value"
                            :name="item.value"
                            label-position="left"
                            style="width: 48%"
                        >
                            {{ item.name }}
                        </van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <van-field
                v-if="form.otSideEffect === 1"
                v-model="form.otSideEffectHave"
                placeholder="请填写副作用"
                class="card-input mt-2"
            />
        </div>
        <!-- 无创呼吸机使用 -->
        <div class="label-title mt-2" required>无创呼吸机使用</div>
        <van-field
            label="每日"
            label-width="36px"
            v-model="form.nippvEveryday"
            placeholder="0~24，整数"
            :rules="rules.nippvEveryday"
            class="form-input"
        >
            <template #extra>
                <span>小时</span>
            </template>
        </van-field>
        <div class="bg-fa mt-2">
            <div class="label-title" style="color: #262626; font-size: 14px">副作用</div>
            <van-field style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.nippvSideEffect"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('DC00069')"
                            :key="item.value"
                            :name="item.value"
                            label-position="left"
                            style="width: 48%"
                        >
                            {{ item.name }}
                        </van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <van-field
                v-if="form.nippvSideEffect === 1"
                v-model="form.nippvSideEffectHave"
                placeholder="请填写副作用"
                class="card-input mt-2"
            />
        </div>
        <!-- 转诊 -->
        <div class="label-title mt-2" required>转诊</div>
        <van-field :rules="rules.isReferral" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.isReferral"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('DC00069')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }} 
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <div v-if="form.isReferral === 1" class="bg-fa mt-2">
            <div style="background-color: #fff; padding: 8px; border-radius: 8px">
                <div style="color: #262626; font-size: 14px">转诊原因</div>
                <van-field
                    type="textarea"
                    v-model="form.referralReason"
                    :maxlength="120"
                    placeholder="请填写具体描述转诊原因，限120字"
                    class="form-input mt-2"
                />
            </div>
            <div style="background-color: #fff; padding: 8px; border-radius: 8px" class="mt-2">
                <div style="color: #262626; font-size: 14px">转诊机构</div>
                <van-field
                    v-model="form.referralUnitName"
                    is-link
                    readonly
                    placeholder="请选择"
                    @click="showReferralUnit = true"
                    class="form-input mt-2"
                />
                <DocUnit
                    v-model:show="showReferralUnit"
                    v-model:value="form.referralUnitId"
                    :valueName="form?.referralUnitName"
                    @change="referralUnitChange"
                />
            </div>
            <div style="background-color: #fff; padding: 8px; border-radius: 8px" class="mt-2">
                <div style="color: #262626; font-size: 14px">转诊科室</div>
                <van-field
                    v-model="form.referralOfficeName"
                    is-link
                    readonly
                    placeholder="请选择"
                    @click="showReferralOffice = true"
                    class="form-input mt-2"
                />
                <DocOffice
                    v-model:show="showReferralOffice"
                    v-model:value="form.referralOfficeId"
                    :unitId="form.referralUnitId"
                    @change="referralOfficeChange"
                />
            </div>
        </div>
        <!-- 现场随访照片 -->
        <div class="label-title mt-2">现场随访照片</div>
        <DocImageUpload
            description="最多支持上传8个文件，支持上传图片或PDF文件，图片支持上传jpg、png、jpeg格式，文件大小请勿超过10M。"
            lengthMessage="抱歉，最多可上传8个文件。"
            :imageData="[]" 
            @change="(ids, option) => form.visitImage = ids"
            :maxLength="8"
        />
        <!-- 下次随访日期 -->
        <div class="label-title" required>下次随访日期</div>
        <van-field
            v-model="form.nextVisitDate"
            isLink
            readonly
            placeholder="请选择"
            :rules="rules.nextVisitDate"
            @click="showNextVisitDate = true"
            class="form-input"
        />
        <van-popup v-model:show="showNextVisitDate" position="bottom">
            <van-date-picker
                v-model="form._nextVisitDate" 
                :min-date="nextVisitDateRange.min"
                :max-date="nextVisitDateRange.max"
                @confirm="nextVisitDateConfirm"
                @cancel="showNextVisitDate = false"
            />
        </van-popup>
        <!-- 随访日期 -->
        <div class="label-title mt-2">随访日期</div>
        <van-field
            v-model="form.visitDate"
            isLink
            readonly
            placeholder="请选择"
            :rules="rules.visitDate"
            @click="showVisitDate = true"
            class="form-input"
        />
        <van-popup v-model:show="showVisitDate" position="bottom">
            <van-date-picker
                v-model="form._visitDate" 
                :min-date="visitDateRange.min"
                :max-date="visitDateRange.max"
                @confirm="visitDateConfirm"
                @cancel="showVisitDate = false"
            />
        </van-popup>
        <!-- 随访单位 -->
        <div class="label-title mt-2">随访单位</div>
        <van-field
            v-model="form.visitUnitName"
            is-link
            readonly
            placeholder="请选择"
            @click="showVisitUnit = true"
            class="form-input mt-2"
        />
        <DocUnit
            v-model:show="showVisitUnit"
            v-model:value="form.visitUnitId"
            :valueName="form?.visitUnitName"
            @change="visitUnitChange"
        />
        <!-- 随访科室 -->
        <div class="label-title mt-2">随访科室</div>
        <van-field
            v-model="form.visitOfficeName"
            is-link
            readonly
            placeholder="请选择"
            @click="showVisitOffice = true"
            class="form-input mt-2"
        />
        <DocOffice
            v-model:show="showVisitOffice"
            v-model:value="form.visitOfficeId"
            :unitId="form.visitUnitId"
            @change="visitOfficeChange"
        />
        <!-- 随访医生 -->
        <div class="label-title mt-2">随访医生</div>
        <van-field
            v-model="form.visitDoctorName"
            is-link
            readonly
            placeholder="请选择"
            @click="showVisitDoctor = true"
            class="form-input mt-2"
        />
        <DocOfficeDoctor
            v-model:show="showVisitDoctor"
            :allowClear="false"
            v-model:value="form.visitDoctorId"
            :unitId="form.visitUnitId"
            :officeId="form.visitOfficeId"
            @change="(option) => { form.visitDoctorName = option.staffName }"
        />
    </van-form>
</template>
<script>
import { useStore } from '@/doctor/store'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
import { checkboxReject, calculateBMI, fetchDataHandle } from '@/utils/common'
import BloodPressurePanel from '@/doctor/components/bloodPressure/BloodPressurePanel.vue'
import BloodPressureBt from '@/doctor/components/bloodPressure/BloodPressureBt.vue'
import DocImageUpload from '@/doctor/components/docImageUpload/DocImageUpload.vue'
import DocUnit from '@/doctor/components/docUnit/DocUnit.vue'
import DocOffice from '@/doctor/components/docOffice/DocOffice.vue'
import DocOfficeDoctor from '@/doctor/components/docOfficeDoctor/DocOfficeDoctor.vue'
export default {
    components: { CheckBtn, BloodPressurePanel, BloodPressureBt, DocImageUpload, DocUnit, DocOffice, DocOfficeDoctor },
    inject: ['pressureObj'],
    data() {
        return {
            store: useStore(),
            form: {},
            rules: {
                visitWayName: [
                    { required: true, message: '请选择随访方式' }
                ],
                symptomName: [
                    { required: true, message: '请选择症状' }
                ],
                signHeight: [
                    { required: true, message: '请填写身高' },
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+(\.\d{1})?$/
                            if (value && !(regex.test(value) && Number(value) >= 10 && Number(value) <= 300)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入10到300之间的数字，允许一位小数`
                    }
                ],
                signWeight: [
                    { required: true, message: '请填写体重' },
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+(\.\d{1,2})?$/
                            if (value && !(regex.test(value) && Number(value) >= 20 && Number(value) <= 500)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入20到500之间的数字，允许两位小数`
                    }
                ],
                respiratoryRate: [
                    { required: true, message: '请填写呼吸频率' },
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 100)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到100之间的整数`
                    }
                ],
                signHeartRate: [
                    { required: true, message: '请填写心率' },
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 300)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到300之间的整数`
                    }
                ],
                signCyanosis: [
                    { required: true, message: '请选择' }
                ],
                signEdema: [
                    { required: true, message: '请选择' }
                ],
                peripheralEdema: [
                    { required: true, message: '请选择' }
                ],
                complicationName: [
                    { required: true, message: '请选择' }
                ],
                isSmoking: [
                    { required: true, message: '请选择' }
                ],
                startSmokeAge: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 2 && Number(value) <= 100)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入2到100之间的整数`
                    }
                ],
                daySmoking: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 100)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到100之间的整数`
                    }
                ],
                goalDaySmoking: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 100)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到100之间的整数`
                    }
                ],
                regularExercise: [
                    { required: true, message: '请选择' }
                ],
                exerciseStrength: [
                    { required: true, message: '请选择' }
                ],
                nowExerciseWeek: [
                    { required: true, message: '请输入' },
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 50)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到50之间的整数`
                    }
                ],
                nowExerciseMinute: [
                    { required: true, message: '请输入' },
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 500)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到500之间的整数`
                    }
                ],
                targetExerciseWeek: [
                    { required: true, message: '请输入' },
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 50)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到50之间的整数`
                    }
                ],
                targetExerciseMinute: [
                    { required: true, message: '请输入' },
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 500)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到500之间的整数`
                    }
                ],
                isBreathExercise: [
                    { required: true, message: '请选择' }
                ],
                breathExerciseWeek: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 50)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到50之间的整数`
                    }
                ],
                breathExerciseMinute: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 120)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到120之间的整数`
                    }
                ],
                saltIntake: [
                    { required: true, message: '请选择' }
                ],
                psychologicalRecovery: [
                    { required: true, message: '请选择' }
                ],
                doctorAdvice: [
                    { required: true, message: '请选择' }
                ],
                vaccinesHistory: [
                    { required: true, message: '请选择' }
                ],
                acuteExacerbation: [
                    { required: true, message: '请选择' }
                ],
                handlingMethod: [
                    { required: true, message: '请选择' }
                ],
                medicationCompliance: [
                    { required: true, message: '请选择' }
                ],
                drugsAdverse: [
                    { required: true, message: '请选择' }
                ],
                visitType: [
                    { required: true, message: '请选择' }
                ],
                currentDiagnosisName: [
                    { required: true, message: '请选择' }
                ],
                isReferral: [
                    { required: true, message: '请选择' }
                ],
                nextVisitDate: [
                    { required: true, message: '请选择' }
                ]
            },
            showVisitWay: false,
            showSymptom: false,
            showComplication: false,
            showVaccinesHistoryHave: false,
            // showAuxiliaryExamination: false
            showCurrentDiagnosis: false,
            showReferralUnit: false,
            showReferralOffice: false,
            showNextVisitDate: false,
            nextVisitDateRange: {
                min: undefined,
                max: undefined
            },
            showVisitDate: false,
            visitDateRange: {
                min: undefined,
                max: undefined
            },
            showVisitUnit: false,
            showVisitOffice: false,
            showVisitDoctor: false
        }
    },
    methods: {
        checkboxReject,
        calculateBMI,
        visitWayChange() {
            this.store.getDict('CP00052').forEach(item => {
                if (item.value === this.form.visitWay) {
                    this.form.visitWayName = item.name
                }
            })
            this.showVisitWay = false
        },
        symptomConfirm() {
            let list = []
            this.store.getDict('CP00061').forEach(item => {
                let selected = this.form.symptom.filter(e => e === item.value)
                if (selected && selected.length) {
                    list.push(item.name)
                }
            })
            this.form.symptomName = list.join()
            this.showSymptom = false
        },
        complicationConfirm() {
            let list = []
            this.store.getDict('CP00189').forEach(item => {
                let selected = this.form.complication.filter(e => e === item.value)
                if (selected && selected.length) {
                    list.push(item.name)
                }
            })
            this.form.complicationName = list.join()
            this.showComplication = false
        },
        vaccinesHistoryHaveConfirm() {
            let list = []
            this.store.getDict('CP00190').forEach(item => {
                let selected = this.form.vaccinesHistoryHave.filter(e => e === item.value)
                if (selected && selected.length) {
                    list.push(item.name)
                }
            })
            this.form.vaccinesHistoryHaveName = list.join()
            this.showVaccinesHistoryHave = false
        },
        currentDiagnosisConfirm() {
            let list = []
            this.store.getDict('CP00086').forEach(item => {
                let selected = this.form.currentDiagnosis.filter(e => e === item.value)
                if (selected && selected.length) {
                    list.push(item.name)
                }
            })
            this.form.currentDiagnosisName = list.join()
            this.showCurrentDiagnosis = false
        },
        referralUnitChange(option = {}) {
            this.form.referralUnitName = option.unitName
        },
        referralOfficeChange(option = {}) {
            this.form.referralOfficeName = option.officeName
        },
        nextVisitDateConfirm({ selectedValues }) {
            this.form.nextVisitDate = selectedValues.join('-')
            this.showNextVisitDate = false
        },
        visitDateConfirm({ selectedValues }) {
            this.form.visitDate = selectedValues.join('-')
            this.showVisitDate = false
        },
        visitUnitChange(option = {}) {
            this.form.visitUnitName = option.unitName
        },
        visitOfficeChange(option = {}) {
            this.form.visitOfficeName = option.officeName
        },

        submit() {
            return new Promise((resolve, reject) => {
                this.$refs.form.validate().then(() => {
                    const form = fetchDataHandle(this.form, {
                        symptom: 'arrToStr',
                        complication: 'arrToStr',
                        currentDiagnosis: 'arrToStr'
                    })
                    resolve(form)
                }).catch(e => {

                })
            })
        }
    },
    watch: {
        'form.signHeight': {
            handler() {
                this.form.signBmi = this.calculateBMI(this.form.signHeight, this.form.signWeight)
            }
        },
        'form.signWeight': {
            handler() {
                this.form.signBmi = this.calculateBMI(this.form.signHeight, this.form.signWeight)
            }
        },
    }
}
</script>
<style lang="less" scoped>
.first-title {
    display: flex;
    align-items: center;
    .btn-title {
        background-color: #F0F3FF;
        color: #607FF0;
        border-radius: 9999px;
        padding: 4px 16px;
        margin-left: 8px;
    }
}
.label-title {
    font-size: 13px;
    color: #595959;
    font-weight: 500;
    margin-bottom: 8px;
    &[required] {
        &::after {
            content: '*';
            color: #FF4D4F;
            font-weight: bold;
            margin-left: 4px;
        }
    }
}
.form-input {
    background-color: #FAFAFA;
    padding: 8px 12px;
    border-radius: 8px;
}
:deep(.van-cell:after) {
    border-bottom: 0px;
}
:deep(.van-popup) {
    height: 50% !important;
}
.pop-title {
    color: #262626;
    font-size: 16px;
    font-weight: 600;
}
.greyColor {
    color: var(--van-text-color-2);
    font-weight: 400;
}
.blueColor {
    color: #607FF0;
    font-weight: 500;
}
.sub-text {
    color: #595959;
    font-size: 13px;
    font-weight: 400;
    padding-bottom: 8px;
}
.tip {
    color: #FA8C16;
    font-size: 12px;
    margin-top: 8px;
    line-height: 16px;
}
.bg-fa {
    background-color: #FAFAFA;
    padding: 8px;
    border-radius: 8px;
}
.doc-radio-group-now {
    column-gap: 8px;
    row-gap: 8px;
    background-color: #FAFAFA;
    width: 100%;
    .van-radio {
        background-color: #FFFFFF;
        
        padding: 8px 12px;
        border-radius: 8px;
        justify-content: space-between;
        margin-right: 0;
    }
}
.card-input {
    padding: 8px 12px;
    border-radius: 8px;
}
:deep(.label-mr) {
    margin-right: 8px;
}
</style>