<template>
    <div class='flex flex-col' style='height: 100vh'>
        <div class='p-3 text-black text-center shrink-0 doc-nav-bar'>
            <span @click='onBack' class='text-12 back-bt'>
                <doc-icon type='doc-left2' />
            </span>
            <span>专病筛查详情</span>
        </div>
        <div class='px-4 py-3 flex shrink-0 base-info'>
            <div class='flex w-full'>
                <div class='grow flex flex-col justify-between'>
                    <div class='flex justify-between'>
                        <span class='name'>{{ residentInfo.residentName }}</span>

                    </div>
                    <div class='top-label mt-3'>
                        <span>报告日期：<span class='color-b'>{{ info.screenDate || '-' }}</span></span>
                    </div>
                    <div class='top-label'>
                        <span>慢病高危评估结果：</span>
                    </div>
                    <div class='top-label color-b'>
                        <span v-if='info.specialScreenResult && info.specialScreenResult !=9'>您存在<span
                            class='color-red'>{{ info.specialScreenResultName }}</span>风险，请及时前往医院诊断确认。</span>
                        <span v-if='info.specialScreenResult ==9'>您并未存在高危风险。</span>
                    </div>
                    <div v-if='info.specialScreenResult && info.specialScreenResult !=9'
                         class='flex items-center flex-wrap gap-x-2.5 gap-y-1 mt-2'>
                        <div v-for='(item, index) in highRiskList' :key='index' class='tag tag-red'
                             @click='toShowHighRisk(item)'>
                            <span>{{ item.name }}：</span><span class='color-red'>{{ item.num || 0 }}项</span>
                        </div>
                    </div>
                </div>
            </div>
            <van-popup v-model:show='showRiskHighItem' position='bottom'>
                <div class='p-4' style='height: 100%'>
                    <div class='flex justify-between items-center mb-4 pop-title'>
                        <div></div>
                        <div>存在以下风险元素</div>
                        <div @click='showRiskHighItem = false' style='font-weight: 400'>取消</div>
                    </div>
