<template>
    <div class="h-full pb-5">
        <div class="p-3 text-16 text-black text-center shrink-0 top-bar">
            <span class="back-bt">
                <span @click="onBack">
                    <doc-icon type="doc-left" />
                </span>
            </span>
            <span>居民慢病筛查详情</span>
        </div>
        <div class="py-4 border-bottom">
            <div class="px-4 doc-title">居民信息</div>
        </div>
        <div class="px-4 list">
            <div v-for="item in columnsBase" :key="item.key"
                class="flex justify-between py-4 border-bottom item">
                <span class="shrink-0 mr-2 label">{{ item.title }}</span>
                <span class="text-end">{{ residentInfo[item.key] || '-' }}</span>
            </div>
        </div>

        <div class="py-4 border-bottom">
            <div class="px-4 doc-title">筛查信息</div>
        </div>
        <div class="px-4 list">
            <template v-for="item in columnsScreen" :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.pressureOneDbp || '-' }}
                            </td>
                            <td>/</td>
                            <td>
                                {{ info.pressureOneSbp || '-' }}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                第2次测量
                            </td>
                            <td class="flex">
                                {{ info.pressureTwoDbp || '-' }}
                            </td>
                            <td>/</td>
                            <td>
                                {{ info.pressureTwoSbp || '-' }}
                            </td>
                        </tr>
                    </table>
                </div>
                <div v-else
                    class="flex justify-between py-4 border-bottom item">
                    <span class="shrink-0 mr-2 label">{{ item.title }}</span>
                    <div>
                        <span>{{ info[item.key] || '-' }}</span>
                        <span v-if="item.unit" class="ml-1">{{ item.unit }}</span>
                    </div>
                    
                </div>
            </template>
        </div>
    </div>
</template>

<script>
import { showNotify } from 'vant'
import { querScreenDetail } from '@/api/resident/screening.js'

export default {
    data() {
        return {
            info: {},
            columnsBase: [
                { title: '姓名', key: 'residentName' },
                { 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' }
            ],
            columnsScreen: [
                { 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'  },
                { title: '筛查日期', key: 'screenDate' },
                { title: '筛查机构', key: 'screenUnitName' }
            ]
        }
    },
    computed: {
        id() {
            return this.$route.params.id
        },
        residentInfo() {
            return this.info.residentsRecord || {}
        }
    },
    created() {
        if (!this.id) {
            showNotify({ type: 'warning', message: '未获取到查询信息', duration: 0 })
            return
        }
        this.init()
    },
    methods: {
        init() {
            querScreenDetail({ id: this.id }).then(res => {
                this.info = res.data || {}
            })
        },
        onBack() {
            this.$router.back()
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../utils/common.less');
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 {
    .label {
        min-width: 5em;
    }
}
</style>
