<template>
  <view>
    <view class="parking_payment_card">
      <view class="parking_payment_content">
        <view class="parking_payment_header">
          <view class="title"> 请输入车牌号 </view>
        </view>
        <view class="license_plate_number" @click="handleProvinceClick">
          <template v-for="(i, index) in licensePlateNumber" class="item" :key="`iten_${index}`">
            <view v-if="!i && index === 7" class="item">
              <view class="new_energy">
                <uni-icons type="plusempty" color="#2A7EFB" size="13"></uni-icons>
                <view> 新能源 </view>
              </view>
            </view>
            <view class="item" v-else>
              {{ i }}
            </view>
            <view v-if="index === 1">·</view>
          </template>
        </view>
        <view class="query_btn">
          <hs-button label="添加车辆" size="md" @click="handleAddVehicle" />
        </view>
      </view>
    </view>

    <up-keyboard
      ref="uKeyboard"
      :mode="ketMode"
      :show="showKeyboard"
      @close="showKeyboard = false"
      @change="handleInputChange"
      @backspace="handleBackspaceChange"
      @cancel="showKeyboard = false"
      @confirm="showKeyboard = false"
    ></up-keyboard>
  </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const licensePlateNumber = ref(['', '', '', '', '', '', '', ''])
const licensePlateNumberValue = ref('')
const isFocus = ref(false)
const ketMode = ref('car')
const showKeyboard = ref(true)

const handleProvinceClick = () => {
  showKeyboard.value = true
  ketMode.value = 'car'
  isFocus.value = false
}

const handleInputChange = (e: any) => {
  if (licensePlateNumberValue?.value?.length < 8) {
    licensePlateNumberValue.value += e
    for (let i = 0; i < 8; i++) {
      licensePlateNumber.value[i] = licensePlateNumberValue.value[i] || ''
      console.log(licensePlateNumberValue.value[i])
    }
  }
  if (licensePlateNumberValue?.value?.length === 8) {
    showKeyboard.value = false
    isFocus.value = false
  }
}

const handleBackspaceChange = () => {
  licensePlateNumberValue.value = licensePlateNumberValue.value?.slice(0, -1)
  for (let i = 0; i < 8; i++) {
    licensePlateNumber.value[i] = licensePlateNumberValue.value[i] || ''
    console.log(licensePlateNumberValue.value[i])
  }
}

const handleAddVehicle = () => {
  if (licensePlateNumberValue?.value?.length < 7) {
    uni.showToast({
      title: '请输入完整的车牌号！',
      icon: 'none'
    })
    return
  }
  uni.showModal({
    title: '提示',
    content: '暂不能添加车辆！',
    showCancel: false,
    confirmColor: '#0082FA',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}
</script>

<style lang="scss">
@import './style.scss';
</style>
