<template>
  <div class="number"
       v-if="showModal">
    <div class="number__cover"></div>
    <div class="number__editBox">
      <div class="number__content">
        <div class="number__title">输入您要修改的车牌</div>
        <Keyboard type="input"
                  :class="{hasTip:tip}"
                  :showSwitch="false"
                  :defaultText="defalutValue"
                  @onKeyboardClose="keyboardCompleted">
        </Keyboard>
        <div class="number__tip"
             v-if="tip">{{tip}}</div>
      </div>
      <div class="number__btn  mui-flex">
        <div class="number__btn-cancel mui-flex__cell"
             @click="cancelInput">取消</div>
        <div class="number__line"></div>
        <div class="number__btn-confirm mui-flex__cell"
             @click="confirmInput">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
import Keyboard from '../keyboard/index';
export default {
  name: 'KeyboardModal',
  components: { Keyboard },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    defalutValue: {
      type: String,
      default: ''
    },
    confirmTriggerHide: {
      type: Boolean,
      default: true
    },
    cancelTriggerHide: {
      type: Boolean,
      default: true
    },
    tip: {
      type: String,
      default: '（暂不支持黄牌）'
    }
  },
  data() {
    return {
      license: ''
    };
  },
  watch: {
    defalutValue: {
      handler(newValue, oldVal) {
        if (newValue) {
          this.license = newValue;
        }
      },
      immediate: true
    }
  },
  methods: {
    keyboardCompleted(num) {
      this.license = num;
    },
    confirmInput() {
      this.$emit('onConfirmKeyboardModal', this.license);
      this.confirmTriggerHide && this.$emit('update:showModal', false);
    },
    cancelInput() {
      this.$emit('onCloseKeyboardModal', this.license);
      this.cancelTriggerHide && this.$emit('update:showModal', false);
    }
  }
};
</script>
