<template>
  <view class="bike-maintain-wrapper">
    <view class="header-wrapper">
      <view>
        <view>
          <text style="color: #b7b7b7">车辆编号/类型</text>
          <text style="color: #3b80f8; margin-left: 20rpx" @click="openBikeInfo">详情</text>
          <uni-icons color="#3b80f8" type="right" size="15"></uni-icons>
        </view>
        <view style="margin-top: 10rpx">
          <text style="font-weight: bold; font-size: 32rpx">
            {{ bikeInfo["carInfo"]["bikeCode"] || "-" }}
          </text>
          <text style="margin: 0 12rpx; color: #b7b7b7">|</text>
          <text>/</text>
        </view>
      </view>
      <view
        class="header-right"
        :style="{
          color: getSocStatus(bikeInfo['carInfo']['resGPSDto']['soc'], 'color'),
        }"
      >
        <uni-icons
          custom-prefix="iconfont"
          :type="getSocStatus(bikeInfo['carInfo']['resGPSDto']['soc'], 'icon')"
          :color="getSocStatus(bikeInfo['carInfo']['resGPSDto']['soc'], 'color')"
          :size="iconsize"
        />
        {{ bikeInfo['carInfo']['resGPSDto']['soc'] || '-'}}%
      </view>
    </view>
    <view class="status-wrapper">
      {{ bikeInfo["WXInfo"]["faultPart"] || "-" }}
    </view>
    <scroll-view class="content-wrapper" scroll-y="true">
      <view class="card-wrapper">
        <view class="row">
          <view class="key">用户姓名</view>
          <view class="value"> 
            {{ bikeInfo["WXInfo"]["reportUser"] || "-" }} 
          </view>
        </view>
        <view class="row">
          <view class="key">手机号</view>
          <view class="value"> / </view>
        </view>
        <view class="row">
          <view class="key">上报来源</view>
          <view class="value">
            {{ bikeInfo["WXInfo"]["reportSource"] || "-" }} 
          </view>
        </view>

        <view class="row">
          <view class="key"> 订单编号</view>
          <view class="value">
            /
          </view>
        </view>
        <view class="row">
          <view class="key"> 上报时间</view>
          <view class="value">
            {{ bikeInfo["WXInfo"]["reportAt"] || "-" }} 
          </view>
        </view>
        <view class="row">
          <view class="key"> 故障原因</view>
          <view class="value">
            {{ bikeInfo["WXInfo"]["faultDescription"] || "-" }} 
          </view>
        </view>
        <view class="row">
          <view class="key"> 上报图片</view>
          <view class="value">
            <image
              v-for="(item, index) in bikeInfo['WXInfo']['fileList'] || []"
              :key="item.fileUniqueKey"
              class="previewImage"
              :src="item.url"
              mode="aspectFit"
              @click="
                previewImage( item.url)
              "
            />
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="footer-wrapper">
      <AuditBtnBox :bellParams="bellParams" :bikeCode="bikeCode" />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import AuditBtnBox from "@/components/audit-btn-box/audit-btn-box.vue";
import { onLoad } from "@dcloudio/uni-app";
import * as api from "@/utils/api.js";
import navigator from "@/utils/navigator.js";

const iconsize = 18;
const iconcolor = ref("#3b80f8");
const value = ref(100); // 假设电池电量为100%
const bikecode = ref("");
const bellParams = ref({
  ecuId: "",
  bikeId: "",
});
const bikeCode = ref("");
const bikeInfo = ref({
  carInfo: {
    resGPSDto: {},
  },
  WXInfo: {},
});

// 获取电池状态
const getSocStatus = (value, key) => {
  let status = {
    color: "#3b80f8",
    icon: "icon-ebikedianliang1",
  };
  if (!value) return status;

  switch (true) {
    case value >= 80:
      status.color = "#66c467";
      status.icon = "icon-ebikedianliang2";
      break;
    case value >= 20 && value < 80:
      status.color = "orange";
      status.icon = "icon-ebikedianliang1";
      break;
    default:
      status.color = "red";
      status.icon = "icon-ebikedianliang";
  }

  return status[key];
};

