<script lang="ts" setup>
import { executeCommandAPI } from '@/api/centerControl'

const props = defineProps({
  bikeCode: {
    type: String,
    default: '',
  },
})
const code = ref<string>('')

const toolsList = ref<any>([
  {
    title: '响铃',
    key: 'FIND_BIKE',
    icon: 'yinlianglabashengyin',
    type: 'instruct',
    iconSize: '24',
  },
  {
    title: '开锁',
    key: 'UNLOCK',
    icon: '24gf-unlock2',
    type: 'instruct',
    iconSize: '24',
  },
  {
    title: '关锁',
    key: 'LOCK',
    icon: 'guansuo',
    type: 'instruct',
    iconSize: '24',
  },
  {
    title: '开电池仓',
    key: 'OPEN_BATTERY_LOCK',
    icon: '24gf-unlock2',
    type: 'instruct',
    iconSize: '24',
  },
  {
    title: '关电池仓',
    key: 'CLOSE_BATTERY_LOCK',
    icon: 'guansuo',
    type: 'instruct',
    iconSize: '24',
  },
  {
    title: '开头盔锁',
    key: 'OPEN_HELMET',
    icon: 'dakaitoukuisuo',
    type: 'instruct',
    iconSize: '24',
  },
  {
    title: '故障上报',
    key: 'guzhangshangbao',
    icon: 'guzhangshangbao',
    type: 'order',
    iconSize: '24',
    url: '/pages-sub/warehouse/faultReporting/faultReporting',
  },
  {
    title: '维修',
    key: 'weixiu',
    icon: 'weixiu',
    type: 'order',
    iconSize: '24',
    url: '/pages-sub/work/inspectionWorkOrder/inspectionWorkOrder',
  },
  {
    title: '换电',
    key: 'change',
    icon: 'dianchigenghuan',
    type: 'order',
    iconSize: '26',
    url: '/pages-sub/changebatteries/changebatteries',
  },
  {
    title: '巡检',
    key: 'change',
    icon: 'dianchigenghuan',
    type: 'order',
    iconSize: '26',
  },
  {
    title: '调度',
    key: 'yingjitiaodu',
    icon: 'yingjitiaodu',
    type: 'order',
    iconSize: '26',
  },
])

// 点击
function onClickItem(item: any) {
  console.log(item)
  if (item.type === 'instruct') {
    handleInstruct(item)
  }
  if (item.type === 'order') {
    handleOrder(item)
  }
}

// 执行指令
async function handleInstruct(item: any) {
  if (!code.value) {
    console.error('请输入电池编号')
    return uni.showToast({
      title: '指令异常',
      icon: 'none',
    })
  }
  uni.showLoading({
    title: '执行指令中...',
  })

  try {
    const result: boolean = await executeCommandAPI({
      bikeCode: code.value,
      commandCode: item.key,
    })
    if (result) {
      uni.showToast({
        title: '已执行',
        icon: 'success',
      })
    }
    else {
      uni.showToast({
        title: '执行失败',
        icon: 'error',
      })
    }
  }
  catch (e) {
    uni.showToast({
      title: '执行异常',
      icon: 'error',
    })
  }
  finally {
    uni.hideLoading()
  }
}

// 跳转页面
function handleOrder(item: any) {
  if (!item.url) {
    return console.error('无跳转地址')
  }
  console.log(`${item.url}?bikeCode=${code.value}`)

  setTimeout(() => {
    uni.navigateTo({
      url: `${item.url}?bikeCode=${code.value}`,
    })
  }, 100)
}

watch(() => props.bikeCode, (val) => {
  code.value = val
})
</script>

<template>
  <view class="container">
    <view class="icon-container">
      <view
        v-for="(item) in toolsList"
        :key="item.key"
        class="icon-item"
        @click="onClickItem(item)"
      >
        <view class="icon">
          <uv-icon
            :name="item.icon"
            custom-prefix="custom-icon"
            :size="item.iconSize"
          />
        </view>
        <view class="text">
          {{ item.title }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: calc(100% - 50rpx);
  padding: 0 25rpx;

  .icon-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 20rpx; /* 图标之间的间距 */
    padding: 20rpx;

    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: calc(20% - 16rpx); /* 5列均分，减去间距 */
      text-align: center;
      margin-bottom: 20rpx;

      .icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .text {
        margin-top: 8rpx;
        font-size: 28rpx;
        color: #626262;
      }
    }
  }
}
</style>
