<template>
    <div class="info">
        <el-tabs>
            <el-tab-pane style="height: 40px; padding: 10px; text-align: left; margin-left:10px; font-size: 16px;">新建部门
                <span><i class="el-icon-close" @click="close"></i></span>
            </el-tab-pane>
        </el-tabs>
        <div style="display: flex;">
            <img class="img" src="" alt=""><span><el-button style="width: 60px; margin-left: -160px;
            margin-top: 60px; background-color:rgb(131, 208, 243);">更换</el-button></span>
        </div>
        <div class="form">
            <el-form :model="form" label-position="left" label-width="130px">
                <el-form-item :model="form.fullName" label="部门级别：">
                    <el-select style="width:400px">
                        <el-option label=""></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :model="form.abbreviateName" label="上级部门：">
                    <el-select style="width:400px">
                        <el-option label=""></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :model="form.registeredAddress" label="部门名称：">
                    <el-input placeholder="test" type="text"></el-input>
                </el-form-item>
                <el-form-item :model="form.registeredAddress" label="排重名：">
                    <el-input placeholder="test" type="text"></el-input>
                </el-form-item>
                <el-form-item :model="form.parentCorporation" label="部门负责人：">
                    <el-select style="width:400px">
                        <el-option label=""></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :model="form.sccide" label="部门接口人：">
                    <el-select style="width:400px">
                        <el-option label=""></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :model="form.businessAddress" label="在岗人数：">
                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="100"></el-input-number>
                </el-form-item>
                <el-form-item :model="form.staffCount" label="部门职责：">
                    <el-input type="textarea" placeholder="请输入" v-model="textarea" maxlength="200"
                        show-word-limit></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div style="margin-top: 30px;">
            <el-button style="background-color:rgb(131, 208, 243);">下一个</el-button>
            <el-button>重置</el-button>
            <el-button style="background-color:rgb(131, 208, 243);">更新</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {

            },
            num: 100,
            textarea:''
        }
    },
    methods: {
        close() {

        }
    }

}
</script>
<style lang="less" scoped>
.info {
    margin-top: 10px;
    margin-left: 300px;
    left: 350px;
    width: 600px;
    height: 750px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

    .img {
        margin: 15px 50px 0 50px;
        width: 500px;
        height: 80px;
    }


    .el-icon-close {
        margin-left: 480px;
    }

    /deep/.el-tabs__header {
        height: 0;
        margin-bottom: 0;
    }


    .form {
        .el-form {

            .el-form-item {
                padding-top: 10px;
                margin-inline: 20px;
                margin-bottom: 0;
            }

            /deep/.el-form-item__label {
                padding: 0;
                text-align: left;
            }

            /deep/.el-form-item__content {
                display: flex;
                width: 400px;
            }
        }
    }

    .el-button {
        width: 100px;
        height: 30px;
        padding: 5px;
        margin: 10px;
    }
}
</style>