import { computed, createApp } from 'vue'
import { createPinia, storeToRefs } from 'pinia'

import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import RImage from '@/components/RImage.vue'

import './styles/main.less'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import { useUserStore } from '@/stores/user'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.component('r-image', RImage)

const { user } = storeToRefs(useUserStore())
app.provide(
    'isAdmin',
    computed(() => {
        if (!(user.value && user.value.role)) return false
        return user.value.role === 'admin'
    })
)
app.provide(
    'isOperator',
    computed(() => {
        if (!(user.value && user.value.role)) return false
        return user.value.role === 'operator'
    })
)
app.provide(
    'isApi',
    computed(() => {
        if (!(user.value && user.value.role)) return false
        return user.value.role === 'api'
    })
)
app.provide(
    'isAdminAndOperator',
    computed(() => {
        if (!(user.value && user.value.role)) return false
        return user.value.role === 'admin' || user.value.role === 'operator'
    })
)

app.mount('#app')
