<template>
  <a-form-model
    ref="ruleForm"
    :model="formValue"
    :rules="rules">
    <a-form-model-item
      class="my-models"
      :label-col="{span:6}"
      :wrapper-col="{span:16}"
      :label="formValue.label"
      prop="codeValue"
    >
      <a-input v-model="formValue.codeValue" @blur="changeVal" placeholder="请输入固定码"/>
    </a-form-model-item>
  </a-form-model>
</template>

<script type="text/ecmascript-6">
let flag = false
const validator = (rule, value, callback) => {
  console.log(`value.length`, value.length)
  if (value === '') {
    flag = false
    return callback(new Error('请输入固定码'))
  } else if (value.length > 20) {
    flag = false
    return callback(new Error('最大长度为20'))
  } else {
    flag = true
  }
}
  export default {
    props: {
      value: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        formValue: this.value,
        rules: {
          codeValue: { required: true, validator: validator }
        }
      }
    },
    methods: {
      changeVal() {
        console.log(`flag`, flag)
        this.$emit('changeValue', this.formValue)
      }
    }
  }
</script>

<style scoped>

</style>
