<script lang="ts" setup>
import { changeBindEbikeAPI, getEbikeDetailForWorkAPI, getEbikeInfoByEcuSnAPI } from '@/api/operator'
import { scanCode } from '@/utils/tools'

definePage({
  style: {
    navigationBarTitleText: '更换中控',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})

const paging = ref(null)
const btnConfig = reactive({
  loading: false,
  loadingText: '提交中...',
})
const carDetails = ref<any>({
  ecuSn: undefined,
  location: {
    longitude: undefined,
    latitude: undefined,
  },
  voltage: undefined,
})
const formData = ref({
  bikeCode: '',
  remark: '',
  ecuSn: '',
})
const centerControlDetail = ref<any>({})

// 车辆编号扫码
function handleScanByCarCode() {
  scanCode({
    success: (res: any) => {
      formData.value.bikeCode = res.code
      getEbikeDetailForWork()
    },
    fail: () => {
      uni.showToast({
        title: '扫码失败',
        icon: 'none',
      })
    },
  })
}

function handleScanByCenterCode() {
  scanCode({
    isSN: true,
    success: (res: any) => {
      const { SN } = res
      if (!SN) {
        uni.showToast({
          title: '解析失败',
          icon: 'error',
        })
        return
      }
      formData.value.ecuSn = SN
      getEbikeInfoByEcuSn()
    },
    fail: () => {
      uni.showToast({
        title: '扫码失败',
        icon: 'error',
      })
    },
  })
}

async function getEbikeDetailForWork() {
  uni.showLoading({
    title: '加载中...',
  })
  try {
    const res = await getEbikeDetailForWorkAPI(formData.value.bikeCode)
    if (res) {
      carDetails.value = res
    }
  }
  catch (e) {
    console.error(e)
  }
  finally {
    uni.hideLoading()
  }
}

async function getEbikeInfoByEcuSn() {
  try {
    const res = await getEbikeInfoByEcuSnAPI({ ecuSn: formData.value.ecuSn })
    if (res) {
      centerControlDetail.value = res
    }
  }
  catch (e) {
    console.error(e)
    formData.value.ecuSn = ''
    centerControlDetail.value = {}
  }
}

// 提交更换中控
async function handleChange() {
  if (!formData.value.bikeCode) {
    uni.showToast({
      title: '请输入车辆编号',
      icon: 'none',
    })
    return
  }

  if (!formData.value.ecuSn) {
    uni.showToast({
      title: '请输入中控编号',
      icon: 'none',
    })
    return
  }

  uni.showLoading({
    title: '提交中...',
  })
  try {
    const res = await changeBindEbikeAPI({
      bikeCode: formData.value.bikeCode,
      ecuSn: formData.value.ecuSn,
    })
    uni.showToast({
      title: '已换绑',
      icon: 'success',
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 800)
  }
  catch (e) {
    console.error(e)
  }
  finally {
    uni.hideLoading()
  }
}
</script>

<template>
  <z-paging
    ref="paging"
    bg-color="#f3f3f3"
  >
    <view class="y_card_wrapper">
      <!-- 车辆原中控 -->
      <view class="title">
        车辆原中控
      </view>
      <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="handleScanByCarCode" />
              </template>
            </uv-input>
          </view>
        </view>
        <!-- 中控编号 -->
        <view class="card_row">
          <view class="card_row_key">
            中控编号
          </view>
          <view class="card_row_value">
            {{ carDetails.ecuSn || '--' }}
          </view>
        </view>
        <!-- 设备状态 -->
        <view class="card_row">
          <view class="card_row_key">
            设备状态
          </view>
          <view class="card_row_value">
            {{ carDetails?.online ? '在线' : formData.bikeCode ? '离线' : '--' }}
          </view>
        </view>
        <!-- 电压 -->
        <view class="card_row">
          <view class="card_row_key">
            电压
          </view>
          <view class="card_row_value">
            {{ carDetails.voltage || '--' }} V
          </view>
        </view>
        <!-- 坐标 -->
        <view class="card_row">
          <view class="card_row_key">
            坐标
          </view>
          <view class="card_row_value">
            {{ carDetails?.location?.longitude || '--' }},{{ carDetails?.location?.latitude || '--' }}
          </view>
        </view>
        <!-- 定位时间(最后一次上报时间) -->
        <view class="card_row">
          <view class="card_row_key">
            定位时间
          </view>
          <view class="card_row_value">
            {{ carDetails.latestTime || '--' }}
          </view>
        </view>
      </view>

      <!-- 车辆原中控 -->
      <view class="card_box" style="margin-top: 30rpx;">
        <uv-textarea v-model="formData.remark" placeholder="请输入更换原因" border="none" />
      </view>

      <!-- 更换中控 -->
      <view class="title" style="margin-top: 30rpx;">
        更换中控
      </view>
      <view class="card_box">
        <!-- 中控编号 -->
        <view class="card_row">
          <view class="card_row_key">
            中控编号
          </view>
          <view class="card_row_value">
            <uv-input v-model="formData.ecuSn" border="none" placeholder="请扫描或输入中控编号">
              <template #suffix>
                <uv-icon name="scan" color="#2979ff" size="28" @click="handleScanByCenterCode" />
              </template>
            </uv-input>
          </view>
        </view>
        <!-- 设备状态 -->
        <view class="card_row">
          <view class="card_row_key">
            设备状态
          </view>
          <view class="card_row_value">
            {{ centerControlDetail?.online ? '在线' : formData.ecuSn ? '离线' : '--' }}
          </view>
        </view>
        <!-- 电压 -->
        <view class="card_row">
          <view class="card_row_key">
            电压
          </view>
          <view class="card_row_value">
            {{ centerControlDetail?.voltage || '--' }} V
          </view>
        </view>
        <!-- 坐标 -->
        <view class="card_row">
          <view class="card_row_key">
            坐标
          </view>
          <view class="card_row_value">
            {{ centerControlDetail?.location?.longitude || '--' }},{{ centerControlDetail?.location?.latitude || '--' }}
          </view>
        </view>
        <!-- 定位时间(最后一次上报时间) -->
        <view class="card_row">
          <view class="card_row_key">
            定位时间
          </view>
          <view class="card_row_value">
            {{ centerControlDetail?.latestTime || '--' }}
          </view>
        </view>
      </view>
    </view>

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

<style lang="scss" scoped>
.title {
  font-size: 32rpx;
  margin-bottom: 30rpx;
}
</style>
