<template>
    <div class="container">
        <div class="header flexcenter flexcolumn">
            <div class="portrait flexcenter shadow">
                <img class="portrait-icom" :src="user.avatar" />
            </div>
            <div class="header-username flexacenter">{{ user.nickname }}</div>
            <div class="header-uid" @click="$copy(user.uin)">UID：{{ user.uin }}</div>
        </div>

        <!-- 数据展示板 -->
        <div class="operation-box shadow data-presentation flexflex">
            <div class="data-presentation-item flex1 flexcenter">
                <div class="data-presentation-number">{{ count.prestige }}</div>
                <div class="data-presentation-name">声望</div>
            </div>
            <div class="data-presentation-item flex1 flexcenter">
                <div class="data-presentation-number">{{ count.gtercurrency }}</div>
                <div class="data-presentation-name">寄托币</div>
            </div>
            <div class="data-presentation-item flex1 flexcenter">
                <div class="data-presentation-number">{{ count.digest }}</div>
                <div class="data-presentation-name">精华</div>
            </div>
        </div> 

        <div class="operation-box shadow">
            <a class="operation-item flexacenter" href="weixin://dl/business/?appid=wxa9296b07391c2bc7&path=pagesLoginRequired/pages/messageCenter/messageCenter">
                <div class="operation-left flexacenter">
                    <img class="operation-icom" mode="widthFix" src="@/assets/img/icon/email.png" />消息
                    <!-- <img class="operation-icom" mode="widthFix" src="@/assets/img/user/information.png">消息 -->
                </div>
                <div class="operation-right flexacenter">
                    <div v-if="user.messagenum == 0" class="operation-data flexcenter">{{ count.message }}</div>
                    <div v-else class="unread-info flexcenter">{{ user.messagenum }}</div>
                    <svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
                </div>
            </a>

            <a class="operation-item flexacenter" v-for="(item, index) in operateList" :key="index" :href="item.url">
                <div class="operation-left flexacenter"><img class="operation-icom" mode="widthFix" :src="`${$baseURL}/img/user/${item.icon}`" />{{ item.name }}</div>
                <div class="operation-right flexacenter">
                    <div class="operation-data flexcenter">{{ count[item.key] }}</div>
                    <svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
                </div>
            </a>
        </div>

        <div class="operation-box shadow">
            <a v-for="(item, index) in setList" :key="index" class="operation-item flexacenter" :href="item.url">
                <div class="operation-left flexacenter"><img class="operation-icom" mode="widthFix" :src="`${$baseURL}/img/user/${item.icon}`" />{{ item.name }}</div>
                <div class="operation-right flexacenter">
                    <svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
                </div>
            </a>
        </div>

        <div class="log-out" @click="logOut()">退出登录</div>
    </div>
</template>