<!--                    <div class=''></div>-->
                    <div style='height: 80%;overflow: auto'>
                      <div class='pt-3 pb-3 bg-white h-full'>
                       <div v-for='(item, index) in riskHighItemList' :key='item.id'>
                           <div class='detail-content flex'>

                               <div>{{index+1}}、</div>
                               <div>{{item.name}}</div>
                           </div>
                       </div>
                      </div>
                    </div>
                </div>
            </van-popup>

        </div>
        <div class='p-3 grow cont-box'>
            <div class='p-3 h-full cont-inner'>
                <div class='flex justify-between collapse-head mt-2'>
                    <span class='text-16 font-semibold'>全部内容</span>
                    <span @click='toggleAll'>
                        <span v-if='!collapseAll'>展开全部</span>
                        <span v-else>展开收起</span>
                        <span :class="['ml-2 icon-down', { 'icon-down-expanded': collapseAll }]">
                            <doc-icon type='doc-down' />
                        </span>
                    </span>
                </div>

                <van-collapse :model-value='activeCollapse' ref='collapse' class='doc-collapse'
                              @change='collapseChange'>
                    <van-collapse-item key='1' title='居民信息' name='1'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div v-for='item in columnsBase' :key='item.key'>
                                <div class='flex justify-between py-1 border-bottom item'>
                                    <span class='shrink-0 mr-2 label'>{{ item.title }}</span>
                                    <span
                                        v-if="item.key === 'idCard'">{{ $idCardHide(residentInfo.idCard) || '-'
                                        }}</span>
                                    <span class='text-end' v-else>
                                        <span>{{ residentInfo[item.key] || '-' }}</span>
                                        <span v-if='item.unit' class='ml-1'>{{ item.unit }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='2' title='筛查病种' name='2'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>筛查病种</span>
                                <span class='text-end'>
                                        <span>{{ info.diseaseArraysName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>

                    <van-collapse-item key='3' title='病史' name='3' v-if='medicalHistoryShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>病史</span>
                                <span class='text-end'>
                                        <span>{{ info.medicalHistoryName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='4' title='家族史' name='4' v-if='familyHistoryShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>家族史</span>
                                <span class='text-end'>
                                        <span>{{ info.familyHistoryName || '-' }}</span>
                                    </span>
                            </div>
                            <div>
                                <div class='flex items-center' v-for='item in info.diseaseRelativeList'>
                                    <template v-if='item.relativeAgeList.filter(e => e.age).length'>
                                        <div class='mt-2'>{{ item.diseaseTypeName }}：</div>
                                        <div class='mt-2'>
                                         <span v-for='item1 in item.relativeAgeList'>
                                         <span v-if='item1.age'>{{ item1.relativeTypeName }}：</span>
                                         <span v-if='item1.age'>{{ item1.age || '-' }} 岁；</span>
                                         </span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='5' title='身高' name='5' v-if='highShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>身高</span>
                                <span class='text-end'>
                                        <span>{{ info.height || '-' }} cm</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='6' title='体重' name='6' v-if='highShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>体重</span>
                                <span class='text-end'>
                                        <span>{{ info.weight || '-' }} kg</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='7' title='BMI（体质指数）' name='7' v-if='highShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>BMI（体质指数）</span>
                                <span class='text-end'>
                                        <span>{{ info.bmi || '-' }} kg/m²</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='8' title='腰围' name='8' v-if='waistShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>腰围</span>
                                <span class='text-end'>
                                        <span>{{ info.waistline || '-' }} cm</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='9' title='锻炼频率' name='9' v-if='exerciseShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>锻炼频率</span>
                                <span class='text-end'>
                                        <span>{{ info.exerciseFrequencyName || '-' }}</span>
                                        <span
                                            v-if='info.exerciseFrequency == 2 && info.isExerciseFiveName'>({{ info.isExerciseFiveName }})</span>
                                    </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'
                                 v-if='[1,2,3].includes(info.exerciseFrequency) && exerciseShow'>
                                <span class='shrink-0 mr-2 label'>每次锻炼时间</span>
                                <span class='text-end'>
                                        <span>{{ info.everyExercise || '-' }} 分钟</span>
                                    </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'
                                 v-if='[1,2,3].includes(info.exerciseFrequency) && exerciseShow'>
                                <span class='shrink-0 mr-2 label'>可达到中等及以上运动强度</span>
                                <span class='text-end'>
                                        <span>{{ info.mediumStrengthName }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='10' title='女性病史' name='10' v-if='womanMHShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>女性病史</span>
                                <span class='text-end'>
                                        <span>{{ info.femaleMedicalHistoryName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='11' title='用药史' name='11' v-if='medicationHShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>用药史</span>
                                <span class='text-end'>
                                        <span>{{ info.medicineHistoryName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='12' title='高密度脂蛋白胆固醇' name='12' v-if='triglycerideShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>高密度脂蛋白胆固醇</span>
                                <span class='text-end'>
                                        <span>{{ info.hdlCholesterin || '-' }} mmol/L</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='13' title='甘油三酯' name='13' v-if='triglycerideShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>甘油三酯</span>
                                <span class='text-end'>
                                        <span>{{ info.triglyceride || '-' }} mmol/L</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='14' title='总胆固醇' name='14' v-if='triglycerideShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>总胆固醇</span>
                                <span class='text-end'>
                                        <span>{{ info.serumCholesterin || '-' }} mmol/L</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='15' title='有害物质接触或婴幼儿时期病史' name='15' v-if='babyMHShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span>
                                        <span>{{ info.touchHarmfulName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='16' title='血压(左侧右侧)值(SBP/DBP)' name='16' v-if='bloodPressureShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <div>
                                    <div>第一次：{{ info.pressureOneSbp }}-{{ info.pressureOneDbp }} mmHg；</div>
                                    <div class='mt-2'>第二次：{{ info.pressureTwoSbp }}-{{ info.pressureTwoDbp }} mmHg</div>
                                </div>

                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='17' title='饮食习惯' name='17' v-if='eatHabitShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>饮食习惯</span>
                                <span class='text-end'>
                                        <span>{{ info.dietaryHabitName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='18' title='饮酒情况' name='18' v-if='drinkShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>饮酒频率</span>
                                <span class='text-end'>
                                        <span>{{ info.drinkFrequencyName || '-' }}</span>
                                    </span>
                            </div>
                            <div v-if='[2,3,4].includes(info.drinkFrequency)'>
                                <div class='flex justify-between py-1 border-bottom item'>
                                    <span class='shrink-0 mr-2 label'>饮酒种类</span>
                                    <span class='text-end'>
                                        <span>{{ $addrJoin(info.drinkKindName, info.drinkKindOther) || '-' }}</span>
                                    </span>
                                </div>
                                <div class='flex justify-between py-1 border-bottom item'>
                                    <div class='shrink-0 mr-2 label'>日饮酒量</div>
                                    <div class='text-end'>
                                        <div v-for='item in (info.drinkKindCapacityList || [])' :key='item.drinkKind'
                                        >
                                            <span>{{ item.drinkKindName }}：</span> <span>{{ item.drinkCapacity || '-' }} mL</span>
                                        </div>
                                        <div>
                                            <span>平均： </span><span>{{ info.dayDrink || '-' }} mL</span>
                                        </div>
                                    </div>
                                </div>

                                <div class='flex justify-between py-1 border-bottom item'>
                                    <span class='shrink-0 mr-2 label'>开始饮酒年龄</span>
                                    <span class='text-end'>
                                        <span>{{ info.startDrinkAge || '-' }} 岁</span>
                                    </span>
                                </div>
                                <div class='flex justify-between py-1 border-bottom item'>
                                    <span class='shrink-0 mr-2 label'>是否戒酒</span>
                                    <span class='text-end'>
                                        <span>{{ info.giveDrinkName || '-' }}</span>
                                    </span>
                                </div>
                                <div class='flex justify-between py-1 border-bottom item' v-if='info.giveDrink == 1'>
                                    <span class='shrink-0 mr-2 label'>戒酒年龄</span>
                                    <span class='text-end'>
                                        <span>{{ info.giveDrinkStart || '-' }} 岁</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='19' title='吸烟情况' name='19' v-if='smokeShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>吸烟情况</span>
                                <span class='text-end'>
                                        <span>{{ info.isSmokingName || '-' }}</span>
                                    </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'
                                 v-if='info.isSmoking == 3 && smokeShow'>
                                <span class='shrink-0 mr-2 label'>日吸烟量</span>
                                <span class='text-end'>
                                        <span>{{ info.daySmoking || '-' }} 支</span>
                                    </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'
                                 v-if='info.isSmoking == 3 && smokeShow'>
                                <span class='shrink-0 mr-2 label'>开始吸烟年龄</span>
                                <span class='text-end'>
                                        <span>{{ info.startSmoking || '-' }} 岁</span>
                                    </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'
                                 v-if='info.isSmoking == 2 && smokeShow'>
                                <span class='shrink-0 mr-2 label'>戒烟年龄</span>
                                <span class='text-end'>
                                        <span>{{ info.giveSmokingAge || '-' }} 岁</span>
                                    </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'
                                 v-if='smokeShow && info?.diseaseArrays?.includes(1)'>
                                <span class='shrink-0 mr-2 label'>经常吸入二手烟</span>
                                <span class='text-end'>
                                        <span>{{ info.secondSmokingName || '-' }} </span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='20' title='黑棘皮病' name='20' v-if='blackSpinySkinShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>黑棘皮病</span>
                                <span class='text-end'>
                                        <span>{{ info.blackSpinySkinName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='21' title='长期精神紧张' name='21' v-if='mentalTensionShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>长期精神紧张</span>
                                <span class='text-end'>
                                        <span>{{ info.mentalTensionName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='22' title='皮肤或肌腱黄色瘤' name='22' v-if='xanthomaShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>皮肤或肌腱黄色瘤</span>
                                <span class='text-end'>
                                        <span>{{ info.xanthomaName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='23' title='跟腱增厚' name='23' v-if='tendoIncrassationShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>跟腱增厚</span>
                                <span class='text-end'>
                                        <span>{{ info.tendoIncrassationName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='24' title='中国糖尿病风险评分' name='24' v-if='riskScoreShow'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>中国糖尿病风险评分</span>
                                <span class='text-end'>
                                        <span>{{ info.riskScoreName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='25' title='知情同意书' name='25'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div>
                            <image-preview :img-list='info.informedConsentUrl'></image-preview>
                        </div>
                    </van-collapse-item>

                    <van-collapse-item key='26' title='筛查机构' name='26'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div v-for='item in columnsOrg' :key='item.key'>
                                <div class='flex justify-between py-1 border-bottom item'>
                                    <span class='shrink-0 mr-2 label'>{{ item.title }}</span>
                                    <span class='text-end'>
                                        <span>{{ info[item.key] || '-' }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
        </div>
    </div>
</template>

<script>
import { showNotify } from 'vant'
import { secondScreenDetail } from '@/api/doctor/screening.js'
import { useStore } from '@/doctor/store'
import { fetchDataHandle } from '@/utils/common'
import ImagePreview from '@/doctor/components/imagePreview/imagePreview'

export default {
    components: { ImagePreview },
    data() {
        return {
            store: useStore(),
            activeCollapse: [],
            collapseList: [
                { title: '居民信息', name: '1' },
                { title: '筛查病种', name: '2' },
                { title: '病史', name: '3' },
                { title: '家族史', name: '4' },
                { title: '身高', name: '5' },
                { title: '体重', name: '6' },
                { title: 'BMI', name: '7' },
                { title: '腰围', name: '8' },
                { title: '锻炼频率', name: '9' },
                { title: '女性病史', name: '10' },
                { title: '用药史', name: '11' },
                { title: '高密度脂蛋白胆固醇', name: '12' },
                { title: '甘油三酯', name: '13' },
                { title: '总胆固醇', name: '14' },
                { title: '有害物质接触或婴幼儿时期病史', name: '15' },
                { title: '现测血压(左侧右侧)值(SBP/DBP)', name: '16' },
                { title: '饮食习惯', name: '17' },
                { title: '饮酒情况', name: '18' },
                { title: '吸烟情况', name: '19' },
                { title: '黑棘皮病', name: '20' },
                { title: '长期精神紧张', name: '21' },
                { title: '皮肤或肌腱黄色瘤', name: '22' },
                { title: '跟腱增厚', name: '23' },
                { title: '中国糖尿病风险评分', name: '24' },
                { title: '知情同意书', name: '25' },
                { title: '筛查机构', name: '26' }
            ],
            // 全部展开、收起
            collapseAll: false,
            showRiskHighItem: false,
            riskHighItemList: [],
            info: {},
            columnsBase: [
                { title: '姓名', key: 'residentName' },
                { title: '证件号码', key: 'idCard' },
                { title: '性别', key: 'genderName' },
                { title: '出生日期', key: 'dataBirth' },
                { title: '年龄', key: 'currentAge' },
                { title: '民族', key: 'nationalName' },
                { title: '本人电话', key: 'telephone' },
                { title: '现住址', key: 'presentCodeName' },
                { title: '详细地址', key: 'nowAddress' },
                { title: '户籍地址', key: 'registeredCodeName' },
                { title: '详细地址', key: 'permanentAddress' }
            ],
            columnsOrg: [
                { title: '筛查单位', key: 'screenUnitName' },
                { title: '筛查科室', key: 'screenOfficeName' },
                { title: '筛查医生', key: 'screenDoctorName' }
            ],
            highRiskList: []
        }
    },
    computed: {
        id() {
            return this.$route.query.id
        },
        residentInfo() {
            return this.info.residentsRecord || {}
        },
        //判断病史显示隐藏
        medicalHistoryShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(1) || diseaseArrays.includes(2) || diseaseArrays.includes(3) || diseaseArrays.includes(4)
                || diseaseArrays.includes(5) || diseaseArrays.includes(6) || diseaseArrays.includes(7)) {
                res = true
            }
            return res
        },
        //判断家族史显示隐藏
        familyHistoryShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(1) || diseaseArrays.includes(2) || diseaseArrays.includes(3) || diseaseArrays.includes(4)
                || diseaseArrays.includes(5) || diseaseArrays.includes(6) || diseaseArrays.includes(7)) {
                res = true
            }
            return res
        },
        //判断身高、体重、BMI显示隐藏
        highShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(1) || diseaseArrays.includes(2) || diseaseArrays.includes(4)
                || diseaseArrays.includes(6) || diseaseArrays.includes(7)) {
                res = true
            }
            return res
        },
        //判断腰围显示隐藏
        waistShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(1) || diseaseArrays.includes(2)) {
                res = true
            }
            return res
        },
        //判断锻炼频率显示隐藏
        exerciseShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(1) || diseaseArrays.includes(2) || diseaseArrays.includes(4)) {
                res = true
            }
            return res
        },
        //判断女性病史显示隐藏
        womanMHShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(2)) {
                res = true
            }
            return res
        },
        //判断用药史显示隐藏
        medicationHShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(2) || diseaseArrays.includes(4) || diseaseArrays.includes(6)) {
                res = true
            }
            return res
        },
        //判断高密度脂蛋白胆固醇、甘油三酯、总胆固醇显示隐藏
        triglycerideShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(2)) {
                res = true
            }
            return res
        },
        //判断有害物质接触或婴幼儿时期病史显示隐藏
        babyMHShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(5)) {
                res = true
            }
            return res
        },
        //判断血压显示隐藏
        bloodPressureShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(1)) {
                res = true
            }
            return res
        },
        //判断饮食习惯显示隐藏
        eatHabitShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(1)) {
                res = true
            }
            return res
        },
        //判断饮酒情况显示隐藏
        drinkShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(1)) {
                res = true
            }
            return res
        },
        //判断吸烟情况显示隐藏
        smokeShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(1) || diseaseArrays.includes(3) || diseaseArrays.includes(4) || diseaseArrays.includes(5) || diseaseArrays.includes(7)) {
                res = true
            }
            return res
        },
        //判断黑棘皮病显示隐藏
        blackSpinySkinShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(2)) {
                res = true
            }
            return res
        },
        //判断长期精神紧张显示隐藏
        mentalTensionShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(1)) {
                res = true
            }
            return res
        },
        //判断皮肤或肌腱黄色瘤显示隐藏
        xanthomaShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(7)) {
                res = true
            }
            return res
        },
        //判断跟腱增厚显示隐藏
        tendoIncrassationShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(7)) {
                res = true
            }
            return res
        },
        //判断中国糖尿病风险评分显示隐藏
        riskScoreShow() {
            let res = false
            const { diseaseArrays = [] } = this.info
            if (diseaseArrays.includes(2)) {
                res = true
            }
            return res
        }
    },
    created() {
        document.title = '筛查详情'
        if (!this.id) {
            showNotify({ type: 'warning', message: '未获取到查询信息' })
            return
        }
        this.init()
    },
    methods: {
        init() {
            secondScreenDetail({ id: this.id }).then(res => {
                let result = res.data || {}
                this.info = result
                this.highRiskListHandle(result)
            })
        },
        highRiskListHandle(result) {
            this.highRiskList = []
            let obj = fetchDataHandle(result, {
                diseaseArrays: 'strToArrNum',
                hypertensionHighItem: 'strToArrNum',
                diabetesHighItem: 'strToArrNum',
                coronaryHighItem: 'strToArrNum',
                strokeHighItem: 'strToArrNum',
                pulmonaryHighItem: 'strToArrNum',
                nephrosisHighItem: 'strToArrNum',
                dyslipemiaHighItem: 'strToArrNum'
            })
            const {
                hypertensionHighItem = [],
                diabetesHighItem = [],
                coronaryHighItem = [],
                strokeHighItem = [],
                pulmonaryHighItem = [],
                nephrosisHighItem = [],
                dyslipemiaHighItem = []
            } = obj
            let list = []
            let o = { name: '', num: 0 }
            if (hypertensionHighItem.length) {
                o = {
                    id: 1,
                    name: '高血压风险因素',
                    num: hypertensionHighItem.length,
                    highItem: hypertensionHighItem,
                    dict: `CP00141`
                }
                list.push(o)
            }
            if (diabetesHighItem.length) {
                o = {
                    id: 2,
                    name: '糖尿病风险因素',
                    num: diabetesHighItem.length,
                    highItem: diabetesHighItem,
                    dict: `CP00142`
                }
                list.push(o)
            }
            if (coronaryHighItem.length) {
                o = {
                    id: 3,
                    name: '冠心病风险因素',
                    num: coronaryHighItem.length,
                    highItem: coronaryHighItem,
                    dict: `CP00143`
                }
                list.push(o)
            }
            if (strokeHighItem.length) {
                o = { id: 4, name: '脑卒中风险因素', num: strokeHighItem.length, highItem: strokeHighItem, dict: `CP00144` }
                list.push(o)
            }
            if (pulmonaryHighItem.length) {
                o = {
                    id: 5,
                    name: '慢阻肺风险因素',
                    num: pulmonaryHighItem.length,
                    highItem: pulmonaryHighItem,
                    dict: `CP00145`
                }
                list.push(o)
            }
            if (nephrosisHighItem.length) {
                o = {
                    id: 6,
                    name: '慢性肾脏病风险因素',
                    num: nephrosisHighItem.length,
                    highItem: nephrosisHighItem,
                    dict: `CP00146`
                }
                list.push(o)
            }
            if (dyslipemiaHighItem.length) {
                o = {
                    id: 7,
                    name: '血脂异常风险因素',
                    num: dyslipemiaHighItem.length,
                    highItem: dyslipemiaHighItem,
                    dict: `CP00147`
                }
                list.push(o)
            }
            this.highRiskList = list
        },
        onBack() {
            this.$router.back()
        },
        // 折叠面板切换
        collapseChange(val) {
            if (val && val.length <= 2) {
                this.activeCollapse = val.slice(val.length - 1)
            } else {
                if (this.activeCollapse.length > val.length) {
                    this.activeCollapse = val
                }
                if (this.activeCollapse.length < val.length) {
                    this.activeCollapse = val.slice(val.length - 1)
                }
            }
            if (val && val.length === this.collapseList.length) {
                this.collapseAll = true
            } else {
                this.collapseAll = false
            }
        },
        // 全部展开、收起
        toggleAll() {
            if (this.collapseAll) {
                this.activeCollapse = []
            } else {
                this.activeCollapse = this.collapseList.map(e => e.name)
            }
            this.collapseAll = !this.collapseAll
        },
        toShowHighRisk(val) {
            let res = []
            let dictInfo = this.store.getDict(val.dict)
            let highItemList = val.highItem || []
            highItemList.forEach(item => {
                let infoList = dictInfo.filter(e => e.value == item)
                if (infoList && infoList.length) {
                    res.push(infoList[0])
                }
            })
            this.riskHighItemList = res
            this.showRiskHighItem = true
        }
    }
}
</script>

