<script lang="ts" setup>
import { checkSnOrBikeCodeAPI } from '@/api/centerControl'
import { useCenterControlStore } from '@/store'
import { scanCode } from '@/utils/tools'

const store = useCenterControlStore()
const code = ref('')
const btnLoading = ref(false)

function handleType() {
  code.value = ''
  store.setCode(store.codeType === 'car' ? 'sn' : 'car', code.value)
  store.setOnline(-1)
}

// 扫码
function handleScan() {
  scanCode({
    isSN: store.codeType === 'sn',
    success: (res: any) => {
      console.log(res)
    },
    fail: () => {
      uni.showToast({
        title: '扫码失败',
        icon: 'none',
      })
    },
  })
}

function handleInput(val: string) {
  store.setCode(store.codeType, val)
  store.setOnline(-1)
}

// 连接
async function handleConnect() {
  if (!code.value) {
    uni.showToast({
      title: '请输入或扫描编号',
      icon: 'none',
    })
    return
  }

  btnLoading.value = true
  try {
    const isOnline = await checkSnOrBikeCodeAPI(store.queryByBike)
    isOnline ? store.setOnline(1) : store.setOnline(0)
    btnLoading.value = false
  }
  catch (e) {
    console.error('连接----->', e)
    btnLoading.value = false
  }
}

watch(() => store.queryByBike, (newVal) => {
  console.log('queryByBike', newVal)
  if (newVal.bikeCode) {
    return code.value = newVal.bikeCode
  }
  if (newVal.ecuSn) {
    return code.value = newVal.ecuSn
  }
}, { immediate: true, deep: true })
</script>

<template>
  <view class="main">
    <view class="search">
      <uv-button plain style="margin-right: 25rpx;" @click="handleType">
        <uv-icon
          name="jiantou_shangxiaqiehuan"
          custom-prefix="custom-icon"
          size="20"
        />
        <text>{{ store.codeType === 'car' ? '车辆编号' : "中控SN" }}</text>
      </uv-button>
      <uv-input
        v-model="code"
        placeholder="请输入或扫码"
        style="width: 100%;"
        @input="handleInput"
      >
        <template #suffix>
          <uv-icon name="scan" size="22" @click="handleScan" />
        </template>
      </uv-input>
    </view>
    <view class="online">
      <view>
        <text style="color: #6a6a6a;">设备在线状态：{{ store.isOnline ? '' : '' }}</text>
        <text
          :style="{
            color: store.isOnline === 1 ? '#00c7c7' : store.isOnline === 0 ? '#ff0000' : '',
          }"
        >
          {{ store.isOnline === 1 ? '在线' : store.isOnline === 0 ? '离线' : '未连接' }}
        </text>
      </view>
      <uv-button
        type="primary"
        text="连接"
        :loading="btnLoading"
        loading-text="连接中"
        :custom-style="{
          height: '35px',
          fontSize: '24rpx',
        }"
        @click="handleConnect"
      />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.main {
  width: calc(100% - 80rpx);
  padding: 20rpx 40rpx;
  background-color: white;
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

  .search {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .online {
    margin-top: 50rpx;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