<script>
export default {
    name: "userIndex",

    data() {
        return {
            user: {
                avatar: "",
                nickname: "",
                messagenum: 0,
            },
            count: {},

            operateList: [
                {
                    name: "收藏",
                    url: "https://www.gter.net/bbs/user/collection.html",
                    icon: "collect.png",
                    type: "collect",
                    key: "fav",
                },
                {
                    name: "发帖",
                    url: "https://www.gter.net/bbs/user/threads.html",
                    icon: "postmessage.png",
                    type: "collect",
                    key: "post",
                },
                {
                    name: "回帖",
                    url: "https://www.gter.net/bbs/user/post.html",
                    icon: "replymessage.png",
                    type: "post",
                    key: "reply",
                },
            ],

            setList: [
                {
                    // 设置列表
                    name: "个人资料",
                    url: "https://member.gter.net/index/modify.html",
                    icon: "personaldata.png",
                    type: "modify",
                },
                {
                    name: "设置头像",
                    url: "https://member.gter.net/index/avatar.html",
                    icon: "avatarsetting.png",
                    type: "avatar",
                },
                {
                    name: "我的状态",
                    url: "https://member.gter.net/index/status.html",
                    icon: "mystatus.png",
                    type: "status",
                },
                {
                    name: "修改密码",
                    url: "https://member.gter.net/reset/password.html",
                    icon: "changepassword.png",
                    type: "password",
                },
                {
                    name: "绑定邮箱",
                    url: "https://member.gter.net/reset/email.html",
                    icon: "bindemail.png",
                    type: "email",
                },
                {
                    name: "绑定手机",
                    url: "https://member.gter.net/reset/mobile.html",
                    icon: "bindmobile.png",
                    type: "mobile",
                },
                {
                    name: "绑定第三方账号",
                    url: "https://member.gter.net/bind",
                    icon: "bindingthird-party.png",
                    type: "bind",
                },
                {
                    name: "浏览个人主页",
                    url: "",
                    icon: "visithomepage.png",
                    type: "space",
                },
            ],
        }
    },

    mounted() {
        this.init()
    },

    methods: {
        init() {
            this.$http.post("/api/user", "").then(res => {
                let data = res.data
                this.count = data.count

                this.user = data.user

                let user = data.user
                let setList = this.setList
                setList.forEach(el => {
                    if (el.type == "space") el["url"] = `https://bbs.gter.net/space-uid-${user.uin}.html`
                })
            })
        },

        // 点击退出登录
        logOut() {
            this.user = {
                avatar: "",
                nickname: "",
                messagenum: 0,
            }

            this.$store.commit("setUser", {})
            this.$store.commit("setFavoriteList", [])
            this.$store.commit("setHomeRequestState", false)

            this.$http.post("/api/user/Logout").then(res => {
                this.$clearCookies()
                this.$router.push("/")
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    padding-top: 1.3rem;

    .header {
        padding: 1rem 0 0.8rem;

        .portrait {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background-color: #fff;
            position: relative;
        }

        .portrait-icom {
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 50%;
        }

        .header-username {
            color: #000;
            font-size: 0.48rem;
            line-height: normal;
            margin-top: 0.24rem;
            font-weight: 650;
        }

        .header-uid {
            color: #7f7f7f;
            font-weight: 400;
            margin-top: 0.12rem;
        }
    }

    .operation-box {
        background-color: #fff;
        margin: 0 0.2933rem 0.4rem;
        border-radius: 0.4rem;

        .operation-item {
            height: 1.8rem;
            justify-content: space-between;
            padding: 0 0.4rem;

            &:not(:first-of-type) {
                border-top: 0.0133rem dotted #d7d7d7;
            }

            .operation-left {
                color: #333333;
                font-size: 0.36rem;
                line-height: 0.6rem;
            }

            .operation-icom {
                width: 0.48rem;
                margin-right: 0.32rem;
            }

            .operation-data {
                background-color: rgba(246, 246, 246, 1);
                border-radius: 0.64rem;
                font-size: 0.28rem;
                color: #555555;
                min-width: 0.9rem;
                text-align: center;
                padding: 0 0.2rem;
                box-sizing: border-box;
            }

            .unread-info {
                background: rgba(253, 63, 93, 1);
                // width: .42rem;
                height: 0.42rem;
                border-radius: 0.64rem;
                color: #fff;
                font-size: 0.28rem;
                text-align: center;

                padding: 0 0.1rem;
                box-sizing: border-box;
            }

            .operation-right-icom {
                width: 0.12rem;
                height: 0.22rem;
                margin-left: 0.2rem;
            }
        }

        &.data-presentation {
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;

            .data-presentation-item {
                flex-direction: column;

                &:not(:last-of-type) {
                    border-right: 0.0133rem solid #ebebeb;
                }

                .data-presentation-number {
                    color: #000;
                    line-height: 0.6rem;
                    font-size: 0.4rem;
                    font-weight: 900;
                }

                .data-presentation-name {
                    color: #333333;
                    line-height: 0.6rem;
                    font-size: 0.32rem;
                }
            }
        }
    }

    .log-out {
        font-size: 0.36rem;
        line-height: 0.6rem;
        color: #555555;
        border-bottom: 0.0133rem solid #797979;
        width: 1.46rem;
        margin: 0.6rem auto 1rem;
    }
}
</style>
