<!-- 带单个输入框的dialog -->
<template>
  <qf-dialog-def :title="title" @cancel="onCancel" @confirm="onConfirm" class="qf-input-dialog">
    <div v-if="msg" class="qf-input-dialog-msg">{{msg}}</div>
    <div class="qf-input-dialog-body">
      <label v-if="label">{{label}}</label>
      <qf-input type="text" autofocus v-form:input="validator" v-model="currentValue" ref="input" @keydown.enter.native="onConfirm"
                autofocus :maxlength="32"></qf-input>
    </div>
  </qf-dialog-def>
</template>

<script>
import QfInput from '../input';
import QfDialogDef from '../dialog/def';
import QfFormItem from '../font-icon';
import FormValidator from '../form-validator';
import Form from '../form-validator/directive';

export default {
  components: {
    QfInput,
    QfDialogDef,
    QfFormItem
  },
  directives: { Form },

  data() {
    return {
      currentValue: '',
      doConfirm: () => {
      },
      label: '',
      title: '',
      msg: '',
      rule: [{
        required: true, message: ''
      }],
      validator: new FormValidator()
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.$refs.input.focus();
    });
    // 验证规则
    this.validator.push({
      input: this.rule
    });
    this.validator.bindTravel();
  },

  methods: {
    onCancel() {
      this.$emit('hide');
    },

    onConfirm() {
      this.validator.validate(true).then(() => {
        this.$emit('hide');
        this.doConfirm && this.doConfirm(this.currentValue);
      }).catch(e => {
      });
    }
  }
};
</script>
