<template>
    <div>
        <!-- 我的权限页面 my-role -->
        <LHeader :text="$route.meta.title"></LHeader>
        <!-- 权限卡片 -->
        <div v-if="myRoles">
            <template>
                <div class="title">我的角色</div>
                <van-cell-group inset>
                    <div class="tag-wrap">
                        <van-tag v-for="(item, index) in myRoles" :key="index" :color="getColor()" plain round>{{item.roleName}}</van-tag>
                    </div>
                </van-cell-group>
            </template>
        </div>
         <!-- 权限卡片 -->
        <div v-if="role_list.length>0">
            <template>
                <div class="title">作业人员不安全行为监测预警系统</div>
                <van-cell-group inset>
                    <div class="tag-wrap">
                        <van-tag v-for="(item, index) in role_list" :key="index" :color="getColor()" plain round>{{item}}</van-tag>
                    </div>
                </van-cell-group>
            </template>
        </div>

    </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { getFunTwo } from "@/service/table";
import { getUserInfo } from "@/utils/userInfo";
export default {
    components: {
        LHeader,
    },
     mounted() {
        this.getRoleList();
    },
    data() {
        return {
            tabColor: ["#07c160", "#1989fa", "#ee0a24", "#ff976a"],
            userId: getUserInfo() ? getUserInfo().userId :"",
            myRoles: getUserInfo() ? getUserInfo().roles :"", 
            role_list: "",
        };
    },
    methods: {
         async getRoleList() {
            let res = await getFunTwo(`project/role/${this.userId}`);
            if (res) {
                this.role_list = res.data;
            } else {
                this.$toast.fail("加载失败,请稍后再试");
            }
        },
        // 获得一个随机色
        getColor() {
            return this.tabColor[
                Math.floor(Math.random() * [this.tabColor["length"]])
            ];
        },
    },

};
</script>

<style scoped lang="less">
/* @import url(); 引入css类 */

.van-cell-group--inset {
    margin: 0 10px 10px;
    padding: 10px 10px 8px;
    min-height: 1.5rem;
}

.title {
    padding: 0.2rem .266667rem;
    font-size: 0.4rem;
}
.tag-wrap > span {
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
}
.van-tag {
    padding: 0.03rem 0.2rem;
    font-size: 0.25rem;
}
</style>