<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">
                <img src="@/assets/image/residentWX/avatar.png" alt="" class="shrink-0" style="width: .56rem; height: .56rem">
                <div class="grow flex flex-col justify-between pl-3">
                    <div class="flex justify-between">
                        <span class="name">{{ residentInfo.residentName }}</span>
                    </div>
                    <div class="top-label">
                        <div class="mt-3 flex">
                            <!-- <div>
                                <span>随访方式：</span>
                                <span class="color-b">{{ info.visitWayName }}</span>
                            </div> -->
                            <div>
                                <span>随访日期：</span>
                                <span class="color-b">{{ info.visitDate }}</span>
                            </div>
                            <div class="ml-2">
                                <span>病情状态：</span>
                                <span class="color-b">{{ info.visitTypeName }}</span>
                            </div>
                        </div>
                        <div>
                            <span>下次随访日期：</span>
                            <span class="color-b">{{ info.nextVisitDate }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-3 grow cont-box">
            <div class="p-3 h-full cont-inner">
                <div class="flex justify-between collapse-head">
                    <span class="text-16">全部内容</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 v-model="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.saltIntakeName || '-' }}</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 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> -->
                        <div v-for="x in inspectList" :key="x.insType">
                            <div style="color: #262626" class="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>
            </div>
        </div>
    </div>
</template>
<script>
import { querySeparateFUDetail } from '@/api/residentWX/visit.js'
import { fetchDataHandle } from '@/utils/common.js'
export default {
    data() {
        return {
            info: {},
            // 全部展开、收起
            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: 'signHeartRate', unit: '次/分' },
                { title: '身高', key: 'signHeight', unit: 'cm' },
                { title: '体重', key: 'signWeight', unit: 'kg' },
                { title: 'BMI', key: 'signBmi', unit: 'kg/m²' },
                { title: '腰围', key: 'signWaistline', unit: 'cm' },
                { title: '其他', key: 'signOther' }
            ],
            collapseList: [
                // { title: "居民信息", name: "1", columns: [], info: {} },
                // { title: "随访详情", name: "2", columns: [], info: {} },
                // { title: "随访机构", name: "3", columns: [], info: {} }
            ],
            // 辅助检查
            inspectList: []
        }
    },
    computed: {
        routerDetail() {
            return this.$route.params
        },
        residentInfo() {
            return this.info.residentsRecord || {}
        }
    },
    created() {
        this.load()
    },
    methods: {
        load() {
            const { relationId, diseaseType } = this.routerDetail
            if (!relationId) {
                showToast('未获取到信息')
                return
            }
            let params = {
                id: relationId,
                diseaseType,
            }
            querySeparateFUDetail(params).then(res => {
                let result = res.data || {}
                // 字符串转数组
                const form = fetchDataHandle(result, {
                    auxiliaryExamination: 'strToArrNum'
                })
                this.info = form
                // 辅助检查处理
                let { auxiliaryExamination = [], inspectList = [] } = 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
                console.log(list)

            })
        },
        // 折叠面板切换
        collapseChange(val) {
            if (val && val.length === this.collapseList.length) {
                this.collapseAll = true
            } else {
                this.collapseAll = false
            }
        },
        // 全部展开、收起
        toggleAll() {

        },
        onBack() {
            this.$router.back()
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../utils/common.less');

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

.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>