<template>
    <div class="newrole">
        <p class="dialog-header">
            <span>新增角色</span>
        </p>
        <div style="text-align: center; margin-top: 135px;">
            <p class="add">
                <span class="addVal">
                    <span>角色名称：</span>
                    <el-input v-model="addVal" size="medium" placeholder="请输入"></el-input>
                </span>
            </p>
        </div>
        <p class="line"></p>
        <p class="buttonClick">
            <span class="buttonCancl" @click="cancel">取消</span>
            <span class="buttonSave" @click="save">下一步</span>
        </p>
    </div>
</template>

<script>
export default {
    data () {
        return {
            addVal: ''
        }
    },
    created() {
    },
    mounted(){
    },
    methods: {
        cancel() {
            this.$emit('on-cancel')
        },
        save() {
            console.log(this.addVal);
            if (this.addVal === '') {
                this.$message.error('角色名称不能为空！')
            } else {
                this.$emit('on-name', this.addVal)
            }
        }
    },
    components: {
    },
    watch: {
    }
}
</script>
<style scoped>
    .newrole .add{
        display: inline-block;
    }
    .newrole .addVal{
        width: 280px;
        display: flex;
        font-size: 18px;
        color: #666;
        text-align: center;
    }
    .newrole .addVal>span{
        width: 140px;
        display: inline-block;
        line-height: 34px;
    }
    .newrole>>>.el-input__inner{
        border: 1px solid rgba(8,104,157,.3);
        border-radius: 2px;
        font-size: 18px;
        color: #999;
        height: 34px;
        line-height: 34px;
        width: 180px;
    }
    .newrole .line{
        margin: 150px 30px 0 30px;
        height: 1px;
        background: rgba(72,119,230,0.2);
    }
    .newrole .buttonClick{
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
    }
</style>
