<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="list"
                        v-model:value="form.visitWay"
                        :fieldNames="{ text: 'name', value: 'value' }"
                        @change="visitWayChange"
                    />
                </div>
            </div>
        </van-popup>
        <template v-if="form.visitWay === 5 || form.visitWay === 6">
            <div class="label-title mt-2">采用纸质表格原因</div>
            <van-field
                v-model="form.paperReasonsName"
                isLink
                readonly
                placeholder="请选择"
                :rules="rules.paperReasonsName"
                @click="showPaperReasons = true"
                class="form-input"
            />
            <van-popup v-model:show="showPaperReasons" position="bottom">
                <div class="p-4" style="height: 100%">
                    <div class="flex justify-between items-center mb-4 pop-title">
                        <div class="greyColor" @click="showPaperReasons = false">取消</div>
                        <div>采用纸质表格原因（单选）</div>
                        <div></div>
                    </div>
                    <div style="height: 80%; overflow: auto">
                        <CheckBtn
                            clearable
                            column-1
                            :options="store.getDict('CP00055')"
                            v-model:value="form.paperReasons"
                            :fieldNames="{ text: 'name', value: 'value' }"
                            @change="paperReasonsChange"
                        />
                    </div>
                </div>
            </van-popup>
        </template>
        <!-- 症状 -->
        <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-2
                        :options="store.getDict('CP00058')"
                        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="flex items-center justify-between tip-box mt-2 mb-2">
            <div class="label-title" required>血压</div>
            <BloodPressurePanel :pressureObj="pressureObj" />
        </div>
        <table class="w-full mb-2">
            <tr class="sub-text">
                <td>收缩压（SBP）</td>
                <td style="width: 1em"></td>
                <td>舒张压（DBP）</td>
            </tr>
            <tr>
                <td class="flex items-center">
                    <van-field
                        v-model="form.signSystolicPressure"
                        placeholder="60~300，整数"
                        :rules="rules.signSystolicPressure"
                        class="form-input"
                    >
                        <template #extra>
                            <span>mmHg</span>
                        </template>
                    </van-field>
                </td>
                <td class="text-center">
                    <span class="divide">/</span>
                </td>
                <td class="flex items-center">
                    <van-field
                        v-model="form.signDiastolicPressure"
                        placeholder="30~300，整数"
                        :rules="rules.signDiastolicPressure"
                        class="form-input"
                    >
                        <template #extra>
                            <span>mmHg</span>
                        </template>
                    </van-field>
                </td>
            </tr>
        </table>
        <BloodPressureBt :pressureObj="pressureObj" @getValue="setPressure">开始测量</BloodPressureBt>
        <div class="tip">提示：点击“开始测量”按钮后将自动启动血压计设备，请勿再重复点击设备“开始/停止”按钮。</div>
        <!-- 身高 -->
        <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.signWaistline"
            placeholder="10~150，1位小数"
            :rules="rules.signWaistline"
            class="form-input"
        >
            <template #extra>
                <span>cm</span>
            </template>
        </van-field>
        <!-- 心率 -->
        <div class="label-title mt-2" required>心率</div>
        <van-field
            v-model="form.signHeartRate"
            placeholder="10~200，整数"
            :rules="rules.signHeartRate"
            class="form-input"
        >
            <template #extra>
                <span>次/分</span>
            </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>
        <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.isDrink" style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.isDrink"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('CP00068')"
                            :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.isDrink === 1" 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.drinkCondition"
                        shape="dot"
                        direction="horizontal"
                        class="doc-radio-group-now"
                    >
                        <van-radio
                            v-for="item in store.getDict('CP00069')"
                            :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.isDrink === 1 || form.isDrink === 2" class="flex mt-2">
            <div class="bg-fa">
                <div class="label-title" style="color: #262626; font-size: 14px">日饮酒量</div>
                <van-field
                    v-model="form.dayDrink"
                    placeholder="0~3000，整数"
                    :rules="rules.dayDrink"
                    class="card-input"
                >
                    <template #extra>
                        <span>ml</span>
                    </template>
                </van-field>
            </div>
            <div class="bg-fa ml-2">
                <div class="label-title" style="color: #262626; font-size: 14px">目标日饮酒量</div>
                <van-field
                    v-model="form.goalDayDrink"
                    placeholder="0~3000，整数"
                    :rules="rules.goalDayDrink"
                    class="card-input"
                >
                    <template #extra>
                        <span>ml</span>
                    </template>
                </van-field>
            </div>
        </div>
        <div v-if="form.isDrink === 1 || form.isDrink === 2" class="bg-fa mt-2">
            <div class="label-title" style="color: #262626; font-size: 14px">饮酒种类</div>
            <van-field
                label="白酒"
                v-model="form.drinkLiquor"
                placeholder="0~3000，整数"
                :rules="rules.drinkLiquor"
                class="card-input"
                label-width="36px"
                label-class="label-mr"
            >
                <template #extra>
                    <span>ml/日</span>
                </template>
            </van-field>
            <van-field
                label="啤酒"
                v-model="form.drinkBeer"
                placeholder="0~3000，整数"
                :rules="rules.drinkBeer"
                class="card-input mt-2"
                label-width="36px"
                label-class="label-mr"
            >
                <template #extra>
                    <span>ml/日</span>
                </template>
            </van-field>
            <van-field
                label="红酒"
                v-model="form.drinkRed"
                placeholder="0~3000，整数"
                :rules="rules.drinkRed"
                class="card-input mt-2"
                label-width="36px"
                label-class="label-mr"
            >
                <template #extra>
                    <span>ml/日</span>
                </template>
            </van-field>
            <van-field
                label="黄酒"
                v-model="form.drinkYellow"
                placeholder="0~3000，整数"
                :rules="rules.drinkYellow"
                class="card-input mt-2"
                label-width="36px"
                label-class="label-mr"
            >
                <template #extra>
                    <span>ml/日</span>
                </template>
            </van-field>
            <van-field
                label="其他"
                v-model="form.drinkOther"
                placeholder="0~3000，整数"
                :rules="rules.drinkOther"
                class="card-input mt-2"
                label-width="36px"
                label-class="label-mr"
            >
                <template #extra>
                    <span>ml/日</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>
        <van-field :rules="rules.saltIntake" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.saltIntake"
                    shape="dot"
                    direction="horizontal"
                    class="w-full doc-radio-group"
                >
                    <van-radio
                        v-for="item in store.getDict('CP00071')"
                        :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">辅助检查</div>
        <van-field
            v-model="form.auxiliaryExaminationName"
            isLink
            readonly
            placeholder="请选择"
            :rules="rules.auxiliaryExaminationName"
            @click="showAuxiliaryExamination = true"
            class="form-input"
        />
        <van-popup v-model:show="showAuxiliaryExamination" position="bottom">
            <div class="p-4" style="height: 100%">
                <div class="flex justify-between items-center mb-4 pop-title">
                    <div class="greyColor" @click="showAuxiliaryExamination = false">取消</div>
                    <div>辅助检查（可多选）</div>
                    <div class="blueColor" @click="auxiliaryConfirm">确定</div>
                </div>
                <div style="height: 80%; overflow: auto">
                    <CheckBtn
                        multiple
                        column-2
                        :options="store.getDict('CP00073')"
                        v-model:value="form.auxiliaryExamination"
                        :fieldNames="{ text: 'name', value: 'value' }"
                    />
                </div>
            </div>
        </van-popup> -->

        <!-- 目前高血压用药及依从性 -->
        <div class="label-title mt-2" required>目前高血压用药及依从性</div>
        <div class="bg-fa">
            <div class="label-title" required style="color: #262626; font-size: 14px; line-height: 24px">您目前是否在服用降压药、降脂(如他汀类)或抗血小板(如阿司匹林)等心血管病相关药物</div>
            <van-field :rules="rules.medicationCompliance" style="padding: 0">
                <template #input>
                    <van-radio-group
                        v-model="form.medicationCompliance"
                        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 class="bg-fa mt-2">
            <div class="label-title" required style="color: #262626; font-size: 14px; line-height: 24px">请您确认患者目前服用的降压药、降脂或抗血小板药，在下表中修改或增加，并记录上次随访以来服用的降压药物的依从性</div>
            <div style="background-color: #FFF; padding: 8px; border-radius: 10px">
                <van-field
                    label="药物名称"
                    v-model="form.drinkOther"
                    placeholder="0~3000，整数"
                    class="form-input"
                    label-width="72px"
                    label-class="label-mr"
                >

                </van-field>
                <van-field
                    label="剂量"
                    v-model="form.drinkOther"
                    placeholder="0~3000，整数"
                    class="form-input mt-2"
                    label-width="36px"
                    label-class="label-mr"
                >

                </van-field>
                <van-field
                    label="频次"
                    v-model="form.drinkOther"
                    placeholder="0~3000，整数"
                    class="form-input mt-2"
                    label-width="36px"
                    label-class="label-mr"
                >

                </van-field>
                <van-field
                    label="用法"
                    v-model="form.drinkOther"
                    placeholder="0~3000，整数"
                    class="form-input mt-2"
                    label-width="36px"
                    label-class="label-mr"
                >

                </van-field>
                <van-field
                    label="服药依从性"
                    v-model="form.drinkOther"
                    placeholder="0~3000，整数"
                    class="form-input mt-2"
                    label-width="84px"
                    label-class="label-mr"
                >

                </van-field>
                <van-field
                    label="不依从原因"
                    v-model="form.drinkOther"
                    placeholder="0~3000，整数"
                    class="form-input mt-2"
                    label-width="84px"
                    label-class="label-mr"
                >

                </van-field>
            </div>
        </div> -->
        <!-- 药物不良反应 -->
        <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" 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: '请选择症状' }
                ],
                signSystolicPressure: [
                    { required: true, message: '请填写收缩压' }
                ],
                signDiastolicPressure: [
                    { 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之间的数字，允许两位小数`
                    }
                ],
                signWaistline: [
                    { required: true, message: '请填写腰围' },
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+(\.\d{1})?$/
                            if (value && !(regex.test(value) && Number(value) >= 10 && Number(value) <= 150)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入10到150之间的数字，允许一位小数`
                    }
                ],
                signHeartRate: [
                    { required: true, message: '请填写心率' },
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 10 && Number(value) <= 200)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入10到200之间的整数`
                    }
                ],
                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之间的整数`
                    }
                ],
                isDrink: [
                    { required: true, message: '请选择' }
                ],
                dayDrink: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 3000)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到3000之间的整数`
                    }
                ],
                goalDayDrink: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 3000)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到3000之间的整数`
                    }
                ],
                drinkLiquor: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 3000)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到3000之间的整数`
                    }
                ],
                drinkBeer: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 3000)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到3000之间的整数`
                    }
                ],
                drinkRed: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 3000)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到3000之间的整数`
                    }
                ],
                drinkYellow: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 3000)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到3000之间的整数`
                    }
                ],
                drinkOther: [
                    {
                        validator: (value, rule) => {
                            let res = true
                            const regex = /^\d+$/
                            if (value && !(regex.test(value) && Number(value) >= 0 && Number(value) <= 3000)) {
                                res = false
                            }
                            return res
                        },
                        message: `请输入0到3000之间的整数`
                    }
                ],
                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之间的整数`
                    }
                ],
                saltIntake: [
                    { required: true, message: '请选择' }
                ],
                psychologicalRecovery: [
                    { required: true, message: '请选择' }
                ],
                doctorAdvice: [
                    { 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,
            list: [
                {
                    value: 1,
                    name: '面访（家庭）'
                },
                {
                    value: 2,
                    name: '面访（门诊）'
                },
                {
                    value: 3,
                    name: '远程视频随访'
                },
                {
                    value: 4,
                    name: '电话随访'
                },
                {
                    value: 5,
                    name: '面访先填纸质表格，后录入电子系统（家庭）'
                },
                {
                    value: 6,
                    name: '面访先填纸质表格，后录入电子系统（门诊）'
                }
            ],
            showPaperReasons: false,
            showSymptom: 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.list.forEach(item => {
                if (item.value === this.form.visitWay) {
                    this.form.visitWayName = item.name
                }
            })
            this.showVisitWay = false
        },
        paperReasonsChange() {
            this.store.getDict('CP00055').forEach(item => {
                if (item.value === this.form.paperReasons) {
                    this.form.paperReasonsName = item.name
                }
            })
            this.showPaperReasons = false
        },
        symptomConfirm() {
            let list = []
            this.store.getDict('CP00058').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
        },
        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
        },
        // auxiliaryConfirm() {
        //     let list = []
        //     this.store.getDict('CP00073').forEach(item => {
        //         let selected = this.form.auxiliaryExamination.filter(e => e === item.value)
        //         if (selected && selected.length) {
        //             list.push(item.name)
        //         }
        //     })
        //     this.form.auxiliaryExaminationName = list.join()
        //     this.showAuxiliaryExamination = false
        // }
        setPressure(val) {
            if (!val) return
            this.form.signSystolicPressure = val.systolicPressure
            this.form.signDiastolicPressure = val.diastolicPressure
        },
        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',
                        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>