<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">{{ residentInfo.residentName }}</span>
                    </div>
                    <div class="top-label">
                        <div class="mt-3 flex">
                            <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>
        
        <HypertensionDetail v-if="routerDetail.diseaseType === '1'" :visitInfo="info" />
        <DiabetesDetail v-if="routerDetail.diseaseType === '2'" :visitInfo="info" />
        <CoronaryHeartDiseaseDetail v-if="routerDetail.diseaseType === '3'" :visitInfo="info" />
        <CerebralApoplexyDetail v-if="routerDetail.diseaseType === '4'" :visitInfo="info" />
        <CopdDetail v-if="routerDetail.diseaseType === '5'" :visitInfo="info" />
        <ChronicKidneyDiseaseDetail v-if="routerDetail.diseaseType === '6'" :visitInfo="info" />
        <AbnormalBloodLipidsDetail v-if="routerDetail.diseaseType === '7'" :visitInfo="info" />
    </div>
</template>
<script>
import { querySeparateFUDetail } from '@/api/residentWX/visit.js'

import HypertensionDetail from './components/HypertensionDetail.vue'
import DiabetesDetail from './components/DiabetesDetail.vue'
import CoronaryHeartDiseaseDetail from './components/CoronaryHeartDiseaseDetail.vue'
import CerebralApoplexyDetail from './components/CerebralApoplexyDetail.vue'
import CopdDetail from './components/CopdDetail.vue'
import ChronicKidneyDiseaseDetail from './components/ChronicKidneyDiseaseDetail.vue'
import AbnormalBloodLipidsDetail from './components/AbnormalBloodLipidsDetail.vue'
export default {
    components: { HypertensionDetail, DiabetesDetail, CoronaryHeartDiseaseDetail, CerebralApoplexyDetail, CopdDetail, ChronicKidneyDiseaseDetail, AbnormalBloodLipidsDetail },
    inject:['showNav'],
    data() {
        return {
            info: {}
        }
    },
    computed: {
        routerDetail() {
            return this.$route.params
        },
        residentInfo() {
            return this.info.residentsRecord || {}
        }
    },
    created() {
        document.title = '专病随访详情'
        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 || {}
                this.info = result
            })
        },
        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;
    }
}
</style>