<template>
    <div class="flex flex-col" style="height: 100vh">
        <div class="p-3 text-black text-center shrink-0 doc-nav-bar" v-if='showNav()'>
            <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">{{ userInfo.residentName }}</span>
                    </div>
                    <div class='lh-22'>
                        <div class='mt-3'>筛查日期：<span class='color-26'>{{ info.screenDate || '-' }}</span></div>
                        <span>慢病高危评估结果：</span>
                        <span :class="{'text-red': info.screenResult !== 1, 'color-26': info.screenResult === 1 }">{{ info.screenResultName }}</span>
                    </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 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 v-for="collapse in collapseList" :key="collapse.name"
                        :title="collapse.title" :name="collapse.name">
                        <template #right-icon>
                            <doc-icon type="doc-down" />
                        </template>
                        <div class="list">
                            <div v-for="item in collapse.columns" :key="item.key" >
                                <div v-if="item.key == 'pressure'" class="pt-3">
                                    <table class="w-full">
                                        <tr>
                                            <td style="width: 7.1em">血压值(mmHg)</td>
                                            <td>收缩压(高压)</td>
                                            <td></td>
                                            <td>舒张压(低压)</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                第1次测量
                                            </td>
                                            <td>
                                                {{ info.pressureOneSbp || '-' }}
                                            </td>
                                            <td>/</td>
                                            <td>
                                                {{ info.pressureOneDbp || '-' }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                第2次测量
                                            </td>
                                            <td class="flex">
                                                {{ info.pressureTwoSbp || '-' }}
                                            </td>
                                            <td>/</td>
                                            <td>
                                                {{ info.pressureTwoDbp || '-' }}
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div v-else 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(collapse.info.idCard) || '-' }}</span>
                                    
                                    <span class="text-end" v-else>
                                        <span>{{ collapse.info[item.key] || '-' }}</span>
                                        <span v-if="item.unit" class="ml-1">{{ item.unit }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
        </div>
    </div>
</template>

<script>
import { showNotify } from 'vant'
import { firstScreenDetail } from '@/api/residentWX/screening.js'
import { useStore } from '@/residentWX/store'
import { showNav } from '@/utils/common'

export default {
    inject:['showNav'],
    data() {
        return {
            store: useStore(),
            activeCollapse: [],
            collapseList: [
                { title: '居民信息', name: '1', columns: [
                    { 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' }
                ], info: {} },
                { title: '筛查信息', name: '2', columns: [
                    { title: '年龄', key: 'currentAge', unit: '岁' },
                    { title: '既往史', key: 'medicalHistoryName'  },
                    { title: '身高', key: 'height', unit: 'cm' },
                    { title: '体重', key: 'weight', unit: 'kg' },
                    { title: 'BMI', key: 'bmi', unit: 'kg/m²' },
                    { title: '腰围', key: 'waistline', unit: 'cm' },
                    { title: '是否吸烟', key: 'isSmokingName'  },
                    { title: '家族史', key: 'familyHistoryName'  },
                    { title: '血压值', key: 'pressure' },
                    { title: '空腹血糖', key: 'fastingGlucose', unit: 'mmol/L' },
                    { title: '低密度脂蛋白胆固醇', key: 'ldlCholesterin', unit: 'mmol/L' },
                    { title: '血清总胆固醇', key: 'serumCholesterin', unit: 'mmol/L' },
                    { title: '高密度脂蛋白胆固醇', key: 'hdlCholesterin', unit: 'mmol/L' },
                    { title: '运动', key: 'exerciseIntensityName' },
                    { title: '慢病高危评估结果', key: 'screenResultName'  }
                ], info: {} },
                    { title: '筛查机构', name: '3', columns: [
                    { title: '筛查机构', key: 'screenUnitName' },
                    { title: '筛查科室', key: 'screenOfficeName' },
                    { title: '筛查医生', key: 'screenDoctorName' },
                    { title: '筛查日期', key: 'screenDate' }
                ], info: {} }
            ],
            // 全部展开、收起
            collapseAll: false,
            info: {}
        }
    },
    computed: {
        id() {
            return this.$route.params.id
        },
        userInfo() {
            return this.store.userInfo
        },
    },
    created() {
        if (!this.showNav()) {
            document.title = '筛查详情'
        }
        if (!this.id) {
            showNotify({ type: 'warning', message: '未获取到查询信息' })
            return
        }
        this.init()
    },
    methods: {
        init() {

            firstScreenDetail({ id: this.id }).then(res => {
                this.info = res.data || {}
                this.collapseList[0].info = this.info?.residentsRecord
                this.collapseList[1].info = this.info
                this.collapseList[2].info = this.info
            })
        },
        onBack() {
            this.$router.back()
        },
        // 折叠面板切换
        collapseChange(val) {
            // console.log(val, this.activeCollapse)
            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
        }
    }
}
</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;
    }
}

.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);
        }
    }
}


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;
    }
}

.lh-22 {
    line-height: 22px;
}
.color-26 {
     color: #262626;
}
</style>