<template>
    <div class="main">
        <div class="title">编辑资料</div>
        <div class="top" v-if="!conType">
            <img :src="userInfo.avatar || sizeForm.avatar" alt="" />
            <p>当前为普通用户，请进行用户认证</p>
            <div class="btntop">
                <el-button type="primary" @click="all('/enterprise')">机构认证</el-button>
                <el-button class="personal" @click="all('/personal')">个人认证</el-button>
            </div>
        </div>
        <mechanism-info v-if="type"> </mechanism-info>
        <personal-infos v-if="types"> </personal-infos>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import MechanismInfo from '../../components/MechanismInfo.vue';
import PersonalInfos from '../../components/PersonalInfos.vue';
export default {
    components: { MechanismInfo, PersonalInfos },
    computed: {
        ...mapState(['userInfo', 'institutionInfo', 'personalInfo', 'loginType']),
        conType() {
            return this.userInfo.authorities.find(item => {
                return item.name == 'ROLE_INSTITUTION' || item.name == 'ROLE_PERSONAL';
            });
        },
        type() {
            return this.userInfo.authorities.find(item => {
                return item.name == 'ROLE_INSTITUTION';
            });
        },
        types() {
            return this.userInfo.authorities.find(item => {
                return item.name == 'ROLE_PERSONAL';
            });
        }
    },
    data() {
        return {
            sizeForm: {
                avatar: 'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/image/2021-06-30-17-02-42uzAOUPcw.jpeg'
            }
        };
    }
};
</script>

<style lang="less" scoped>
.main {
    background-color: #fff;
    margin: 17px 20px 0;
    margin-bottom: 40px;
    .title {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        padding-bottom: 17px;
        line-height: 26px;
        border-bottom: 1px solid @bg;
    }
    .top {
        margin-left: 300px;
        margin-top: 30px;
        img {
            width: 148px;
            height: 148px;
            border-radius: 50%;
            margin-left: 57px;
        }
        p {
            margin: 40px 0;
            font-size: 18px;
            font-weight: bold;
            color: #000000;
            line-height: 28px;
        }
        .btntop {
            margin-left: 32px;
            .personal {
                background: rgba(520, 226, 200, 0.7);
                color: #ff8700;
            }
        }
    }
}
</style>