const previewImage = (current) => {
  uni.previewImage({
    current, // 当前显示图片的链接
    urls: [current], // 需要预览的图片链接列表
    success: () => {},
    fail: (err) => console.error("预览失败:", err),
  });
};

function getBikeInfo(bikeCode) {
  bikecode.value = String(bikeCode);
  uni.showLoading({title: "加载中...",});
  if (bikeCode) {
    Promise.allSettled([getBikeINfoData(), getFaultInfo()]).then((results) => {
      results.forEach((result, index) => {
        if (result.status === "fulfilled") {
          if (index === 0) bikeInfo.value.carInfo = result.value;
          if (index === 1) bikeInfo.value.WXInfo = result.value;

          console.log(bikeInfo.value);
          uni.hideLoading();
        } else {
          console.error("获取车辆信息失败:", result.reason);
        }
      });
    });
  } else {
    uni.showToast({
      title: "没有找到车辆信息",
      icon: "none",
    });
  }
}

// 获取车辆详细信息数据
function getBikeINfoData() {
  return new Promise((resolve, reject) => {
    api
      .callMaintenanceApi(
        "ebikeBikeInfo/getBikeINfoData?bikeCode=" + bikecode.value,
        {},
        "get"
      )
      .then((res) => {
        if (res && res.data) {
          resolve(res.data);
        } else {
          reject("获取车辆信息失败");
        }
      })
      .catch((error) => {
        reject(error);
      });
  });
}

// 获取车辆的维护信息
function getFaultInfo() {
  const userInfo = uni.getStorageSync("userInfo");
  const params = {
    receiverId: userInfo.staffId,
    bikeCode: bikecode.value,
  };
  return new Promise((resolve, reject) => {
    //获取车辆维护订单编号
    api
      .callEbikeInfo("inspectHaveOrNotWorkOrder", params)
      .then((res) => {
        const orderId = res.data;
        api
          .callEbikeInfo("getFaultInfo?orderId=" + orderId, {}, "get")
          .then((res1) => {
            resolve(res1.data);
          })
          .catch((error) => {
            reject(error);
          });
      })
      .catch((error) => {
        reject(error);
      });
  });
}

function openBikeInfo() {
  const { bikeId, ecuId, ecuSn } = bikeInfo.value.carInfo;
  const url = `/pages/devops/ebikeinfo/ebikeinfo?bikeId=${bikeId}&ecuId=${ecuId}&ecuSn=${ecuSn}`;
  uni.navigateTo({
    url: url,
  });
}

onLoad((options) => {
  const { bikeCode } = navigator.getParams(options);
  getBikeInfo(bikeCode);
});

onMounted(() => {});
</script>

<style scoped lang="scss">
.bike-maintain-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  position: fixed;
  overflow-y: hidden;
  font-size: 26rpx;

  .header-wrapper {
    width: 100%;
    display: flex;
    padding: 0 20rpx;
    justify-content: space-between;
    justify-items: center;

    .header-right {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .content-wrapper {
    width: 100%;
    height: 81%;
    padding: 0 20rpx;
  }

  .footer-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20rpx;
    background-color: white;
  }
}

.card-wrapper {
  width: 100%;
  padding: 20rpx;
  background-color: white;
  border-radius: 10rpx;
  margin-bottom: 10rpx;

  .row {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    margin: 35rpx 0;

    .key {
      color: #a8a8a8;
      width: 26%;
    }

    .value {
      color: #464646;
      width: 74%;
      text-align: right;
    }
  }
}

.status-wrapper {
  width: 100%;
  padding: 20rpx;
}

.previewImage {
  width: 100rpx;
  height: 100rpx;
  margin-left: 16rpx;
}
</style>
