<template>
    <div>
        <el-dialog v-dialog-drag class="dialog" title="设备编辑" :visible.sync="dialogVisible" width="25%" center>
            <el-divider></el-divider>
            <div style="height: 470px;">
                <el-scrollbar style="height: 100%;">
                    <el-form ref="form" :model="form" label-position="left" label-width="75px">
                        <el-form-item label="设备名称：" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="设备ID：" prop="id">
                            <el-input v-model="form.id"></el-input>
                        </el-form-item>
                        <el-form-item label="设备类别：" prop="type">
                            <el-select v-model="form.type" placeholder="请选择">
                                <el-option value="test"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备用途：" prop="use">
                            <el-select v-model="form.use" placeholder="请选择">
                                <el-option value="test"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备位置：" prop="position">
                            <el-select v-model="form.position" placeholder="请选择">
                                <el-option value="test"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label-width="105px" label="设备使用年限：" prop="life">
                            <el-input class="life" v-model="form.life"></el-input>
                        </el-form-item>
                        <el-form-item label-width="90px" label="设备责任人：" prop="person">
                            <el-input class="person" v-model="form.person"></el-input>
                        </el-form-item>
                        <el-form-item label="公司名称：" prop="corpor_name">
                            <el-select v-model="form.corpor_name" placeholder="请选择">
                                <el-option value="test"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="部门名称：" prop="depart_name">
                            <el-select v-model="form.depart_name" placeholder="请选择">
                                <el-option value="test"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label-width="45px" label="备注：" prop="note">
                            <el-input class="note" type="textarea" :rows="2" v-model="form.note"></el-input>
                        </el-form-item>
                        <el-form-item label-width="45px" style="width: 370px;" :model="form.attachment" label="附件："
                            prop="attachment">
                            <el-upload class="attachment" drag :action="action" multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip" style="display: flex;">请上传大小不小于 <p
                                        style="color: crimson;">5MB</p>，格式为 <P style="color: crimson;">png/jpd/jpeg</P>的文件
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </el-scrollbar>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary">下一个</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
                <el-button type="primary" @click="submitForm('form')">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                name: '',
                id: '',
                type: '',
                use: '',
                position: '',
                life: '',
                person: '',
                corpor_name: '',
                depart_name: '',
                note: '',
                attachment: ''
            },
            action: ''
        }
    },
    methods: {
        handleNodeClick() {

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //
                }
            })
        }
    }

}
</script>
<style lang="less" scoped>
/deep/.el-dialog {
    height: 600px !important;
}

.el-form {
    .el-form-item {
        margin: 20px 0 0 40px;
        width: 400px;

        /deep/.el-form-item__label {
            padding: 0;
            font-size: 15px;
        }

        /deep/.el-input__inner {
            width: 300px;
            height: 30px;
        }

        .life {
            /deep/.el-input__inner {
                width: 270px !important;
            }
        }

        .person {
            /deep/.el-input__inner {
                width: 285px !important;
            }
        }

        .note {
            /deep/.el-input__inner {
                width: 330px !important;
            }
        }
    }
}

.dialog-footer {
    display: flex;
}


/deep/.el-dialog {
    height: 30vh;
}

/deep/.el-dialog__title {
    margin-right: 330px;
}

/deep/.el-dialog__headerbtn {
    font-size: 25px;
}

/deep/.el-dialog__body {
    padding: 0;
}

/deep/.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 95%;
    margin: 0;
    margin-left: 2.5%;
}

/deep/.el-dialog__footer {
    margin-top: -20px;
}

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