<template>
    <div class="personPage">
        <el-row>
            <el-col :span="24">
                <div class="content">
                    <el-row>
                        <el-col :span="9">
                            <p class="title">人员信息</p>
                            <p class="search">
                                <span class="value">
                                    <span>姓名：</span>
                                    <el-input v-model="allVal.name" size="medium" :disabled="true"></el-input>
                                </span>
                            </p>
                            <p class="search">
                                <span class="value">
                                    <span>角色：</span>
                                    <el-input v-model="allVal.role" size="medium" :disabled="true"></el-input>
                                </span>
                            </p>
                            <p class="search">
                                <span class="value">
                                    <span>联系电话：</span>
                                    <el-input v-model="allVal.phone" size="medium" :disabled="true"></el-input>
                                </span>
                            </p>
                            <p class="search">
                                <span class="value">
                                    <span>性别：</span>
                                    <el-input v-model="allVal.sex" size="medium" :disabled="true"></el-input>
                                </span>
                            </p>
                            <p class="search">
                                <span class="value">
                                    <span>公司：</span>
                                    <el-input v-model="allVal.unit" size="medium" :disabled="true"></el-input>
                                </span>
                            </p>
                        </el-col>
                        <el-col :span="5">
                            <p class="status">
                                <span>状态：</span>
                                <img src="./img/click.png" style="width: 21px;height: 21px;" v-if="allVal.status === 1">
                                <img src="./img/clickN.png" style="width: 21px;height: 21px;" v-if="allVal.status === 0">
                                <span class="Sfont">在线</span>
                            </p>
                        </el-col>
                        <el-col :span="10">
                            <div class="upload">
                                <img src="./img/upload.png">
                                <p>上传个人照片</p>
                            </div>
                            <div class="jump">
                                <span class="button">相关项目</span>
                                <span class="button">相关评价</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data () {
        return {
            allVal: {
                name: '',
                phone: '',
                sex: '',
                role: '',
                unit: '',
                status: 0
            },
            fileList: [],
            dialogImageUrl: ''
        }
    },
    created() {
    },
    mounted(){
        let val = this.$store.getters.getSidebar;
        if (val[val.length - 1].path !== 'personPage') {
            val.push(
                {
                    name: '人员信息',
                    path: 'personPage'
                }
            )
            this.$store.commit('changeSidebar', val);
        }
        let value = this.$route.params.value;
        if (value !== '' || value !== undefined) {
            this.allVal.name = value.name;
            this.allVal.phone = value.number;
            this.allVal.sex = value.sex;
            this.allVal.role = value.roleName;
            this.allVal.unit = value.unitName;
        }
    },
    methods: {
    },
    components: {
    },
    watch: {
    }
}
</script>
<style scoped>
    .personPage{
        background: #ebf0f8;
        width: 100%;
    }
    .personPage .content{
        margin: 40px;
        height: 841px;
        background: #fff;
        overflow: hidden;
    }
    .personPage .content .title{
        padding: 30px 0 0 60px;
        font-size: 20px;
        color: #233b6e;
    }
    .personPage .content .search{
        position: relative;
        margin-top: 36px;
        padding: 0px 0px 0px 70px;
    }
    .personPage .content .value{
        width: 410px;
        display: flex;
        font-size: 18px;
        color: #666;
    }
    .personPage .content .status, .personPage .content .upload, .personPage .content .jump{
        margin-top: 86px;
        font-size: 18px;
        color: #333;
        cursor: default;
    }
    .personPage .content .upload{
        cursor: pointer;
        width: 170px;
        text-align: center;
        display: inline-block;
    }
    .personPage .content .upload p{
        margin-top: 10px;
    }
    .personPage .content .jump{
        display: inline-block;
        vertical-align: top;
        width: 365px;
        text-align: right;
    }
    .personPage .content .status>span{
        vertical-align: bottom;
    }
    .personPage .content .Sfont{
        display: inline-block;
        margin-left: 5px;
    }
    .personPage .content .value>span{
        width: 150px;
        display: inline-block;
        line-height: 34px;
        text-align: right;
    }
    .personPage .content .button{
        display: inline-block;
        width: 100px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background: #4877e6;
        cursor: pointer;
        margin-left: 55px;
        border-radius: 2px;
        color: #fff;
        font-size: 18px;
    }
    .personPage .content .button:hover{
        background: rgba(72,119,230,.6);
    }
    .personPage>>>.el-input--medium .el-input__inner{
        font-size: 18px;
        color: #333;
        font-family: 'Regular';
    }
</style>
