<template>
    <div>
        <!-- 我的权限页面 my-role -->
        <LHeader :text="$route.meta.title"></LHeader>
        <!-- 通知 -->
        <van-sticky offset-top="1.5rem">
            <van-notice-bar
            left-icon="volume-o"
            text="提示：系统使用时请核实应用权限如有问题请联系管理员。"
        />
        </van-sticky>
        <!-- 权限卡片 -->
        <div v-for="(item, key) in role_list" :key="key">
            <template v-if="item">
                <div class="title">{{ key }}</div>
                <van-cell-group inset>
                    <div class="tag-wrap">
                        <van-tag
                            :color="getColor()"
                            v-for="(i, index) in item"
                            :key="index"
                             plain
                             round
                        >
                            <template v-if="i">
                                {{ i }}
                            </template>
                        </van-tag>
                    </div>
                </van-cell-group>
            </template>
        </div>
    </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
export default {
    components: {
        LHeader,
    },
    data() {
        return {
            tabColor: ["red", "orange", "skyblue",'yellowgreen'],

            role_list: {
                "政务大数据项目cs-401": [],
                "政务大数据项目cs-801": [],
                朝阳区和平街14区简易住宅楼改造项目: [],
                "项目工程cs-001": [],
                "项目工程cs-002": [],
            },
        };
    },
    methods: {
        async getRoleList() {
            let res = await postFun("/mobile/userRoler");
            // console.log(res)
            if (res) {
                this.role_list = res.data;
            }else{
                this.$toast.fail("加载失败,请稍后再试");
            }
        },
        // 获得一个随机色
        getColor() {
            return this.tabColor[
                Math.floor(Math.random() * [this.tabColor["length"]])
            ];
        },
    },
    mounted() {
        this.getRoleList();
    },
};
</script>

<style scoped lang="less">
/* @import url(); 引入css类 */
.header-wrap {
    width: 100%;
    height: 50px;
    background-color: #2980f7;
    font-size: 17px;
    line-height: 50px;
    color: white;
    font-weight: none;
    text-align: center;
}
.con {
    height: calc(100% - 110px);
    padding: 10px 0 50px 0;
    background-color: #f0f1f5;
    position: relative;
    .user-info-wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .user-name {
            font-size: 17px;
            font-weight: none;
        }

        .tag-wrap {
            .van-tag {
                margin-right: 10px;
                margin-top: 3px;
                padding: 2px 4px;
            }
        }
    }

    .my-cell-group {
        padding: 10px 10px !important;
        .set-wrap {
            height: 1.1rem;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #e8e8e8;
            &:last-child {
                border-bottom: none;
            }
            span {
                margin-left: 0.2666rem;
                font-size: 13px;
                font-weight: none;
            }
        }
    }
}

.sign-out {
    width: 96%;
    position: absolute;
    bottom: 1.86667rem;
    left: 0px;
    right: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 5px;
    button {
        font-size: 15px;
        font-weight: none;
    }
}
.van-cell-group--inset {
    margin: 0 10px 10px;
    padding: 10px 10px 8px;
    min-height: 1.5rem;
}

.title {
    padding: 0.2rem 0.5rem;
    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>