<template>
  <view>
    <view class="banner_header">
      <image
        mode="widthFix"
        src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K7G6NKCJYMMJXQ2B27GT7VGF.png"
      />
    </view>

    <view class="parking_payment_card">
      <view class="parking_payment_content">
        <view class="parking_payment_header">
          <view class="title"> 请输入车牌号 </view>
          <view class="headphones">
            <button open-type="contact">联系客服</button>
          </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 :style="index < 2? getStyleBgInfo():''">
              {{ i }}
            </view>
            <view v-if="index === 1">·</view>
          </template>
        </view>
        <view class="query_btn">
          <hs-button label="查询停车费" size="md" @click="handleQueryClick" />
        </view>
        <view class="parking_card_footer">
          <view class="label"> 历史使用车辆:</view>
          <view class="items_content">
            <view class="item" v-for="(i, index) in 1" :key="`item_${index}`"> 粤BFR2323 </view>
          </view>
        </view>
      </view>
    </view>

    <view class="parking_payment_footer">
      <view
        v-for="(i, index) in jinGangQu"
        :key="`item_${index}`"
        class="item"
        @click="toPage(i?.url)"
      >
        <view class="icon">
          <image :src="`/static/svg/${i?.icon}.svg`" mode="widthFix" />
        </view>
        <view class="label"> {{ i?.label }} </view>
      </view>
    </view>

    <view class="membership_benefits">
      <up-divider text="会员停车权益说明"></up-divider>
      <view class="membership_benefits_content">
        <view> 1、普卡会员任意消费并积分可免停1小时，当日限免1次; </view>
        <view> 2、金卡会员任意消费并积分可免停2小时，当日限免1次 </view>
        <view> 3、铂金卡会员当日可免停3小时，当日限免1次 </view>
        <view> 4、黑金卡会员当日免费停车，单次限免8小时 </view>
        <view> ※以上权益每天每个会员账号单日内全集团门店限享1次</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'
import { getStyleBgInfo } from '@/common/libraries/getPageConfig'
const jinGangQu = [
  { label: '缴费记录', icon: 'calendar', url: '/INDEX/parking_payment_record/index' },
  { label: '我的车辆', icon: 'car', url: '/ME/vehicle_management/list/index' },
  { label: '开具发票', icon: 'red-packet', url: '/ME/issue_invoice/index' }
]

const licensePlateNumber = ref(['粤', 'B', 'F', 'R', '2', '3', '2', '3'])
const licensePlateNumberValue = ref('粤BFR2323')
const isFocus = ref(false)
const ketMode = ref('car')
const showKeyboard = ref(false)

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 toPage = (url: string) => {
  uni.navigateTo({ url })
}

const handleQueryClick = () => {
  if (licensePlateNumberValue?.value?.length < 7) {
    uni.showToast({
      title: '请输入完整的车牌号！',
      icon: 'none'
    })
    return
  }
  uni.navigateTo({
    url: '/ME/parking_fee/index'
  })
  // uni.showToast({
  //   title: '未查询到停车费！',
  //   icon: 'none'
  // })
}
</script>

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