<template>
  <div class="replenishmentOrder">
    <el-dialog title="补订单" :visible="replenishmentOrderVisible" :label-position="labelPosition" width="30%"
      @close="replenishmentOrderClose">
      <el-form :model="replenishmentOrderForm" :rules="rules" ref="replenishmentOrderForm">
        <el-form-item label="订单号" label-width="60px" prop="biz_order_id">
          <el-input size="small" v-model="replenishmentOrderForm.biz_order_id" placeholder="订单号"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="replenishmentOrderClose" size="small">取 消</el-button>
        <el-button type="primary" @click="replenishmentOrderConfirm('replenishmentOrderForm')" size="small">确
          定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      replenishmentOrderForm: {
        biz_order_id: ''
      },
      labelPosition: 'right',
      rules: {
        biz_order_id: [
          { required: true, message: '请输入订单号', trigger: 'blur' }],
      }

    };
  },
  props: {
    replenishmentOrderVisible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  watch: {

  },
  methods: {
    //取消
    replenishmentOrderClose() {
      this.$emit("replenishmentOrderClose", false);
      this.clear()
    },
    //确定
    replenishmentOrderConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("replenishmentOrderConfirm",this.replenishmentOrderForm.biz_order_id);
        } else {
          return false;
        }
      });
    },
    // 清空
    clear(){
      this.replenishmentOrderForm.biz_order_id = ''
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: center;
}
</style>