<template>
    <div class="h-full flex flex-col">
        <van-nav-bar title='居民详情' left-text='' left-arrow class="shrink-0"
            @click-left="toBack"></van-nav-bar>
        <div class="flex shrink-0 justify-center pb-1">
            <van-tabs v-model:active='activeTab' class="w-1/2 top-tabs"
                @change="tabChange">
                <van-tab  v-for='item in tabList' :key="item.name"
                    :title='item.title' :name='item.name'></van-tab>
            </van-tabs>
        </div>
        <div class="grow" style="background-color: #f5f5f5;min-height: 0;">
            <router-view v-slot='{ Component }'>
                <Transition name='route' mode='out-in'>
                    <component :is='Component' />
                </Transition>
            </router-view>
        </div>
    </div>
</template>

<script>
import { showNotify } from 'vant'
import { queryResidentInfo } from '@/api/doctor/resident'

export default {
    data() {
        return {
            tabList: [
                { title: '基本信息', name: 'base', path: '/doctor/resident/base' },
                { title: '随访记录', name: 'visit', path: '/doctor/resident/visit' }
            ],
            activeTab: 'base',
            residentId: null,
            // 基础信息
            baseInfo: null
        }
    },
    computed: {
        routeQuery() {
            return this.$route.query
        }
    },
    provide() {
        return {
            getBaseInfo: () => this.baseInfo
        }
    },
    created() {
        this.residentId = this.routeQuery.residentId
        this.init()
        if (!this.residentId) {
            showNotify({ type: 'warning', message: '未获取到医生信息', duration: 0 })
            return
        }
        this.load()
    },
    methods: {
        init() {
            if (this.$route.name === 'doctor-resident-visit') {
                this.activeTab = 'visit'
            } else if (this.$route.name === 'doctor-resident-base') {
                this.activeTab = 'base'
            }
        },
        tabChange() {
            console.log(this.activeTab)
            const item = this.tabList.find(e => e.name === this.activeTab)
            if (!item) return
            this.$router.replace({
                path: item.path,
                query: { residentId: this.residentId }
            })
        },
        load() {
            const query = {
                residentInfoId: this.residentId
            }
            queryResidentInfo(query).then(res => {
                this.baseInfo = res.data || {}
            })
        },
        toBack() {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="less" scoped>
.top-tabs {
    :deep(.van-tab) {
        color: #262626;
    }
    :deep(.van-tab--active) {
        color: var(--van-tab-active-text-color);
    }
    :deep(.van-tabs__line) {
        height: 2px;
        width: 28px;
        bottom: 20px;
    }
}
</style>