<template>
    <van-config-provider :theme-vars='themeVars' style="height: 100vh">
        <div class='h-full resident-home'>
            <router-view v-slot='{ Component, route }'>
                <Transition name='route' mode='out-in'>
                    <KeepAlive :include="['Workbench', 'PatientDetail']">
                        <component :is='Component' :key="route.name" v-if='visible' />
                    </KeepAlive>
                </Transition>
            </router-view>
        </div>
    </van-config-provider>
</template>

<script>
import { getDict } from '@/api/base.js'
import { useStore } from './store/index.js'
import { backHome, getQueryVariable } from '@/utils/common'
import { getAuthInfo } from '@/api/doctor/generalFU'

export default {
    data() {
        return {
            visible: false,
            themeVars: {
                primaryColor: '#607FF0',
                buttonPrimaryBackground: '#607FF0',
                buttonPrimaryBorderColor: '#607FF0',
                buttonDefaultBorderColor: '#BFBFBF',
                buttonNormalFontSize: '.16rem',
                loadingSpinnerColor: '#607FF0',
                // tab
                tabActiveTextColor: '#607FF0',
                tabTextColor: '#8C8C8C',
                tabsBottomBarColor: '#607FF0',
                // 表单相关
                cellVerticalPadding: '.15rem',
                cellTextColor: '#262626',
                cellBorderColor: '#d9d9d9',
                navBarIconColor: '#262626',

            }
        }
    },
    setup() {
        const store = useStore()
        return { store }
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            let token = getQueryVariable('token')
            if (!token) {
                token = sessionStorage.getItem('token')
                if (process.env.NODE_ENV !== 'production') {
                    token = '3c295432-bbfe-4cc2-8570-89becac57b49'
                }
            }
            if (token) {
             sessionStorage.setItem('token', token)
                const res = await getDict()
                this.store.$patch({ dict: res.data || {} })
                const user = await getAuthInfo()
                this.store.$patch({authInfo: user.data || {}})

                this.visible = true
            } else {
                backHome()
            }

        }
    }
}
</script>

<style lang='less'>
// 按钮样式
.doc-btn {
    border: 0;
    padding: 4px 12px;
    height: 26px;
}
.doc-btn-primary {
    .doc-btn();
    color: var(--van-primary-color);
    background: #F0F3FF;
}
.doc-btn-red {
    .doc-btn();
    color: #FF4D4F;
    background: #FFF3F0;
}

// tab 样式
.doc-tab-round {
    .van-tabs__nav--card {
        column-gap: 10px;
        border: 0;
        margin: 0;
        background: transparent;
    }
    .van-tab--card {
        border: 0;
        border-radius: 40px;
        background: #fff;
        color: #262626;
        font-size: 14px;
        line-height: 28px;
        padding: 0 10px;
        transition: all .2s;
    }
    .van-tab--card.van-tab--active {
        color: #fff;
        background: var(--van-primary-color);
        font-weight: 500;
    }
}
.doc-tab-round[line] {
    .van-tab--card {
        border: 1px solid #fff;
        line-height: 1;
    }
    .van-tab--card.van-tab--active {
        color: var(--van-primary-color);
        border: 1px solid var(--van-primary-color);
        background: #E6F0FF;
        font-weight: 500;
    }
}

// 底部细线
.bottom-small-line {
    height: 1px;
    box-shadow: 0 0.5Px #D7DADE;
}

// list列表中的card
.doc-list-card {
    border-radius: 12px;
    background-color: #fff;
    .name {
        font-size: 16px;
        font-weight: 600;
    }
    .tag {
        background: #F0F3FF;
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 12px;
        line-height: 1;
    }
    .label {
        display: inline-block;
        color: #8C8C8C;
        min-width: 104px;
    }
    .divider {
        .bottom-small-line()
        // border-bottom: 1px solid #D7DADE;
        // transform: scaleY(.5);

        // height: 1px;
        // box-shadow: 0 0 0.5Px #e5e5e5;
    }
    .bt-group {
        display: flex;
        justify-content: flex-end;
        column-gap: 10px;
    }
}

// 输入框
.doc-input {
    border-radius: 50px;
    background-color: #FAFAFA !important;
    padding: 5px 0 5px 12px !important;
    &::after {
        display: none;
    }
}
</style>