<template>
    <div class="h-full base">
        <div class='mt-3 p-4 card' v-if="info.id">
            <div class='flex items-center'>
                <div class='text-16 font-semibold base-title'>{{ info.residentName }}</div>
                <div class='second-title px-2'>{{ info.currentAge }}岁</div>
                <div class='second-title px-2'>{{ info.genderName }}</div>
                <div class="second-title px-2" v-if="info.chronicStatus === 9" >死亡</div>
            </div>
            <div class='mt-3 flex items-center'>
                <div class='detail-left'>
                    身份证号
                </div>
                <div class='detail-right'>
                    {{ $idCardHide(info.idCard) }}
                </div>
            </div>
            <div class='mt-3 flex items-center'>
                <div class='detail-left'>
                    建档状态
                </div>
                <div class='detail-right'>
                    <span v-if="!!info.residentsBaseDTO">已建档</span>
                    <span v-else>未建档</span>
                </div>
            </div>
            <div class='mt-3 flex items-center'>
                <div class='detail-left'>
                    签约状态
                </div>
                <div class='detail-right'>
                    <span v-if="!!info.signedInfoDTO">已签约</span>
                    <span v-else>未签约</span>
                </div>
            </div>
            <div class='mt-3 flex items-center'>
                <div class='detail-left'>
                    高危评估
                </div>
                <div class='detail-right'>
                    <span>{{ info.firstScreenResultName || '-' }}</span>
                </div>
            </div>
            <div class='mt-3 flex items-center'>
                <div class='detail-left'>
                    专病高危评估
                </div>
                <div class='detail-right'>
                    <span>{{ info.highTagsArrayName || '-' }}</span>
                </div>
            </div>
            <div class='flex mt-3'>
                <div class='detail-left'>
                    慢病标签
                </div>
                <div class='detail-right' style='flex: 1'>
                    <ChronicTag :list="info.chronicTagsArray"/>
                </div>
            </div>
            <div class="text-center mt-5">
                <van-button round type="primary" class="detail-bt" @click="toEdit">修改基本信息</van-button>
            </div>
        </div>
        <div class="text-center empty" v-else>
            <img src="@/assets/image/doctor/empty.png" alt="" style="width: 1.2rem;">
            <p>暂无数据</p>
        </div>
    </div>
</template>

<script>
import ChronicTag from '@/doctor/components/chronicTag/ChronicTag.vue'

export default {
    components: {
        ChronicTag
    },
    inject: ['getBaseInfo'],
    data() {
        return {}
    },
    computed: {
        info() {
            return this.getBaseInfo() || {}
        }
    },
    methods: {
        toEdit() {
            let par = {
             residentInfoId: this.info.residentInfoId
            }
         this.$router.push({path: `/doctor/resident/base/update`, query: par})
        }
    }

}
</script>

<style lang="less" scoped>
.card {
    background-color: #fff;
    .second-title {
        background: #F0F3FF;
        line-height: 24px;
        margin-left: 10px;
    }

    .detail-left {
        width: 8em;
        color: #8C8C8C;
        flex-shrink: 0;
    }
    .detail-bt {
        color: #607FF0;
        background-color: #F0F3FF;
        border: 0;
        width: 80%;
        height: 40px;
    }
}

</style>