<template>
    <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'>
                                {{ info.symptomName || '-' }}
                            </span>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='3' title='体征' name='3'>
                    <template #right-icon>
                        <doc-icon type='doc-down' />
                    </template>
                    <div class='list'>
                        <div v-for='item in columnsPhysical' :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 v-if='item.unit' class='ml-1'>{{ item.unit }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='4' title='生活方式指导' name='4'>
                    <template #right-icon>
                        <doc-icon type='doc-down' />
                    </template>
                    <div style='color: #262626'>吸烟</div>
                    <div class='box'>
                        <div>
                            <span>是否正在吸烟:</span>
                            <span>{{ info.isSmokingName }}</span>
                        </div>
                        <div v-if='info.isSmoking === 1'>
                            <span>您大约从几岁起开始养成每天或基本每天都吸烟的习惯:</span>
                            <span>{{ info.startSmokeAge || '-' }}岁</span>
                        </div>
                        <div v-if='info.isSmoking === 1 || info.isSmoking === 2'>
                            <span>您最近7天是否吸烟:</span>
                            <span>{{ info.lastSevenSmokeName }}</span>
                        </div>
                        <div v-if='info.isSmoking === 1 || info.isSmoking === 2'>
                            <span>日吸烟量:</span>
                            <span>{{ info.daySmoking || '-' }}支</span>
                            <span class='ml-4'>目标日吸烟量:</span>
                            <span>{{ info.goalDaySmoking || '-' }}支</span>
                        </div>
                    </div>
                    <div style='color: #262626' class='mt-2'>饮酒</div>
                    <div class='box'>
                        <div>
                            <span>是否正在饮酒:</span>
                            <span>{{ info.isDrinkName }}</span>
                        </div>
                        <div v-if='info.isDrink === 1 || info.isDrink === 2'>
                            <span>日饮酒量:</span>
                            <span>{{ info.dayDrink || '-' }}ml</span>
                            <span class='ml-4'>目标日饮酒量:</span>
                            <span>{{ info.goalDayDrink || '-' }}ml</span>
                        </div>
                        <div v-if='info.isDrink === 1 || info.isDrink === 2'>
                            <span>白酒:</span>
                            <span>{{ info.drinkLiquor || '-' }}ml/日</span>
                            <span class='ml-2'>啤酒:</span>
                            <span>{{ info.drinkBeer || '-' }}ml/日</span>
                            <span class='ml-2'>红酒:</span>
                            <span>{{ info.drinkRed || '-' }}ml/日</span>
                            <span class='ml-2'>黄酒:</span>
                            <span>{{ info.drinkYellow || '-' }}ml/日</span>
                            <span class='ml-2'>其他:</span>
                            <span>{{ info.drinkOther || '-' }}ml/日</span>
                        </div>
                    </div>
                    <div style='color: #262626' class='mt-2'>运动</div>
                    <div class='box'>
                        <div>
                            <span>有无规律活动:</span>
                            <span>{{ info.regularExerciseName }}</span>
                        </div>
                        <div v-if='info.regularExercise === 1'>
                            <span>运动强度:</span>
                            <span>{{ info.exerciseStrengthName }}</span>
                        </div>
                        <div v-if='info.regularExercise === 1'>
                            <span>目前运动情况:</span>
                            <span>{{ info.nowExerciseWeek || '-' }}次/周、</span>
                            <span>{{ info.nowExerciseMinute || '-' }}分钟/次</span>
                        </div>
                    </div>
                    <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'>{{ info.staplFood || '-' }}</span>
                        </div>
                        <div class='flex justify-between py-1 border-bottom item'>
                            <span class='shrink-0 mr-2 label'>目标主食</span>
                            <span class='text-end'>{{ info.targetStaplFood || '-' }}</span>
                        </div>
                        <div class='flex justify-between py-1 border-bottom item'>
                            <span class='shrink-0 mr-2 label'>心理调整</span>
                            <span class='text-end'>{{ info.psychologicalRecoveryName || '-' }}</span>
                        </div>
                        <div class='flex justify-between py-1 border-bottom item'>
                            <span class='shrink-0 mr-2 label'>遵医行为</span>
                            <span class='text-end'>{{ info.doctorAdviceName || '-' }}</span>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='5' title='辅助检查' name='5'>
                    <template #right-icon>
                        <doc-icon type='doc-down' />
                    </template>
                    <div class='list'>
                        <div v-for='item in columnsAuxiliary' :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 class='ml-1'>{{ item.unit }}</span>
                                </span>

                            </div>
                        </div>
                    </div>
                    <div v-for='(x, xIndex) in inspectList' :key='x.insType'>
                        <div style='color: #262626' :class="[xIndex === 0 ? '' : 'mt-2']">{{ x.insName }}</div>
                        <div class='box'>
                            <div v-for='y in x.items'>
                                <span>{{ y.itemName }}:</span>
                                <span>{{ y.itemValue }}</span>
                                <span class='ml-1'>{{ y.unit }}</span>
                            </div>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='6' title='服药依从性' name='6'>
                    <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'>{{ info.medicationComplianceName || '-' }}</span>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='7' title='药物不良反应' name='7'>
                    <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'>{{ info.drugsAdverseName || '-' }}</span>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='8' title='低血糖反应' name='8'>
                    <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'>{{ info.glycopeniaReactionName || '-' }}</span>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='9' title='此次随访分类' name='9'>
                    <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'>{{ info.visitTypeName || '-' }}</span>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='10' title='目前诊断' name='10'>
                    <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'>
                                {{ info.currentDiagnosisName || '-' }}
                            </span>
                        </div>
                    </div>
                    <!-- <div v-for="(x, xIndex) in info.diagnoseInfoList" :key="xIndex">
                        <div style="color: #262626">
                            {{ (store.getDict('CP00086').find(e => e.value === x.currentDiagnoseType)).name }}
                        </div>
                        <div class="box" >
                            <div v-if="x.currentDiagnoseType === 1">
                                <span>高血压分级:</span>
                                <span>{{ x.diagnoseResultValue }}</span>
                                <span class="ml-4">高血压危险分层:</span>
                                <span>{{ x.diagnoseLevelValue }}</span>
                            </div>
                            <div v-if="x.currentDiagnoseType === 2">
                                <span>糖尿病:</span>
                                <span>{{ x.diagnoseResultValue }}</span>
                            </div>
                            <div v-if="x.currentDiagnoseType === 3">
                                <span>冠心病:</span>
                                <span>{{ x.diagnoseResultValue }}</span>
                            </div>
                            <div v-if="x.currentDiagnoseType === 4">
                                <span>缺血性脑卒中:</span>
                                <span>{{ x.diagnoseResultValue || '-' }}</span>
                                <span class="ml-4">出血性脑卒中:</span>
                                <span>{{ x.diagnoseLevelValue }}</span>
                            </div>
                            <div v-if="x.currentDiagnoseType === 5">
                                <span>慢阻肺:</span>
                                <span>{{ x.diagnoseResultValue }}</span>
                            </div>
                            <div v-if="x.currentDiagnoseType === 6">
                                <span>慢性肾病:</span>
                                <span>{{ x.diagnoseResultValue }}</span>
                            </div>
                            <div v-if="x.currentDiagnoseType === 7">
                                <span>血脂异常:</span>
                                <span>{{ x.diagnoseResultValue }}</span>
                            </div>
                            <div>
                                <span>纳入管理日期:</span>
                                <span>{{ x.inclusionManageDate }}</span>
                            </div>
                            <div v-for="(y, yIndex) in x.diagnoseItemList" :key="yIndex">
                                <div>
                                    <span>诊断名称:</span>
                                    <span>{{ y.diagnosisResultName }}</span>
                                </div>
                                <div>
                                    <span>诊断日期:</span>
                                    <span>{{ y.diagnosisDate }}</span>
                                </div>
                                <div>
                                    <span>诊断单位:</span>
                                    <span>{{ y.diagnosisUnitName }}</span>
                                </div>
                                <div>
                                    <span>诊断科室:</span>
                                    <span>{{ y.diagnosisOfficeName }}</span>
                                </div>
                                <div>
                                    <span>诊断医生:</span>
                                    <span>{{ y.diagnosisUserName }}</span>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </van-collapse-item>
                <van-collapse-item key='11' title='用药情况' name='11'>
                    <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'>{{ info.adjustTreatName }}</span>
                        </div>
                    </div>
                    <div v-if='info.adjustTreat === 1'>
                        <div style='color: #262626' class='mt-2'>用药</div>
                        <div v-for='(item, index) in medicateCase' :key='index' class='box mt-2'>
                            <div>
                                <span>药物名称:</span>
                                <span>{{ item.drugName }}</span>
                                <span class='ml-4'>剂量:</span>
                                <span class='mr-1'>{{ item.dose }}</span>
                                <span>{{ store.getDictValue('CP00081', item.unit) }}</span>
                            </div>
                            <div>
                                <span>频次:</span>
                                <span>{{ store.getDictValue('CP00084', item.frequency) }}</span>
                                <span class='ml-4'>用法:</span>
                                <span>{{ store.getDictValue('CP00083', item.usage) }}</span>
                            </div>
                        </div>
                    </div>
                    <div style='color: #262626' class='mt-2'>胰岛素</div>
                    <div class='box'>
                        <div>
                            <span>胰岛素种类:</span>
                            <span>{{ info.insulinTypeName }}</span>
                        </div>
                        <div>
                            <span>用法:</span>
                            <span>{{ info.insulinUsageName }}</span>
                        </div>
                        <div>
                            <span>用量:</span>
                            <span v-for='(item, index) in insulinDosage' :key='index'>
                                <template v-if='item.checked'>
                                    <span>{{ item.name }}</span>
                                    <span class='mr-1 ml-1'>{{ item.dosage }}</span>
                                    <span>IU、</span>
                                </template>
                            </span>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='12' title='转诊' name='12'>
                    <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'>{{ info.isReferralName }}</span>
                        </div>
                        <div v-if='info.isReferral === 1' class='flex justify-between py-1 border-bottom item'>
                            <span class='shrink-0 mr-2 label'>转诊原因</span>
                            <span class='text-end'>{{ info.referralReason }}</span>
                        </div>
                        <div v-if='info.isReferral === 1' class='flex justify-between py-1 border-bottom item'>
                            <span class='shrink-0 mr-2 label'>转诊机构</span>
                            <span class='text-end'>{{ info.referralUnitName }}</span>
                        </div>
                        <div v-if='info.isReferral === 1' class='flex justify-between py-1 border-bottom item'>
                            <span class='shrink-0 mr-2 label'>转诊科室</span>
                            <span class='text-end'>{{ info.referralOfficeName }}</span>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='13' title='现场随访照片' name='13'>
                    <template #right-icon>
                        <doc-icon type='doc-down' />
                    </template>
                    <div>
                        <image-preview :img-list='info.visitImageList'></image-preview>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='14' title='下次随访日期' name='14'>
                    <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'>{{ info.nextVisitDate }}</span>
                        </div>
                    </div>
                </van-collapse-item>
                <van-collapse-item key='15' title='随访机构' name='15'>
                    <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'>{{ info[item.key] }}</span>
                            </div>
                        </div>
                    </div>
                </van-collapse-item>
            </van-collapse>
        </div>
    </div>
</template>
<script>
import { fetchDataHandle } from '@/utils/common.js'
import { useStore } from '@/resident/store/index.js'
import ImagePreview from '@/residentWX/components/imagePreview/imagePreview'

export default {
    components: { ImagePreview },
    props: {
        visitInfo: {
            type: Object,
            default: () => {
            }
        }
    },
    data() {
        return {
            info: {},
            store: useStore(),
            // 辅助检查
            inspectList: [],
            // 用药情况
            medicateCase: [],
            // 胰岛素用量
            insulinDosage: [],
            // 全部展开、收起
            collapseAll: false,
            activeCollapse: [],
            // 居民信息
            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' }
            ],
            // 体征
            columnsPhysical: [
                { title: '收缩压SBP', key: 'signSystolicPressure', unit: 'mmHg' },
                { title: '舒张压DBP', key: 'signDiastolicPressure', unit: 'mmHg' },
                { title: '身高', key: 'signHeight', unit: 'cm' },
                { title: '体重', key: 'signWeight', unit: 'kg' },
                { title: 'BMI', key: 'signBmi', unit: 'kg/m²' },
                { title: '腰围', key: 'signWaistline', unit: 'cm' },
                { title: '足背动脉搏动', key: 'signArteryPulsationName' },
                { title: '其他', key: 'signOther' }
            ],
            // 随访机构
            columnsOrg: [
                { title: '随访日期', key: 'visitDate' },
                { title: '随访单位', key: 'visitUnitName' },
                { title: '随访科室', key: 'visitOfficeName' },
                { title: '随访医生', key: 'visitDoctorName' },
                { title: '录入日期', key: 'createDate' },
                { title: '录入单位', key: 'createUnitName' },
                { title: '录入科室', key: 'createOfficeName' },
                { title: '录入医生', key: 'createDoctorName' }
            ],
            columnsAuxiliary: [
                { title: '空腹静脉血糖值', key: 'emptyBloodGlucose', unit: 'mmol/L' },
                { title: '空腹胰岛素', key: 'emptyInsulin', unit: 'mU/L' },
                { title: '空腹C肽', key: 'emptyPeptide', unit: 'pmol/L' },
                { title: '餐后2小时胰岛素', key: 'afterInsulin', unit: 'mU/L' },
                { title: '餐后2小时C肽', key: 'afterPeptide', unit: 'pmol/L' }
            ]
        }
    },
    computed: {
        residentInfo() {
            return this.info.residentsRecord || {}
        }
    },
    methods: {
        dataHandle() {
            // 字符串转数组
            const form = fetchDataHandle(this.visitInfo, {
                auxiliaryExamination: 'strToArrNum'
            })
            this.info = form
            // 辅助检查处理
            let { auxiliaryExamination = [], inspectList = [], medicateCase = [], insulinDosage = [] } = form
            let list = []
            auxiliaryExamination.forEach(item => {
                const items = inspectList.filter(e => e.insType === item)
                if (items.length > 0) {
                    list.push({
                        insType: items[0].insType,
                        insName: items[0].insName,
                        items: [...items]
                    })
                }
            })
            this.inspectList = list
            // 用药情况处理
            this.medicateCase = JSON.parse(medicateCase)
            // 胰岛素用量处理
            this.insulinDosage = JSON.parse(insulinDosage)
        },
        // 全部展开、收起
        toggleAll() {
            if (this.collapseAll) {
                this.activeCollapse = []
            } else {
                let list = []
                for (let i = 1; i < 16; i++) {
                    list.push(i.toString())
                }
                this.activeCollapse = list
            }
            this.collapseAll = !this.collapseAll
        },
        // 折叠面板切换
        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.length === 15) {
                this.collapseAll = true
            } else {
                this.collapseAll = false
            }
        }
    },
    watch: {
        visitInfo: {
            handler() {
                this.dataHandle()
            }
        }
    }
}
</script>
<style lang='less' scoped>
.cont-box {
    background-color: #f9f9f9;

    .cont-inner {
        background: linear-gradient(to bottom, #DFF5F4, #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);
        }
    }
}

.list {
    color: #262626;

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

.box {
    background: #F8FAFC;
    padding: 8px;
    color: #4D5665;

}
</style>