<template>
  <view class="audit-btn-wrapper">
    <button class="btn-1" @click="lookingCar">寻车铃</button>
    <button class="btn-2" @click="handleAudit">接单审核</button>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { checkEcuBells } from "@/utils/commonApi";
import navigator from "@/utils/navigator.js";

const props = defineProps({
  // 寻车铃参数
  bellParams: {
    type: Object,
    default: () => {},
  },
  // 电动车ID
  bikeCode: {
    type: String,
    default: "",
  },
});
const bellParams = ref({
  ecuId: "",
  bikeId: "",
});
const bikeCode = ref("");

const lookingCar = () => {
  console.log(bellParams.value);
  checkEcuBells(bellParams.value);
};

const handleAudit = () => {
  console.log("接单审核", bikeCode.value);
  if(!bikeCode.value) return
  navigator.to("/pages/warehouse/UserReportedFaults/UserReportedFaults", {
    bikeCode: bikeCode.value,
  });
};

watch(
  () => props.bellParams,
  (newVal) => {
    bellParams.value = newVal;
  },
  { deep: true }
);
watch(
  () => props.bikeCode,
  (newVal) => {
    bikeCode.value = newVal;
  },{immediate: true}
);
</script>

<style scoped lang="scss">
.audit-btn-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
}

.btn-1 {
  width: 30%;
  font-size: 28rpx;
  background-color: #eeeeee;
  color: #818181;

  &:active {
    background-color: #eeeeee93;
  }
}

.btn-2 {
  width: 60%;
  background-color: #1082ff;
  color: white;
  font-size: 28rpx;
  &:active {
    background-color: #1084ffaa;
  }
}
</style>
