<template>
    <div class="base-user-center">
        <div style="display: flex;">
            <Dropdown placement="bottom-end">
                <PersonalPhoto style="cursor: pointer;" :name="userInfo.username" :picture="user.picture" :color="userInfo.nameColor" />
                <DropdownMenu slot="list" class="user-center-wrap">
                    <DropdownItem class="user-info-wrap" @click.native="toUserCenter()">
                        <p>{{userInfo.username}}</p>
                        <p class="user-id">{{`ID: ${userInfo.id}`}}</p>
                        <Icon class="user-info-arrow" type="ios-arrow-forward" color="#fff" />
                    </DropdownItem>
                    <!-- <DropdownItem class="drop-item" style="margin-top:8px" @click.native="onRoleSelect('student')">
                        <Icon type="md-swap" class="drop-item-icon" />
                        {{$t('user.toStudent')}}
                    </DropdownItem> -->
                    <DropdownItem v-if="hasArea" class="drop-item" @click.native="changePlatform()">
                        <Icon type="md-arrow-round-forward" class="drop-item-icon" />
                        {{ curPlatform === 'area' ? $t('user.toSchool') : $t('user.toArea')}}
                    </DropdownItem>
                    <DropdownItem class="drop-item" @click.native="toSettings('1')">
                        <Icon custom="iconfont icon-school" class="drop-item-icon" />
                        {{$t('user.schoolMgt')}}
                    </DropdownItem>
                    <DropdownItem class="drop-item" @click.native="toSettings('0')">
                        <Icon type="ios-settings" class="drop-item-icon" />
                        {{$t('user.systemSet')}}
                    </DropdownItem>

                    <DropdownItem @click.native="onQuit">
                        <Icon type="md-power" class="drop-item-icon" />
                        {{$t('utils.logout')}}
                    </DropdownItem>
                    <!-- <DropdownItem divided class="drop-item" disabled style="cursor: text;">
                        <Icon type="ios-information-circle-outline" class="drop-item-icon" />
                        V {{version}}
                    </DropdownItem> -->
					<DropdownItem divided class="drop-item" disabled style="cursor: text;">
						<Icon type="logo-vimeo" class="drop-item-icon"/>
						{{version}}
						<br>
						<Icon type="ios-information-circle-outline" class="drop-item-icon"/>
						能力点版本：{{ curStandard ? curStandard.replace('standard','') : '暂无' }}
					</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
    </div>
</template>

<script>
import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
export default {
    components: {
        PersonalPhoto
    },
    data() {
        return {
            curPlatform: '',
            version: '',
            curRole: '',
            userInfo: {
                username: '',
                account: '',
                role: '',
                courseNum: 0,
                activityNum: 0,
                classNum: 0,
                nameColor: '',
            },
            user: {},
            sizeInfo: {
                total: 0,   //所有
                image: 0,   //内容模块图片
                res: 0,     //内容模块教材
                video: 0,   //内容模块视频
                audio: 0,   //内容模块音频
                doc: 0,     //内容模块文档
                other: 0,   //内容模块其他文件
                data: 0      //除了内容模块之外的文件
            }
        }
    },
    created() {
        this.doRefresh()
        this.version = localStorage.getItem('version')
        this.curPlatform = localStorage.getItem('platform') || 'school'
    },
    mounted() {
        this.$EventBus.$off('freshUserInfo')
        this.$EventBus.$on('freshUserInfo', (data) => {
            if (data && data.picture) {
                this.$set(this.user, 'picture', '')
                setTimeout(() => {
                    this.$set(this.user, 'picture', data.picture)
                })
            } else {
                this.doRefresh()
            }
        })
    },
    methods: {
        /* 切换校级平台或区级平台 */
        changePlatform() {
            let goPlatform = this.curPlatform === 'area' ? 'school' : 'area'
            this.$router.push({
                name: goPlatform === 'area' ? 'area' : 'home'
            })
            localStorage.setItem('platform', this.curPlatform === 'area' ? 'school' : 'area')
            this.curPlatform = goPlatform
        },
        // 这里可以携带参数，直接跳转到对应的tab
        toSettings(tab) {
            this.$router.push({
                path: '/home/settings',
                query: { tab }
            })
        },
        // 这里可以携带参数，直接跳转到对应的tab
        toUserCenter() {
            this.$router.push({
                name: 'userCenter'
            })
        },
        doRefresh() {
            this.user = JSON.parse(decodeURIComponent(localStorage.userInfo, "utf-8"));
            let user_profile = JSON.parse(decodeURIComponent(localStorage.user_profile, "utf-8"));
            if (this.user.roles.length) {
                this.curRole = this.user.roles[0]
            }
            this.userInfo.username = this.user.name
            this.userInfo.id = this.user.id || this.user.sub
            this.userInfo.nameColor = this.randomColor()
            this.userInfo.courseNum = user_profile.courses.length
        },
        //计算空间占比
        getPercent(size) {
            if (this.sizeInfo.total > this.$GLOBAL.PRIVATE_SPACE) {
                return '0%'
            } else {
                let p = (size * 100 / this.$GLOBAL.PRIVATE_SPACE)
                p = p > 1 ? p.toFixed(2) : p > 0 ? 1 : 0
                return p + '%'
            }
        },
        onRoleSelect(val) {
            if (localStorage.getItem('identity') != val) {
                this.curRole = val
                let path = val === 'student' ? '/studentWeb' : '/home'
                localStorage.setItem('identity', val)
                this.$router.push({ path: path })
            }
        },
        onQuit() {
            this.$emit('logout')
        },
        randomColor: function () {
            let r = Math.floor(Math.random() * 255);
            let g = Math.floor(Math.random() * 255);
            let b = Math.floor(Math.random() * 255);
            return 'rgba(' + r + ',' + g + ',' + b + ',0.8)';
        }
    },

    computed: {

        getSizeVal() {
            return val => {
                return this.$tools.bytesToSize(val)
            }
        },
        getRoleName() {
            return val => {
                return val === 'student' ? this.$t('utils.student') : this.$t('utils.teacher')
            }
        },
        hasArea() {
            return this.$store.state.user.userProfile.areas.length > 0
        },
		curStandard(){
			return this.$store.state.user.schoolProfile.school_base ? this.$store.state.user.schoolProfile.school_base.standard : ''
		}
    },

}
</script>
<style scoped>
.drop-item-icon {
    margin-right: 5px;
}
.drop-item {
    padding: 10px 16px;
}
.user-info-arrow {
    float: right;
    margin-top: -30px;
    font-size: 20px;
}
.user-info-wrap {
    background: #608f94;
    color: white;
    padding: 12px 16px;
    box-shadow: 0px 2px 5px #eee;
}
.user-id {
    color: #dfdfdf;
    margin-top: 5px;
    font-size: 12px;
}
.user-center-wrap {
    min-width: 200px;
    border-radius: 6px;
    overflow: hidden;
}
.user-storage-distribution {
    overflow: hidden;
}
.user-storage-text span {
    margin-right: 20px;
    display: inline-block;
}
.storage-full {
    background-color: red;
}

