<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>
            <BloodPressure :pressureObj="pressureObj"/>
        </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'
import BloodPressure from '@/doctor/components/bloodPressure/BloodPressure.vue'

export default {
    components: {
        BloodPressure
    },
    provide() {
        return {
            pressureObj: this.pressureObj
        }
    },
    data() {
        return {
            store: useStore(),
            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',

            },
            // 血压测量相关功能
            pressureObj: {}
        }
    },
    created() {
        this.init()
        // 监听页面是否隐藏
        document.addEventListener('visibilitychange', this.visibilitychange)
    },
    methods: {
        async init() {
            let token = getQueryVariable('token')
            if (!token) {
                token = sessionStorage.getItem('token')
                if (process.env.NODE_ENV !== 'production') {
                    token = '4250f686-93a3-4368-ad0c-a09e6c818500'
                }
            }
            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
                this.pressureObj.loadDevice()
            } else {
                backHome()
            }
        },
        visibilitychange() {
            if (document.hidden) {
                this.store.onDocumentHidden(true)
            } else {
                this.store.onDocumentHidden(false)
            }
        }
    },
    beforeUnmount() {
        document.removeEventListener('visibilitychange', this.visibilitychange)
    }
}
</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;
    }
}

// form表单
.doc-form {
    .doc-form-label {
        color: #595959;
        margin-top: 20px;
        margin-bottom: 8px;
        &[required] {
            .required-mark()
        }
    }
    .required-mark {
        &::after {
            content: "*";
            color: red;
            font-weight: bold;
            margin-left: 4px;
        }
    }

    .van-field {
        background-color: #FAFAFA;
        padding: 8px 12px;
        border-radius: 8px;
        &::after {
            display: none;
        }
    }
    .no-back {
        background-color: #fff;
    }
    .tip-box {
        margin-top: 20px;
        margin-bottom: 8px;
        .doc-form-label {
            margin: 0
        }
        >span {
            color: #8C8C8C;
            font-size: 12px;
        }
    }
    .van-picker__cancel {
        font-size: 16px;
    }
    .van-picker__confirm {
        font-size: 16px;
        color: var(--van-primary-color);
    }
}

// 单选
.doc-radio-group {
    column-gap: 10px;
    row-gap: 8px;
    .van-radio {
        background-color: #FAFAFA;
        padding: 8px 12px;
        border-radius: 8px;
        justify-content: space-between;
        margin-right: 0;
        flex-grow: 1;
    }
}

// 折叠面板
.doc-collapse {
    margin-top: .1rem;
    &::after {
        display: none;
    }
    .van-cell {
        padding: .1rem 0;
        color: #8C8C8C;
        font-weight: 600;
        background: transparent;
        &::after {
            display: none;
        }
        .svg-icon {
            font-size: .12rem;
            transition: all .2s;
        }
    }
    .van-collapse-item {
        .van-collapse-item__content {
            padding: 0;
            color: #262626;
        }
        &::after {
            display: none;
        }
    }
    // 展开
    .van-collapse-item__title--expanded {
        .svg-icon {
            transform: rotate(-180deg);
        }
    }
}
</style>