<template>
    <div class="detaileDia">
        <el-dialog title="详情查看" width="769px" :visible.sync="detaileData.dialogVisible">
            <div>
                <span>账号名称：</span> <span class="text">{{ this.detaileData.data.userName }}</span>
            </div>
            <div>
                <span>真实姓名：</span> <span class="text">{{ this.detaileData.data.nickName }}</span>
            </div>
            <div>
                <span>所属部门：</span> <span class="text">{{ this.detaileData.data.dept.deptName }}</span>
            </div>
            <div>
                <span>所属角色：</span> <span class="text">{{ this.getRoles(this.detaileData.data.roles) }}</span>
            </div>
            <div>
                <span>联系电话：</span> <span class="text">{{ this.detaileData.data.phoneNum }}</span>
            </div>
            <div>
                <span>联系邮箱：</span> <span class="text">{{ this.detaileData.data.email }}</span>
            </div>
            <div>
                <span style="">状{{ "\u3000\u3000" }}态：</span> <span class="text">{{ this.detaileData.data.status == 1 ? '启用'
                    : '停用' }}</span>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'detaileDia',
    props: {
        detaileData: {
            type: Object,
            default: {}
        }
    },
    created() {

    },
    data() {
        return {

        }
    },
    methods: {
        getRoles(roles) {
            let remark = ''
            roles.forEach(item => {
                remark += item.roleName + ','
            })

            return remark.substring(0, remark.length - 1)
        }
    }
}
</script>
<style lang="scss" scoped>


.detaileDia {

    .el-dialog {
        div {

            padding-left: 280px;
            margin: 30px auto;

            span {
                font-size: 14px;
                color: #000;
            }


            .text {
                color: #555;
                font-weight: 400;
                // position: relative;
                // left: 20px;
            }
        }

    }
}
</style>