<template>
  <view class="container">
    <scroll-view class="scrollWrap" scroll-x="true" scroll-with-animation>
      <view
        v-for="(item, index) in changeList"
        class="scrollItem"
        style="width: 22%"
        :class="{ active: tabIndex == index }"
        :data-current="tabIndex"
        @click="sendTabItem(item, index)"
        :key="index"
      >
        {{ item.title }}
      </view>
    </scroll-view>
    <view v-show="tabIndex === 0">
      <scroll-view scroll-y="true" style="height: 95vh">
        <uni-card title="设备时间">
          <uni-forms>
            <uni-forms-item label="最近定位时间">
              <view class="deepBlackBoldText">
                {{ equipmentTime.latestOrientationTime }}
              </view>
            </uni-forms-item>
            <uni-forms-item label="最新上线时间">
              <view class="deepBlackBoldText">
                {{ equipmentTime.latestOnlineTime }}
              </view>
            </uni-forms-item>
            <uni-forms-item label="电量更新时间">
              <view class="deepBlackBoldText">
                {{ equipmentTime.batteryRenewalTime }}
              </view>
            </uni-forms-item>
            <uni-forms-item label="最新巡检时间">
              <view class="deepBlackBoldText">
                {{ equipmentTime.latestInspectionTime }}
              </view>
            </uni-forms-item>
            <uni-forms-item label="最新调度时间">
              <view class="deepBlackBoldText">
                {{ equipmentTime.latestDispatchTime }}
              </view>
            </uni-forms-item>
          </uni-forms>
        </uni-card>
        <uni-card title="设备状态">
          <uni-forms>
            <view class="flex justify-start">
              <uni-forms-item label="电池电量" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.soc }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="轮锁状态" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.wheelLocked }}
                </view>
              </uni-forms-item>
            </view>
            <view class="flex justify-start">
              <uni-forms-item label="电压" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.voltage }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="轮动状态" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.isWheelSpin }}
                </view>
              </uni-forms-item>
            </view>
            <view class="flex justify-start">
              <uni-forms-item label="速度" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.speed }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="运动状态" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.isMoving }}
                </view>
              </uni-forms-item>
            </view>
            <view class="flex justify-start">
              <uni-forms-item label="网络信号" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.gsm }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="电池仓状态" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.seatLocked }}
                </view>
              </uni-forms-item>
            </view>
            <view class="flex justify-start">
              <uni-forms-item label="在线状态" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.online }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="头盔锁状态" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.isHelmetLocked }}
                </view>
              </uni-forms-item>
            </view>
            <view class="flex justify-start">
              <uni-forms-item label="投放状态" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.dropMode }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="头盔在位" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.helmetExit }}
                </view>
              </uni-forms-item>
            </view>
            <view class="flex justify-start">
              <uni-forms-item label="电门开关" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.accOn }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="车辆姿态" class="with50">
                <view class="lengthwz">
                  {{ equipmentState.bikeAttitude }}
                </view>
              </uni-forms-item>
            </view>
            <uni-forms-item label="扫码失败次数">
              <view class="lengthwz">
                {{ equipmentState.scanTheCodeLoseCount }}
              </view>
            </uni-forms-item>
            <uni-forms-item label="所处站点">
              <view class="lengthwz">
                {{ equipmentState.position }}
              </view>
            </uni-forms-item>
          </uni-forms>
        </uni-card>
        <uni-card title="运营信息">
          <uni-forms>
            <uni-forms-item label="车辆编号">
              <view class="flex justify-between">
                <view class="deepBlackBoldText">
                  {{ operateInfo.bikeCode }}
                </view>
                <view
                  v-if="operateInfo.bikeCode"
                  @click="copyOrderCode(operateInfo.bikeCode)"
                >
                  <text
                    style="font-size: 18px; color: orange"
                    class="cuIcon-copy"
                  ></text>
                </view>
              </view>
            </uni-forms-item>
            <uni-forms-item label="IMEI">
              <view class="flex justify-between">
                <view class="deepBlackBoldText">
                  {{ operateInfo.imei }}
                </view>
                <view
                  v-if="operateInfo.imei"
                  @click="copyOrderCode(operateInfo.imei)"
                >
                  <text
                    style="font-size: 18px; color: orange"
                    class="cuIcon-copy"
                  ></text>
                </view>
              </view>
            </uni-forms-item>
            <uni-forms-item label="设备SN">
              <view class="flex justify-between">
                <view class="deepBlackBoldText">
                  {{ operateInfo.sn }}
                </view>
                <view
                  v-if="operateInfo.sn"
                  @click="copyOrderCode(operateInfo.sn)"
                >
                  <text
                    style="font-size: 18px; color: orange"
                    class="cuIcon-copy"
                  ></text>
                </view>
              </view>
            </uni-forms-item>
            <uni-forms-item label="车牌号">
              <view class="flex justify-between">
                <view class="deepBlackBoldText">
                  {{ operateInfo.bikeNumber }}
                </view>
                <view
                  v-if="operateInfo.bikeNumber"
                  @click="copyOrderCode(operateInfo.bikeNumber)"
                >
                  <text
                    style="font-size: 18px; color: orange"
                    class="cuIcon-copy"
                  ></text>
                </view>
              </view>
            </uni-forms-item>
            <uni-forms-item label="车辆型号">
              <view class="deepBlackBoldText">
                {{ operateInfo.bikeModel }}
              </view>
            </uni-forms-item>
          </uni-forms>
        </uni-card>
      </scroll-view>
    </view>

    <view v-show="tabIndex === 1">
      <view class="divmap">
        <map-location
          height="500px"
          :lng="104.06476"
          :lat="30.5702"
          iconPath="/static/map/eCard_icon.png"
        />
      </view>
      <you-touchbox
        initTop="500"
        :disable="isTouchDisable"
        minTop="220"
        maxTop="5"
        @get-end-detail="getEndDetail"
      >
        <scroll-view
          class="scroll-container"
          :scroll-y="isScrollY"
          style="height: 95vh"
        >
          <uni-card title="最后定位">
            <uni-forms>
              <uni-forms-item label="最后定位时间">
                <view class="deepBlackBoldText">
                  {{ latestOrientation.latestOrientationTime }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="ACC状态">
                <view class="deepBlackBoldText">
                  {{ latestOrientation.accState }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="设防状态">
                <view class="deepBlackBoldText">
                  {{ latestOrientation.fortification }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="电池电量">
                <view class="deepBlackBoldText">
                  {{ latestOrientation.soc }}
                </view>
              </uni-forms-item>
            </uni-forms>
          </uni-card>
          <uni-card title="最后扫码点">
            <uni-forms>
              <uni-forms-item label="最后扫码时间">
                <view class="deepBlackBoldText">
                  {{ latestScanPoint.latestScanTime }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="扫码地点">
                <view class="deepBlackBoldText">
                  {{ latestScanPoint.scanPosition }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="用户名">
                <view class="deepBlackBoldText">
                  {{ maskUserName(latestScanPoint.userName) }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="手机号">
                <view class="flex justify-between">
                  <view class="deepBlackBoldText">
                    {{ maskPhoneNumber(latestScanPoint.phoneNumber) }}
                  </view>
                  <view
                    v-if="latestScanPoint.phoneNumber"
                    @click="makeACall(latestScanPoint.phoneNumber)"
                  >
                    <text
                      style="font-size: 18px; color: orange"
                      class="cuIcon-phone"
                    ></text>
                  </view>
                </view>
              </uni-forms-item>
            </uni-forms>
          </uni-card>
          <uni-card title="最后还车点">
            <uni-forms>
              <uni-forms-item label="最后还车时间">
                <view class="deepBlackBoldText">
                  {{ latestDropOffpoint.latestDropOffAt }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="用户坐标">
                <view class="deepBlackBoldText">
                  {{ latestDropOffpoint.userCoordinate }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="车辆坐标">
                <view class="deepBlackBoldText">
                  {{ latestDropOffpoint.vehicleCoordinate }}
                </view>
              </uni-forms-item>
            </uni-forms>
          </uni-card>
          <uni-card title="最后轨迹">
            <uni-forms>
              <uni-forms-item label="起点时间">
                <view class="deepBlackBoldText">
                  {{ finalTrajectory.startingPointAt }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="起点地点">
                <view class="deepBlackBoldText">
                  {{ finalTrajectory.startingPointPosition }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="终点时间">
                <view class="deepBlackBoldText">
                  {{ finalTrajectory.endPointAt }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="终点地址">
                <view class="deepBlackBoldText">
                  {{ finalTrajectory.endPointPosition }}
                </view>
              </uni-forms-item>
            </uni-forms>
          </uni-card>
        </scroll-view>
      </you-touchbox>
    </view>

    <view v-show="tabIndex === 2">
      <z-paging
        :fixed="false"
        :height="scrollHeight + 29 + 'px'"
        ref="instructionRecordList"
        v-model="instructionRecord"
        @query="loadMoreDataInstructionRecord"
        :default-page-no="1"
        :default-page-size="10"
        :auto-show-back-to-top="true"
      >
        <view v-for="(item, index) in instructionRecord" :key="index">
          <uni-card>
            <template v-slot:title>
              <view class="flex justify-between cardtitle">
                <view class="flex align-center">
                  <view class="cardtitleri">
                    {{ item.com }}
                  </view>
                  <view style="margin-left: 10px">
                    <view
                      v-if="item.operateResult == '执行成功'"
                      class="cu-tag radius line-green"
                      style="background-color: rgba(203, 240, 204, 0.4)"
                      >{{ item.operateResult }}
                    </view>
                    <view
                      v-else-if="item.operateResult == '执行失败'"
                      class="cu-tag radius line-red"
                      style="background-color: rgba(247, 152, 152, 0.4)"
                      >{{ item.operateResult }}
                    </view>
                  </view>
                </view>
              </view>
            </template>
            <uni-forms>
              <uni-forms-item label="创建时间">
                <view class="deepBlackBoldText">
                  {{ item.createdAt }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="执行时间">
                <view class="deepBlackBoldText">
                  {{ item.operateTime }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="来源类型">
                <view class="deepBlackBoldText">
                  {{ item.resourceType }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="用户名称">
                <view class="deepBlackBoldText">
                  {{
                    item.resourceType == "用户端"
                      ? maskUserName(item.operateUserName)
                      : item.operateUserName
                  }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="手机号码">
                <view class="flex justify-between">
                  <view class="deepBlackBoldText">
                    {{
                      item.resourceType == "管理平台"
                        ? item.phoneNumber
                        : maskPhoneNumber(item.phoneNumber)
                    }}
                  </view>
                  <view @click="makeACall(item.phoneNumber)">
                    <text
                      style="font-size: 18px; color: orange"
                      class="cuIcon-phone"
                    ></text>
                  </view>
                </view>
              </uni-forms-item>
            </uni-forms>
          </uni-card>
        </view>
      </z-paging>
    </view>

    <view v-show="tabIndex === 3">
      <view class="divmap">
        <map-location height="500px" :lng="104.117262" :lat="30.598726" />
      </view>
      <you-touchbox
        initTop="500"
        minTop="220"
        maxTop="5"
        @get-end-detail="getEndDetail"
        style="border-radius: 15px !important; background-color: #f3f4f6"
      >
        <z-paging
          :scrollable="isScrollY"
          :fixed="false"
          height="95vh"
          :refresher-enabled="false"
          ref="sacnRecord"
          v-model="sacnRecordList"
          @query="loadMoreDatasacnRecordList"
          :default-page-no="1"
          :default-page-size="10"
          :auto-show-back-to-top="true"
        >
          <view v-for="(item, index) in sacnRecordList" :key="index">
            <uni-card>
              <uni-forms>
                <uni-forms-item label="扫码时间">
                  <view class="deepBlackBoldText">
                    {{ item.faultDescription }}
                  </view>
                </uni-forms-item>
                <uni-forms-item label="扫码地址">
                  <view class="flex justify-between">
                    <view class="deepBlackBoldText">
                      {{ item.receiverName }}
                    </view>
                    <view @click="wakeUpMap(item.receiverName)">
                      <uni-icons
                        type="paperplane"
                        color="orange"
                        size="18"
                      ></uni-icons>
                    </view>
                  </view>
                </uni-forms-item>
                <uni-forms-item label="扫码人">
                  <view class="deepBlackBoldText">
                    {{ maskUserName(item.handleResult) }}
                  </view>
                </uni-forms-item>
                <uni-forms-item label="手机号码">
                  <view class="flex justify-between">
                    <view class="deepBlackBoldText">
                      {{ maskPhoneNumber(item.phoneNumber) }}
                    </view>
                    <view @click="makeACall(item.phoneNumber)">
                      <text
                        style="font-size: 18px; color: orange"
                        class="cuIcon-phone"
                      ></text>
                    </view>
                  </view>
                </uni-forms-item>
              </uni-forms>
            </uni-card>
          </view>
        </z-paging>
      </you-touchbox>
    </view>

    <view v-show="tabIndex === 4">
      <z-paging
        :fixed="false"
        :height="scrollHeight + 29 + 'px'"
        ref="orderRecordList"
        v-model="orderRecord"
        @query="loadMoreDataOrderRecord"
        :default-page-no="1"
        :default-page-size="10"
        :auto-show-back-to-top="true"
      >
        <view v-for="(item, index) in orderRecord" :key="index">
          <uni-card @click="viewWorkOrderInfo(item)">
            <template v-slot:title>
              <view
                @click="viewWorkOrderInfo(item)"
                class="flex justify-between cardtitle"
              >
                <view class="flex align-center">
                  <view class="cardtitleri">
                    {{ item.orderType }}
                  </view>
                  <view style="margin-left: 10px">
                    <view
                      v-if="item.handleState == '已完成'"
                      class="cu-tag radius line-green"
                      style="background-color: rgba(203, 240, 204, 0.4)"
                      >{{ item.handleState }}</view
                    >
                    <view
                      v-else-if="item.handleState == '未完成'"
                      class="cu-tag radius line-red"
                      style="background-color: rgba(247, 152, 152, 0.4)"
                      >{{ item.handleState }}</view
                    >
                    <view
                      v-else-if="item.handleState == '已取消'"
                      class="cu-tag radius line-grey"
                      style="background-color: #9c9c9c30"
                      >{{ item.handleState }}</view
                    >
                  </view>
                </view>
                <view>
                  <uni-icons type="right" size="20"></uni-icons>
                </view>
              </view>
            </template>
            <uni-forms>
              <uni-forms-item label="工单编号">
                <view class="flex justify-between">
                  <view class="deepBlackBoldText">
                    {{ item.orderCode }}
                  </view>
                  <view @click="copyOrderCode(item.orderCode)">
                    <text
                      style="font-size: 18px; color: orange"
                      class="cuIcon-copy"
                    ></text>
                  </view>
                </view>
              </uni-forms-item>
              <uni-forms-item label="开始时间">
                <view class="deepBlackBoldText">
                  {{ item.createdAt }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="结束时间">
                <view class="deepBlackBoldText">
                  {{ item.handleAt || "-" }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="运维人员">
                <view class="deepBlackBoldText">
                  {{ item.receiver || "-" }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="手机号码">
                <view class="flex justify-between">
                  <view class="deepBlackBoldText">
                    {{ item.phoneNumber || "-" }}
                  </view>
                  <view @click="makeACall(item.phoneNumber)">
                    <text
                      style="font-size: 18px; color: orange"
                      class="cuIcon-phone"
                    ></text>
                  </view>
                </view>
              </uni-forms-item>
            </uni-forms>
          </uni-card>
        </view>
      </z-paging>
    </view>

    <view v-show="tabIndex === 5">
      <z-paging
        :fixed="false"
        :height="scrollHeight + 29 + 'px'"
        ref="orderTrajectoryList"
        v-model="orderTrajectory"
        @query="loadMoreDataOrderTrajectory"
        :default-page-no="1"
        :default-page-size="10"
        :auto-show-back-to-top="true"
      >
        <view v-for="(item, index) in orderTrajectory" :key="index">
          <uni-card :title="'订单编号：' + item.orderId">
            <uni-forms>
              <uni-forms-item label="用户名称">
                <view class="deepBlackBoldText">
                  {{ maskUserName(item.userName) }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="手机号码">
                <view class="flex justify-between">
                  <view class="deepBlackBoldText">
                    {{ maskPhoneNumber(item.phoneNumber) }}
                  </view>
                  <view @click="makeACall(item.phoneNumber)">
                    <text
                      style="font-size: 18px; color: orange"
                      class="cuIcon-phone"
                    ></text>
                  </view>
                </view>
              </uni-forms-item>
              <uni-forms-item label="骑行时长">
                <view class="deepBlackBoldText">
                  <!-- item.ridingDuration -->
                  {{ calculateRideTime(item.startTime, item.endTime) }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="开始时间">
                <view class="deepBlackBoldText">
                  <!-- item.createdAt -->
                  {{ item.startTime }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="结束时间">
                <view class="deepBlackBoldText">
                  {{ item.endTime }}
                </view>
              </uni-forms-item>
            </uni-forms>
          </uni-card>
        </view>
      </z-paging>
    </view>

    <view v-show="tabIndex === 6">
      <z-paging
        :fixed="false"
        :height="scrollHeight + 29 + 'px'"
        ref="faultList"
        v-model="faultHistoryList"
        @query="loadMoreDataFaultHistoryList"
        :default-page-no="1"
        :default-page-size="10"
        :auto-show-back-to-top="true"
      >
        <view v-for="(item, index) in faultHistoryList" :key="index">
          <uni-card
            :title="'故障部位：' + item.faultPart"
            :sub-title="item.reportAt"
          >
            <uni-forms>
              <uni-forms-item label="故障内容">
                <view class="deepBlackBoldText">
                  {{ item.faultDescription }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="运维人员">
                <view class="deepBlackBoldText">
                  {{ item.receiverName }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="处理意见">
                <view class="deepBlackBoldText">
                  {{ item.handleResult }}
                </view>
              </uni-forms-item>
              <uni-forms-item label="处理时间">
                <view class="deepBlackBoldText">
                  {{ item.handleAt }}
                </view>
              </uni-forms-item>
            </uni-forms>
          </uni-card>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script setup>
import dayjs from "dayjs";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import * as api from "@/utils/api.js";
import { showModelMessage } from "@/utils/tools.js";
import { onLoad } from "@dcloudio/uni-app";
import mapLocation from "@/pages/map/map-location.vue";

const ebikeInfo = ref({
  bikeId: "",
  bikeCode: "",
  ecuId: "",
  ecuSn: "",
  position: "",
});
const isScrollY = ref(false);
const getEndDetail = ({ minTop, maxTop, curTop }) => {
  if (curTop == maxTop) isScrollY.value = true;
  else isScrollY.value = false;
};
const changeList = ref([
  {
    id: 0,
    title: "车辆信息",
  },
  {
    id: 1,
    title: "定位信息",
  },
  {
    id: 2,
    title: "指令记录",
  },
  {
    id: 3,
    title: "扫码记录",
  },
  {
    id: 4,
    title: "工单记录",
  },
  {
    id: 5,
    title: "订单轨迹",
  },
  {
    id: 6,
    title: "故障记录",
  },
]);
const scrollHeight = ref(0);
const equipmentTime = ref({});
const equipmentState = ref({});
const latestOrientation = ref({});
const finalTrajectory = ref({});
const latestScanPoint = ref({});
const latestDropOffpoint = ref({});
const operateInfo = ref({});

const tabIndex = ref(0);

const instructionRecord = ref([]);
const sacnRecordList = ref([]);
const orderRecord = ref([]);
const orderTrajectory = ref([]);
const faultHistoryList = ref([]);

const faultList = ref(null);
const orderTrajectoryList = ref(null);
const orderRecordList = ref(null);
const instructionRecordList = ref(null);
const sacnRecord = ref(null);

const viewWorkOrderInfo = (workOrder) => {
  if (!workOrder) {
    return;
  }
  uni.navigateTo({
    url:
      "/pages/devops/ebikeinfo/workorderinfo?orderId=" +
      workOrder.orderId +
      "&orderType=" +
      workOrder.orderType,
  });
};

const wakeUpMap = () => {};

const maskUserName = (userName) => {
  if (!userName) return "-";
  const firstChar = userName.charAt(0);
  const maskedName = firstChar + "*".repeat(userName.length - 1);
  return maskedName;
};

const maskPhoneNumber = (phoneNumber) => {
  if (!phoneNumber) return "-";
  const firstPart = phoneNumber.substring(0, 3);
  const lastPart = phoneNumber.substring(phoneNumber.length - 4);
  const maskedPart = "*".repeat(phoneNumber.length - 7);
  return firstPart + maskedPart + lastPart;
};

const makeACall = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber,
    success: () => {},
    fail() {},
  });
};

const copyOrderCode = (orderCode) => {
  uni.setClipboardData({
    data: orderCode,
    success: () => {
      uni.showToast({
        title: "复制成功",
        icon: "success",
      });
    },
    fail: (error) => {
      uni.showToast({
        title: "复制失败",
        icon: "none",
      });
    },
  });
};

const sendTabItem = (data) => {
  let index = data["id"];
  if (tabIndex.value == index) return;
  tabIndex.value = index;
  const param = {
    bikeId: ebikeInfo.value.bikeId,
    ecuSn: ebikeInfo.value.ecuSn,
    ecuId: ebikeInfo.value.ecuId,
  };
  switch (index) {
    case 0:
      getBikeINfoData(param);
      break;
    case 1:
      api.callEbikeInfo("getOrientationInfo", param).then((res) => {
        console.log(res);

        if (res.code === 200) {
          latestOrientation.value = res.data.resLatestOrientationDto;
          latestScanPoint.value = res.data.resLatestScanPointDto;
          finalTrajectory.value = res.data.resFinalTrajectoryDto;
          latestDropOffpoint.value = res.data.resLatestDropOffpointDto;
        }
      });
      break;
  }
};

const getBikeINfoData = (param) => {
  api
    .callCoreApi(
      "gps?ecuId=" +
        ebikeInfo.value.ecuId +
        "&bikeId=" +
        ebikeInfo.value.bikeId,
      {},
      "get"
    )
    .then((ecudata) => {});

  api.callEbikeInfo("getBikeDetailsINfoData", param).then((res) => {
    if (res.code == 200) {
      equipmentTime.value = res.data.resEquipmentTimeDto;
      equipmentState.value = res.data.resEquipmentStateDto;
      operateInfo.value = res.data.resOperateInfoDto;
    }
  });
};

const loadMoreDataFaultHistoryList = (pageNo, pageSize) => {
  if (!ebikeInfo.value.bikeId) {
    faultList.value.complete([]);
    return;
  }
  // 组装参数
  const params = {
    bikeId: ebikeInfo.value.bikeId,
    pageParam: {
      pageNum: pageNo,
      pageSize: pageSize,
    },
  };
  api.callEbikeInfo("getFaultHistoryList", params).then((res) => {
    if (res.code === 200) {
      faultList.value.complete(res.data);
    } else {
      faultList.value.complete([]);
    }
  });
};

const loadMoreDataOrderRecord = (pageNo, pageSize) => {
  if (!ebikeInfo.value.bikeId) {
    orderRecordList.value.complete([]);
    return;
  }
  // 组装参数
  const params = {
    bikeId: ebikeInfo.value.bikeId,
    pageParam: {
      pageNum: pageNo,
      pageSize: pageSize,
    },
  };
  api.callEbikeInfo("getWorkOrderRecordList", params).then((res) => {
    if (res.code == 200) {
      orderRecordList.value.complete(res.data);
    } else {
      orderRecordList.value.complete([]);
    }
  });
};

const loadMoreDataOrderTrajectory = (pageNo, pageSize) => {
  if (!ebikeInfo.value.bikeId) {
    orderTrajectoryList.value.complete([]);
    return;
  }
  api
    .callOrdereApi(
      "userOrders/page?pageNum=" +
        pageNo +
        "&pageSize=" +
        pageSize +
        "&bikeId=" +
        ebikeInfo.value.bikeId,
      {},
      "get"
    )
    .then((res) => {
      if (res.code == 200) {
        orderTrajectoryList.value.complete(res.data.records);
      } else {
        orderTrajectoryList.value.complete([]);
      }
    });
};

const loadMoreDataInstructionRecord = (pageNo, pageSize) => {
  if (!ebikeInfo.value.bikeId) {
    instructionRecordList.value.complete([]);
    return;
  }
  // 组装参数
  const params = {
    bikeId: ebikeInfo.value.bikeId,
    pageParam: {
      pageNum: pageNo,
      pageSize: pageSize,
    },
  };
  api.callEbikeInfo("getInstructionRecordList", params).then((res) => {
    if (res.code == 200) {
      instructionRecordList.value.complete(res.data);
    } else {
      instructionRecordList.value.complete([]);
    }
  });
};

const loadMoreDatasacnRecordList = (pageNo, pageSize) => {
  if (!ebikeInfo.value.bikeId) {
    sacnRecord.value.complete([]);
    return;
  }
  // 组装参数
  const params = {
    bikeId: ebikeInfo.value.bikeId,
    pageParam: {
      pageNum: pageNo,
      pageSize: pageSize,
    },
  };
  api.callEbikeInfo("getInstructionRecordList", params).then((res) => {
    if (res.code == 200) {
      sacnRecord.value.complete(res.data);
    } else {
      sacnRecord.value.complete([]);
    }
  });
};

onLoad((data) => {
  const bikeId = data["bikeId"];
  const ecuId = data["ecuId"];
  const ecuSn = data["ecuSn"];
  ebikeInfo.value.bikeId = bikeId;
  ebikeInfo.value.ecuId = ecuId;
  ebikeInfo.value.ecuSn = ecuSn;
});

const changePoint = (res) => {};

/**
 * 计算骑行时长（支持跨天场景）
 * @param {string} startTimeStr - 开始时间，格式：YYYY-MM-DD HH:mm:ss
 * @param {string} endTimeStr - 结束时间，格式：YYYY-MM-DD HH:mm:ss
 * @returns {string} 格式化的骑行时长，如 "16小时0分钟5秒"
 */
function calculateRideTime(startTimeStr, endTimeStr) {
  // 解析时间字符串为Date对象（处理月份0-based问题）
  function parseTime(timeStr) {
    const match = timeStr.match(
      /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/
    );
    if (!match) {
      throw new Error(`时间格式错误: ${timeStr}，需为YYYY-MM-DD HH:mm:ss`);
    }
    const [, year, month, day, hour, minute, second] = match;
    return new Date(
      parseInt(year),
      parseInt(month) - 1, // 月份是0-11，需减1
      parseInt(day),
      parseInt(hour),
      parseInt(minute),
      parseInt(second)
    );
  }

  // 解析开始和结束时间
  const start = parseTime(startTimeStr);
  const end = parseTime(endTimeStr);

  // 计算时间差（处理跨天场景）
  let diffMs;
  if (end > start) {
    diffMs = end - start; // 结束时间在开始时间之后，直接计算差
  } else {
    // 结束时间早于开始时间，视为跨天，给结束时间加1天
    const endNextDay = new Date(end);
    endNextDay.setDate(endNextDay.getDate() + 1);
    diffMs = endNextDay - start;
  }

  // 将毫秒差转换为小时、分钟、秒
  const hours = Math.floor(diffMs / 3600000); // 1小时=3600000毫秒
  const remainder = diffMs % 3600000;
  const minutes = Math.floor(remainder / 60000); // 1分钟=60000毫秒
  const seconds = Math.floor((remainder % 60000) / 1000); // 1秒=1000毫秒

  // 格式化输出
  return `${hours}小时${minutes}分钟${seconds}秒`;
}

onMounted(() => {
  // 获取设备信息
  const systemInfo = uni.getSystemInfoSync();
  // 获取屏幕高度和状态栏高度
  const screenHeight = systemInfo.screenHeight;
  const statusBarHeight = systemInfo.statusBarHeight;
  // 计算去掉状态栏后的可用区域高度
  scrollHeight.value = screenHeight - statusBarHeight - 113;
  const param = {
    bikeId: ebikeInfo.value.bikeId,
    ecuSn: ebikeInfo.value.ecuSn,
    ecuId: ebikeInfo.value.ecuId,
  };
  getBikeINfoData(param);
});
</script>

<style>
.container {
  padding: 0px 0px;
  background-color: #f3f4f6;
}

.success {
  color: green !important;
}

.failure {
  color: red;
}

.default {
  color: gray;
}

.lengthwz {
  width: 60px;
  line-height: 36px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

.deepBlackBoldText {
  font-weight: bold;
}

.with50 {
  width: 50%;
}

.uni-forms-item {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-bottom: 5px !important;
}

.uni-forms-item__content {
  position: relative;
  font-size: 14px;
  flex: 1;
  box-sizing: border-box;
  flex-direction: row;
  line-height: 36px;
}

.scrollWrap {
  height: 40px;
  line-height: 40px;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  background-color: #fff;
}

.scrollWrap .scrollItem {
  display: inline-block;
  width: 25%;
  font-size: 25rpx;
}

.scrollWrap .active {
  color: #009dff !important;
  position: relative;
  font-weight: 600;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.scrollWrap .active :after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(50% - 5px);
  width: 10px;
  height: 2px;
  background-color: #009dff !important;
}

.uni-card {
  border-radius: 15px !important;
}

.you-touchbox-content {
  border-radius: 20px !important;
  background-color: #f2f2f2 !important;
}

.uni-card__header {
  font-weight: bold;
  color: #000000;
  font-size: 16px;
}

.uni-card .uni-card__header .uni-card__header-box {
  flex: none !important;
}

.uni-card .uni-card__header .uni-card__header-extra {
  margin-left: 10px;
}

.uni-forms .uni-forms-item__label {
  width: 100px !important;
}

.divmap {
  position: relative;
  width: 100%;
  height: 500px;
}

.cardtitleri {
  font-size: 15px;
  color: #3a3a3a;
  padding: 5px;
  font-weight: bold;
}

.cardtitle {
  margin: 5px 0px;
  padding: 5px 0px;
  border-bottom: solid 1px #f1f1f1;
}
</style>
