<script lang="ts" setup>
import { acceptWorkOrderAPI, queryWorkOrderDetailAPI } from '@/api/work'
import { useAppStore } from '@/store'
import { translateErrorCode } from '@/utils/tools'

definePage({
  style: {
    navigationBarTitleText: '订单详情',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})

const appStore = useAppStore()
const paging = ref<any>(null)
const workOrderDetail = ref<any>({
  ecuSn: '',
  bikeCode: '',
  createdAt: '',
  soc: 0,
  location: {
    latitude: 0,
    longitude: 0,
  },
  parts: [], // 故障类型
  orderType: -1,
})

const btnConfig = reactive({
  loading: false,
  loadingText: '提交中...',
})

function findCar() {
  const params = {
    elng: workOrderDetail.value.location.longitude,
    elat: workOrderDetail.value.location.latitude,
  }
  uni.navigateTo({
    url: `/pages-sub/map/findCar/findCar?params=${encodeURIComponent(JSON.stringify(params))}`,
  })
}

async function queryWorkOrderDetail(orderId: string) {
  uni.showLoading({
    title: '加载中...',
  })
  try {
    const res = await queryWorkOrderDetailAPI(orderId)
    uni.hideLoading()
    if (res) {
      workOrderDetail.value = res
    }
  }
  catch (e) {
    uni.hideLoading()
    console.error(e)
  }
}

async function acceptWorkOrder() {
  btnConfig.loading = true
  try {
    const res = await acceptWorkOrderAPI(workOrderDetail.value.orderId)
    btnConfig.loading = false
    uni.showToast({
      title: '接单成功',
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }
  catch (e) {
    btnConfig.loading = false
    console.error(e)
  }
}

onLoad((query) => {
  const { orderId } = query
  queryWorkOrderDetail(orderId)
})
</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">
            {{ appStore.translateDictValue(workOrderDetail.orderType, 'orderType') || '--' }}
          </view>
        </view>
        <!-- 车辆编号 -->
        <view class="card_row">
          <view class="card_row_key">
            车辆编号
          </view>
          <view class="card_row_value">
            {{ workOrderDetail.bikeCode || '--' }}
          </view>
        </view>
        <!-- 创建时间 -->
        <view class="card_row">
          <view class="card_row_key">
            创建时间
          </view>
          <view class="card_row_value">
            {{ workOrderDetail.createdAt || '--' }}
          </view>
        </view>
        <!-- 电池电量 -->
        <view class="card_row">
          <view class="card_row_key">
            电池电量
          </view>
          <view class="card_row_value">
            {{ workOrderDetail.soc || 0 }}%
          </view>
        </view>
        <!-- 车辆位置 -->
        <view class="card_row">
          <view class="card_row_key">
            车辆位置
          </view>
          <view class="card_row_value_two" @click="findCar">
            <view>查看地图</view>
            <view class="card_row_small_text">
              {{ workOrderDetail.location.longitude || '-' }},{{ workOrderDetail.location.latitude || '-' }}
            </view>
          </view>
          <view class="card_row_link">
            <uv-icon name="arrow-right" />
          </view>
        </view>
        <!-- 信号强度 -->
        <view v-if="workOrderDetail.orderType === 1 || workOrderDetail.orderType === 4" class="card_row">
          <view class="card_row_key">
            故障部位
          </view>
          <view class="card_row_value">
            {{ translateErrorCode(workOrderDetail.parts, 'inventory_type') }}
          </view>
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="bottom-button-zaping">
        <uv-button
          type="primary"
          text="接单"
          :loading="btnConfig.loading"
          :loading-text="btnConfig.loadingText"
          @click="acceptWorkOrder"
        />
      </view>
    </template>

  <!-- 弹窗 -->
  </z-paging>
</template>

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