.storage-data {
    background-color: #f8c006;
}

.storage-image {
    background-color: #45c84a;
}

.storage-video {
    background-color: #8e2bdd;
}

.storage-audio {
    background-color: #e1027b;
}

.storage-doc {
    background-color: #03c0c2;
}

.storage-res {
    background-color: #1ffcc5;
}

.storage-other {
    background-color: #e87b22;
}

.text-data {
    color: #f8c006;
}

.text-image {
    color: #45c84a;
}

.text-video {
    color: #8e2bdd;
}

.text-audio {
    color: #e1027b;
}

.text-doc {
    color: #03c0c2;
}

.text-res {
    color: #1ffcc5;
}

.text-other {
    color: #e87b22;
}
</style>
<style lang="less">
.base-user-center .ivu-select-dropdown {
    padding: 0px 0px 5px 0px;
    border-radius: 7px;
}
.base-user-center {
    .base-user-info {
        margin-right: 20px;
        text-align: right;

        .base-user-name {
            font-weight: bold;
            color: #b2b5b4;
        }

        .base-user-post {
            color: #686b6b;
        }
    }

    img {
        width: 40px;
        border-radius: 50%;
        border: 2px solid #dddddd;
        cursor: pointer;
    }

    .ivu-dropdown-item {
        text-align: left;
    }

    .ivu-poptip-popper {
        width: 460px !important;
    }

    .ivu-poptip-popper {
        left: -400px !important;
        padding: 0;
    }

    .ivu-poptip-title {
        display: none;
    }

    .ivu-poptip-arrow {
        left: 90% !important;
    }

    .user-center {
        height: 620px;
        padding-top: 30px;

        .user-info {
            .fl-col-center;

            img {
                width: 70px;
                border: 2px solid #fff;
            }

            &-username {
                margin: 10px 0;
                font-size: 18px;
                font-weight: bold;
                letter-spacing: 0.6px;
                color: #1cc0f3;
            }

            &-account {
                color: #a5a5a5;
            }

            &-btn {
                background: #1cc0f3;
                padding: 5px 60px;
                color: #fff;
                margin-top: 20px;
                border-radius: 5px;
                cursor: pointer;
            }
        }

        .user-nums {
            display: flex;
            justify-content: space-around;
            padding-top: 60px;

            &-item {
                .fl-col-center;

                span {
                    &:first-child {
                        font-size: 34px;
                        font-weight: bold;
                        color: #fff;
                    }

                    &:last-child {
                        font-size: 14px;
                        color: #1cc0f3;
                    }
                }
            }
        }

        .user-storage {
            padding-top: 50px;

            p {
                text-align: center;
                color: #a5a5a5;
                font-size: 12px;
            }

            &-distribution {
                margin: 15px 0;
                height: 10px;
                width: 100%;
                border-radius: 50px;
                background-color: #888888;
                display: flex;

                span {
                    display: inline-block;
                    width: 50px;
                    height: 10px;
                }

                &-green {
                    border-radius: 5px 0 0 5px;
                    background-color: #00d523;
                }

                &-orange {
                    background-color: #e87b22;
                }

                &-red {
                    background-color: #ff40bc;
                }

                &-blue {
                    background-color: #1fccd5;
                }
            }

            &-text {
                margin-top: 10px;
                font-size: 12px;
                font-weight: bold;
                white-space: normal;
                /*display: flex;
					flex-wrap: wrap;
					justify-content: space-around;*/
            }
        }

        .btn-logout {
            .fl-col-center;
            background: #1cc0f3;
            padding: 6px 0;
            color: #fff;
            width: 60%;
            margin-left: 20%;
            margin-top: 40px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
    }

    .fl-col-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}
</style>