<style lang='less' scoped>
@import url('../../utils/common.less');

.base-info {
    background: linear-gradient(to bottom, #F0F6FF, #fff 50%);
    color: #8c8c8c;

    .name {
        font-weight: 600;
        color: #000;
        font-size: 18px;
    }

    .top-label {
        font-size: 13px;
        line-height: 22px;
    }

    .color-b {
        color: #262626;
    }

    .color-red {
        color: #F5222D;
    }

    .tag {
        border-radius: 2px;
        padding: 3px 8px;
        font-size: 12px;
        line-height: 18px;
    }

    .tag-red {
        border: 1px solid #EFF2F7;
        color: #262626;
        background-color: #EFF2F7;
    }
}

.cont-box {
    background-color: #f9f9f9;

    .cont-inner {
        background: linear-gradient(to bottom, #F0F6FF, #fff .6rem);
        border-top-left-radius: .08rem;
        border-top-right-radius: .08rem;
    }
}

.collapse-head {
    .icon-down {
        vertical-align: middle;
        font-size: .12rem;

        .svg-icon {
            transition: all .2s;
        }
    }

    .icon-down-expanded {
        .svg-icon {
            transform: rotate(-180deg);
        }
    }
}


table {
    text-align: left;
    // border-bottom: 1px solid var(--van-cell-border-color);
    > tr {
        > td {
            padding-left: 14px;
            padding-bottom: 12px;

            &:first-child {
                text-align: right;
                padding-left: 0;
            }
        }
    }
}

.list {
    color: #262626;

    .label {
        min-width: 5em;
    }
}

.gap-y-1 {
    row-gap: 4px;
}

.pop-title {
    color: #262626;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
}

.de-driver {
    border: 1px solid #D7D8DA;
}

.bg-white {
    background: #FFFFFF;
    padding: 12px 16px;
    border-radius: 8px;
}
.detail-content {
    color: #F5222D;
    font-size: 16px;
    line-height: 1.5;
}
:deep(.van-popup) {
    height: 50% !important;
    background: #F5F5F5;
}
</style>