<script lang="ts" setup>
import { scanCode } from '@/utils/tools'

definePage({
  style: {
    navigationBarTitleText: '绑定头盔',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})

const formData = reactive({
  bikeCode: '',
  helmetCode: '',
})
const btnConfig = reactive({
  loading: false,
  loadingText: '提交中...',
})
const orderDetail = ref<any>({

})

function handleHelmetScan() {
  scanCode({
    success: (res: any) => {
      formData.helmetCode = res.code
    },
    fail: () => {
      uni.showToast({
        title: '扫码失败',
        icon: 'none',
      })
    },
  })
}

function handleScan() {
  scanCode({
    success: (res: any) => {
      formData.bikeCode = res.code
    },
    fail: () => {
      uni.showToast({
        title: '扫码失败',
        icon: 'none',
      })
    },
  })
}

// 确定绑定
async function handleComplete() {
}
</script>

<template>
  <z-paging
    ref="paging"
    bg-color="#f3f3f3"
  >
    <view class="y_card_wrapper">
      <view class="card_box">
        <!-- 车辆编号 -->
        <view class="card_row">
          <view class="card_row_key">
            车辆编号
          </view>
          <view class="card_row_value">
            <uv-input v-model="formData.bikeCode" border="none" placeholder="请输入">
              <template #suffix>
                <uv-icon name="scan" color="#2979ff" size="28" @click="handleScan" />
              </template>
            </uv-input>
          </view>
        </view>
        <!-- 原头盔编号 -->
        <view class="card_row">
          <view class="card_row_key">
            原头盔编号
          </view>
          <view class="card_row_value">
            {{ orderDetail.soc || 0 }}%
          </view>
        </view>
        <!-- 头盔在位 -->
        <view class="card_row">
          <view class="card_row_key">
            头盔在位
          </view>
          <view class="card_row_value">
            {{ orderDetail.soc || 0 }}%
          </view>
        </view>
        <!-- 更新时间 -->
        <view class="card_row">
          <view class="card_row_key">
            更新时间
          </view>
          <view class="card_row_value">
            {{ orderDetail.soc || 0 }}%
          </view>
        </view>
        <!-- 更新时间 -->
        <view class="card_row" style="border:none ;">
          <view style="width: 100%;">
            <uv-button
              type="primary"
              text="刷新"
              :loading="btnConfig.loading"
              :loading-text="btnConfig.loadingText"
              @click="handleComplete"
            />
          </view>
        </view>
      </view>

      <view class="card_box" style="margin-top: 40rpx;">
        <!-- 头盔编号 -->
        <view class="card_row">
          <view class="card_row_key">
            头盔编号
          </view>
          <view class="card_row_value">
            <uv-input v-model="formData.helmetCode" border="none" placeholder="请输入">
              <template #suffix>
                <uv-icon name="scan" color="#2979ff" size="28" @click="handleHelmetScan" />
              </template>
            </uv-input>
          </view>
        </view>
      </view>
    </view>

    <template #bottom>
      <view class="bottom-button-zaping">
        <uv-button
          type="primary"
          text="确定绑定"
          :loading="btnConfig.loading"
          :loading-text="btnConfig.loadingText"
          @click="handleComplete"
        />
      </view>
    </template>
  </z-paging>
</template>

<style lang="scss" scoped>
//
</style>
