<template>
    <van-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>

        <div class="label-title mt-2" required>采用纸质表格原因</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>

        <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="请填写其他症状"
                :rules="rules.symptomOther"
                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="60~300，整数"
                        :rules="rules.signDiastolicPressure"
                        class="form-input"
                    >
                        <template #extra>
                            <span>mmHg</span>
                        </template>
                    </van-field>
                </td>
            </tr>
        </table>
        <BloodPressureBt :pressureObj="pressureObj" @getValue="setPressureOne">开始测量</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>
        <div class="label-title mt-2" required>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"
            placeholder="如有其他体征情况请填写在此处，限120个字"
            :rules="rules.signOther"
            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 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 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，整数"
                class="card-input"
            >
                <template #extra>
                    <span>岁</span>
                </template>
            </van-field>
        </div>
        <div class="bg-fa mt-2">
            <div class="label-title" required style="color: #262626; font-size: 14px">您最近7天是否吸烟</div>
            <van-field style="padding: 0; width: 100%">
                <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 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，整数"
                class="card-input"
            >
                <template #extra>
                    <span>支</span>
                </template>
            </van-field>
        </div>
        <div 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，整数"
                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 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 class="bg-fa mt-2">
            <div class="label-title" required 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 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，整数"
                    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，整数"
                    class="card-input"
                >
                    <template #extra>
                        <span>ml</span>
                    </template>
                </van-field>
            </div>
        </div>
        <div class="bg-fa mt-2">
            <div class="label-title" style="color: #262626; font-size: 14px">饮酒种类</div>
            <div class="flex">
                <van-field
                    label="白酒"
                    v-model="form.drinkLiquor"
                    placeholder="0~3000，整数"
                    class="card-input"
                    label-width="33px"
                    label-class="label-mr"
                >
                    <template #extra>
                        <span>ml/日</span>
                    </template>
                </van-field>
                <van-field
                    label="啤酒"
                    v-model="form.drinkBeer"
                    placeholder="0~3000，整数"
                    class="card-input ml-2"
                    label-width="33px"
                    label-class="label-mr"
                >
                    <template #extra>
                        <span>ml/日</span>
                    </template>
                </van-field>
            </div>
            <div class="flex mt-2">
                <van-field
                    label="红酒"
                    v-model="form.drinkRed"
                    placeholder="0~3000，整数"
                    class="card-input"
                    label-width="33px"
                    label-class="label-mr"
                >
                    <template #extra>
                        <span>ml/日</span>
                    </template>
                </van-field>
                <van-field
                    label="黄酒"
                    v-model="form.drinkYellow"
                    placeholder="0~3000，整数"
                    class="card-input ml-2"
                    label-width="33px"
                    label-class="label-mr"
                >
                    <template #extra>
                        <span>ml/日</span>
                    </template>
                </van-field>
            </div>
            <div class="flex mt-2">
                <van-field
                    label="其他"
                    v-model="form.drinkOther"
                    placeholder="0~3000，整数"
                    class="card-input"
                    label-width="33px"
                    label-class="label-mr"
                >
                    <template #extra>
                        <span>ml/日</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 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 class="bg-fa mt-2">
            <div class="label-title" required style="color: #262626; font-size: 14px">运动强度</div>
            <van-field 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，整数"
                    class="card-input"
                >
                    <template #extra>
                        <span>次/周</span>
                    </template>
                </van-field>
                <van-field
                    v-model="form.nowExerciseMinute"
                    placeholder="0~500，整数"
                    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，整数"
                    class="card-input"
                >
                    <template #extra>
                        <span>次/周</span>
                    </template>
                </van-field>
                <van-field
                    v-model="form.targetExerciseMinute"
                    placeholder="0~500，整数"
                    class="card-input ml-2"
                >
                    <template #extra>
                        <span>分钟/次</span>
                    </template>
                </van-field>
            </div>
        </div>

        <div class="label-title mt-2" required>摄盐情况（咸淡）</div>
        <van-field 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 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 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> -->
    </van-form>
</template>
<script>
import { useStore } from '@/doctor/store'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
import { checkboxReject } from '@/utils/common'
import BloodPressurePanel from '@/doctor/components/bloodPressure/BloodPressurePanel.vue'
import BloodPressureBt from '@/doctor/components/bloodPressure/BloodPressureBt.vue'
export default {
    components: { CheckBtn, BloodPressurePanel, BloodPressureBt },
    inject: ['pressureObj'],
    data() {
        return {
            store: useStore(),
            form: {},
            rules: {},
            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
        }
    },
    methods: {
        checkboxReject,
        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
        },
        // 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
        // }
    }
}
</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;
}
.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: 4px;
}
</style>