<template>

    <div>
        <el-dialog title="交接信息" width="30%" :visible.sync="previewModelVisible" label-position="top" append-to-body destroy-on-close>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="交接班组" prop="bz">
                    <el-select v-model="ruleForm.bz" placeholder="请选择交接班组">
                        <el-option :label="item.label" :value="item.id" :key="item.id" v-for="(item,i) in handoverList"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {

    data() {
        return {
            previewModelVisible: false,
            handoverList:[],
            ruleForm: {
                bz: ''
            },
            rules: {
                bz: [{ required: true, message: "请选择交接班组", trigger: "blur" }],
            }
        }
    },
    methods: {
        // 打开预览模型弹窗
        openPreviewModel() {
            this.previewModelVisible = true;
        },
        // 关闭预览模型弹窗
        closePreviewModel() {
            this.previewModelVisible = false;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.closePreviewModel();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.closePreviewModel();
        }
    },
}
</script>

<style scoped></style>