<template>
    <div class="container">
        <fans-info></fans-info>
        <div class="content">
            <div class="name">基本信息</div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <span class="el-icon-user"></span>
                    </div>
                    <div class="text2">昵称</div>
                    <div class="text3">{{ userInfo.username }}</div>
                </div>
                <div class="text4">修改</div>
            </div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <span class="el-icon-price-tag"></span>
                    </div>
                    <div class="text2">编码</div>
                    <div class="text3">{{ userInfo.id }}</div>
                </div>
                <div class="text4">修改</div>
            </div>
            <!-- <div class="box">
                <div class="text">
                    <div class="text1">
                        <span class="el-icon-document"></span>
                    </div>
                    <div class="text2">简介</div>
                    <div class="text3 text5">
                        广州小云互娱科技有限公司成立于2017年，作为广东省游戏产业协会成员，是一家集游戏研发、运营和发行领域的综合性游戏公司。广州小云互娱科技有限公司成立于2017年，作为广东省游戏产业协会成员，是一家集游戏研发、运营和发行领域的综合性游戏公司。广州小云互娱科技有限公司成立于2017年，作为广东省游戏产业协会成员，是一家集游戏研发、运营和发行领域的综合性游戏公…
                    </div>
                </div>
                <div class="text4">修改</div>
            </div> -->
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <span class="el-icon-message"></span>
                    </div>
                    <div class="text2">邮箱</div>
                    <div class="text3">{{ userInfo.email || '暂无' }}</div>
                </div>
                <div class="text4">修改</div>
            </div>
            <div class="border"></div>
            <div class="name">账号安全</div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <span class="el-icon-mobile-phone"></span>
                    </div>
                    <div class="text2">登录账号</div>
                    <div class="text3">{{ Phone }}</div>
                </div>
                <div class="text4" @click="all('security')">修改</div>
            </div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <span class="el-icon-lock"></span>
                    </div>
                    <div class="text2">登录密码</div>
                    <div class="text3">********</div>
                </div>
                <div class="text4" @click="all('modifypad')">修改</div>
            </div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <span class="el-icon-lock"></span>
                    </div>
                    <div class="text2">交易密码</div>
                    <div class="text3">付款时用来认证身份信息</div>
                </div>
                <div class="text4" @click="all('/transaction')">修改</div>
            </div>
            <div class="border"></div>
            <div class="name">认证信息</div>
            <div class="box">
                <div class="text">
                    <div class="text1">
                        <span class="el-icon-lock"></span>
                    </div>
                    <div class="text2">实名认证</div>
                    <div class="text3">{{ Status }}</div>
                </div>
                <div class="text4" @click="Auths">修改</div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import FansInfo from '../../components/FansInfo.vue';
export default {
    components: { FansInfo },
    data() {
        return {};
    },
    computed: {
        ...mapState(['userInfo']),
        Phone() {
            return this.userInfo.phone.slice(0, 3) + ' **** ' + this.userInfo.phone.slice(7, 11);
        },
        type() {
            return this.userInfo.authorities.find(item => {
                return item.name == 'ROLE_INSTITUTION' || item.name == 'ROLE_PERSONAL';
            });
        },
        Status() {
            if (this.userInfo.authStatus === 'NOT_AUTH') {
                return '未认证';
            } else if (this.userInfo.authStatus === 'PENDING') {
                return '认证中';
            } else if (this.userInfo.authStatus === 'SUCCESS') {
                return '已认证';
            } else {
                return '认证失败';
            }
        }
    },
    methods: {
        Auths() {
            if (this.type) {
                if (this.type.name == 'ROLE_INSTITUTION') {
                    this.$nextTick(() => {
                        // if (this.institutionInfo.status == 'PASS') {
                        this.$router.push('/enterpriseauthentication');
                        // }
                    });
                } else if (this.type.name == 'ROLE_PERSONAL') {
                    this.$nextTick(() => {
                        // if (this.institutionInfo.status == 'PASS') {
                        this.$router.push('/userauthentication');
                        // }
                    });
                }
            } else {
                this.$router.push('/authentication');
            }
            // ROLE_INSTITUTION 企业
            // ROLE_PERSONAL 个人
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    .content {
        padding: 0 16px;
        .name {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
            margin: 30px 0 10px 0;
        }
        .box {
            display: flex;
            justify-content: space-between;
            padding: 16px 0;
            .text {
                display: flex;
                .text1 {
                    font-size: 24px;
                    color: #939599;
                }
                .text2 {
                    font-size: 17px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 24px;
                    width: 94px;
                    margin: 2px 0 0 10px;
                }
                .text3 {
                    font-size: 16px;
                    font-weight: 400;
                    color: #949699;
                    line-height: 26px;
                    &.text5 {
                        width: 745px;
                    }
                }
            }
            .text4 {
                font-size: 16px;
                font-weight: 400;
                color: #00ffcb;
                line-height: 24px;
                cursor: pointer;
            }
        }
        .border {
            height: 1px;
            background: #494a4d;
            border-radius: 1px;
            margin-top: 30px;
        }
    }
}
</style>
