<template>
    <van-config-provider :theme-vars="themeVars">
        <div class="h-full resident-home">
            <router-view v-slot="{ Component }">
                <Transition name="route" mode="out-in">
                    <component :is="Component" v-if="visible"/>
                </Transition>
            </router-view>
        </div>
    </van-config-provider>
</template>

<script>
import { getDict, getResidentByInfo } from '@/api/base.js'
import { useStore } from './store/index.js'

export default {
    data() {
        return {
            visible: false,
            themeVars: {
                primaryColor: '#54CCBD',
                // 按键
                buttonPrimaryBackground: '#54CCBD',
                buttonPrimaryBorderColor: '#54CCBD',
                buttonDefaultBorderColor: '#BFBFBF',
                buttonNormalFontSize: '.16rem',
                pickerConfirmActionColor: '#54CCBD',
                checkboxCheckedIconColor: '#54CCBD',
                // tab
                tabsBottomBarColor: '#54CCBD',
                tabActiveTextColor: '#54CCBD',
                tabTextColor: '#8C8C8C',
                tabFontSize: '.16rem',
                // 级联选项
                cascaderActiveColor: '#54CCBD',
                // 表单相关
                cellVerticalPadding: '.15rem',
                cellTextColor: '#262626',
                fieldLabelColor: '#262626',
                cellBorderColor: '#d9d9d9',
                // 进度条
                sliderActiveBackground: '#54CCBD',
            }
        }
    },
    setup() {
        const store = useStore()
        return { store }
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            console.log(this.visible)
            const res = await getDict()
            this.store.$patch({ dict: res.data || {} })
            const user = await getResidentByInfo({idCard: '21100319900901301X'})
            this.store.$patch({ userInfo: user.data || {} })
            this.visible = true

        },
    }
}
</script>

<style lang="less" scoped>

</style>