<template>
  <el-dialog
    title="新建批次"
    :visible.sync="visible"
    width="35%"
    v-dialogDrag
    :close-on-click-modal="false"
    :before-close="cancel"
  >
    <div class="dia-box">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-suffix=":"
        label-width="100px"
      >
        <el-form-item label="质检批次名" prop="batchName">
          <el-input v-model="form.batchName"></el-input>
        </el-form-item>
        <el-form-item style="text-align:right;">
          <el-button type="primary" size="mini" @click="submit('form')">
            确定
          </el-button>
          <el-button size="mini" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { message } from "@/utils/common";
export default {
  props: {
    visible: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      form: {
        batchName: ""
      },
      rules: {
        batchName: [
          { required: true, message: "请输入质检批次名", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("submit", this.form);
        } else {
          return false;
        }
      });
    }
  }
};
</script>
