<!--
 * @Author: micky
 * @Date: 2024-08-10 15:24:06
 * @LastEditors: micky
 * @LastEditTime: 2024-09-05 20:39:36
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\select-role\index.vue
-->
<template>
    <view class="select-role">
        <view class="text-5xl font-bold py-5 px-5">请选择角色后使用系统</view>
        <view
            class="role"
            v-for="role in userInfo.roles"
            :key="role.id"
            @click="handleSelectRole(role.id)"
        >
            <text :class="{ active: role.id === activeRole }">{{ role.name }}</text>
            <u-icon
                name="checkbox-mark"
                color="#0E66FB"
                :size="24"
                v-if="role.id === activeRole"
            ></u-icon>
        </view>
        <u-button type="primary" class="button" @click="enterSystem">进入系统</u-button>
    </view>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { useTabBarStore } from '@/stores/tabbar'
import cache from '@/utils/cache'
import { USER_INFO, ROLEINDEX } from '@/enums/cacheEnums'
import { useRoleData, type RoleItem } from '@/hooks/useRoleData'

const tabBarStore = useTabBarStore()
const userInfo = cache.get(USER_INFO)

const { roles } = useRoleData()
const activeRole = ref(userInfo.roles[0].id)
const getSelectedRole = (): RoleItem => {
    return roles.find(role => {
        return role.ids.includes(unref(activeRole))
    }) as RoleItem
}
let selectedRole = getSelectedRole()

const handleSelectRole = (id: number) => {
    activeRole.value = id
    selectedRole = getSelectedRole()
}
// 进入系统
const enterSystem = () => {
    const ind = userInfo.roles.findIndex(item => selectedRole.ids.includes(item.id))
    cache.set(ROLEINDEX, ind)
    tabBarStore.setTabBarList(selectedRole.tabBarList)
    uni.redirectTo({
        url: selectedRole.tabBarList[0].path
    })
}
</script>

<style lang="scss" scoped>
.select-role {
    @apply flex flex-col;

    .role {
        @apply px-5 h-[50px] leading-[50px] border-b border-[#f5f5f5] text-lg flex justify-between items-center;
        .active {
            @apply text-primary;
        }
    }
    :deep(.button) {
        @apply w-[90%] m-auto mt-[30px];
        button {
            @apply h-[40px];
        }
    }
}
</style>
