<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const carDetail = ref<any>({})

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

watch(() => props.data, (newVal) => {
  carDetail.value = newVal
})
</script>

<template>
  <view class="container">
    <view class="y_card_wrapper">
      <!-- 车辆信息 -->
      <view class="card_box carInfo">
        <view class="header">
          <uv-image src="/static/images/carIcon.png" width="60px" height="60px" />
          <view class="title_bar">
            <view class="title">
              车辆编号
            </view>
            <view class="value_bar">
              <text class="value">{{ carDetail.bikeCode || '--' }}</text>
              <view class="copy">
                复制
              </view>
            </view>
          </view>
        </view>
        <view class="details">
          <view class="detail-row">
            <text class="label">IMEI号</text>
            <text class="value">{{ '--' }}</text>
          </view>
          <view class="detail-row">
            <text class="label">车辆型号</text>
            <text class="value">{{ '--' }}</text>
          </view>
          <view class="detail-row">
            <text class="label">车牌号</text>
            <text class="value">{{ '--' }}</text>
          </view>
          <view class="detail-row">
            <text class="label">设备SN</text>
            <text class="value">{{ carDetail.ecuSn || '--' }}</text>
          </view>
        </view>
      </view>
      <!-- 设备信息 -->
      <view class="card_box equipmentInfo">
        <view class="title">
          设备状态
        </view>
        <view class="status-grid">
          <view class="status-row">
            <text class="label">实时电量</text>
            <text class="value" style="color: red;">{{ carDetail.soc || '--' }}%</text>
          </view>
          <view class="status-row">
            <text class="label">SOC电量</text>
            <text class="value">{{ carDetail.soc || '--' }}</text>
          </view>
          <view class="status-row">
            <text class="label">车辆状态</text>
            <text class="value">{{ carDetail.usageStatus || '--' }}</text>
          </view>
          <view class="status-row">
            <text class="label">实时电压</text>
            <text class="value">{{ carDetail.voltage || '--' }}V</text>
          </view>
          <view class="status-row">
            <text class="label">电门状态</text>
            <text class="value">{{ carDetail.accOn || '--' }}</text>
          </view>
          <view class="status-row">
            <text class="label">轮锁状态</text>
            <text class="value">{{ carDetail.wheelLocked || '--' }}</text>
          </view>
          <view class="status-row">
            <text class="label">电池仓状态</text>
            <text class="value">{{ carDetail.seatLocked || '--' }}</text>
          </view>
          <view class="status-row">
            <text class="label">头盔在位</text>
            <text class="value">{{ carDetail.helmetExit || '--' }}</text>
          </view>
          <view class="status-row">
            <text class="label">头盔锁状态</text>
            <text class="value">{{ carDetail.isHelmetLocked || '--' }}</text>
          </view>
          <view class="status-row">
            <text class="label">速度</text>
            <text class="value">{{ carDetail.speed || '--' }}</text>
          </view>
          <view class="status-row">
            <text class="label">运动状态</text>
            <text class="value">{{ carDetail.isMoving || '--' }}</text>
          </view>
          <view class="status-row">
            <text class="label">轮动状态</text>
            <text class="value">{{ carDetail.isWheelSpin || '--' }}</text>
          </view>
        </view>
        <view class="status-row-long">
          <text class="label">最新定位</text>
          <text class="value">
            {{ carDetail.chineseLocation || '--' }}
          </text>
          <uv-icon
            name="daohang1"
            custom-prefix="custom-icon"
            size="24"
            color="#1c88ff"
            @click="goToMap"
          />
        </view>
      </view>
      <!-- 设备时间 -->
      <view class="card_box equipmentTime">
        <view class="title">
          设备时间
        </view>
        <view class="status-row-long">
          <text class="label">最新骑行时间</text>
          <text class="value">
            {{ carDetail.latestCyclingTime || '--' }}
          </text>
        </view>
        <view class="status-row-long">
          <text class="label">最后上报时间</text>
          <text class="value">
            {{ carDetail.latestTime || '--' }}
          </text>
        </view>
      </view>
      <!-- 垫高层 -->
      <view style="width: 100%;height: 250rpx;" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .carInfo {
    .header {
      display: flex;
      align-items: center;

      .title_bar {
        margin-left: 20rpx;

        .title {
          font-size: 28rpx;
          color: #a09e9f;
        }

        .value_bar {
          display: flex;
          align-items: center;

          .value {
            font-size: 36rpx;
            font-weight: bold;
          }

          .copy {
            margin-left: 20rpx;
            font-size: 28rpx;
            background-color: #f4f4f4;
            padding: 3px;
            border-radius: 10rpx;
            color: #777777;
          }
        }
      }
    }

    .details {
      margin-top: 10rpx;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;

      .detail-row {
        display: flex;
        flex-direction: column;
        padding: 10rpx 0;

        .label {
          color: #9e9e9e;
          font-size: 28rpx;
        }

        .value {
          margin-top: 8rpx;
          font-size: 28rx;
          color: #444444;
          word-break: break-all;
        }
      }
    }
  }

  .equipmentInfo {
    margin-top: 30rpx;

    .title {
      font-size: 34rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
    }

    .status-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22rpx;

      .status-row {
        display: flex;
        align-items: center;

        .label {
          color: #a8a8a8;
          font-size: 30rpx;
          width: 180rpx;
        }

        .value {
          font-size: 30rpx;
          color: #393939;
          word-break: break-all;
        }

        &.long-text {
          max-width: 180px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .status-row-long {
      display: flex;
      margin-top: 20rpx;

      .label {
        color: #a8a8a8;
        font-size: 30rpx;
        width: 180rpx;
      }

      .value {
        font-size: 30rpx;
        color: #393939;
        width: calc(100% - 150rpx);
        white-space: normal;
      }
    }
  }

  .equipmentTime {
    margin-top: 30rpx;

    .status-row-long {
      display: flex;
      margin-top: 20rpx;

      .label {
        color: #a8a8a8;
        font-size: 30rpx;
        width: 190rpx;
      }

      .value {
        font-size: 30rpx;
        color: #393939;
        max-width: calc(100% - 190rpx);
        white-space: normal;
      }
    }
  }
}
</style>
