<template>
  <view>
    <u-navbar
      title-color="#fff"
      :custom-back="customBack"
      :border-bottom="false"
      back-icon-color="#CCE8FF"
      :background="{ background: '#008CFF' }"
      title="新增免密支付车牌"
    ></u-navbar>
    <view class="new-plate-number">
      <view class="message-input-wrap" @click="messageInputClick">
        <u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
      </view>
      <u-keyboard
        ref="uKeyboard"
        mode="car"
        @change="keyboardChange"
        @confirm="keyboardConfirm"
        @backspace="backspace"
        v-model="keyboardshow"
      ></u-keyboard>
    </view>

    <u-toast ref="uToast" />
    <u-modal v-model="delCarshow" :show-cancel-button="true" @confirm="confirmDelCar" :content="delCarContent"></u-modal>
    <u-action-sheet :list="colorList" @click="confirmColor" v-model="colorShow"></u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyboardshow: false,
      delCarshow: false,
      colorShow: false,
      delCarContent: '',
      colorList: [
        { text: '蓝色', colorCode: 0 },
        { text: '黄色', colorCode: 1 },
        { text: '黑色', colorCode: 2 },
        { text: '白色', colorCode: 3 },
        { text: '绿色', colorCode: 4 },
        { text: '其他', colorCode: 99 }
      ]
    };
  },
  methods: {
    customBack() {
      this.$u.route({
        type: 'switchTab',
        url: 'pages/index/index'
      });
    },
    messageInputClick() {
      this.keyboardshow = true;
    },
    // 按键被点击(点击退格键不会触发此事件)
    keyboardChange(val) {
      // 将每次按键的值拼接到value变量中，注意+=写法
      this.newPlateNumber += val;
      console.log(this.newPlateNumber);
    },
    // 退格键被点击
    backspace() {
      // 删除value的最后一个字符
      if (this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
      console.log(this.newPlateNumber);
    },
    keyboardConfirm() {
      this.colorShow = true;
    },
    confirmColor(e) {
      this.vehicleColor = this.colorList[e].colorCode;
    }
  }
};
</script>

<style></style>