<template>
  <div class="car-detail-container">
    <!-- 顶部返回与标题 -->

    <div class="header">
      <img
        src="../../../assets/images/sub_icon.png"
        alt="list_bg"
        class="header-title-icon"
      />
      <span class="header-title">车辆详情</span>
    </div>
    
      <div class="back-button">
        <el-button
          type="primary"
          plain
          class="btn custom-back-btn"
          size="small"
          @click="$emit('back')"
        >
          <el-icon class="back-icon"><ArrowLeft /></el-icon>
          返回车辆列表
        </el-button>
      </div>
      <div class="track-list">
      <!-- 车辆基本信息 -->
      <div class=" section base-info">
        <div class="car-id">
          {{ car.id }}（{{ car.type }}）
          <div class="video-tabs">
            <span class="tab active">任务中</span>
            <span class="tab active">在线</span>
        
          </div>
        </div>
        <div class="info-row">
          <div>品牌：{{ car.brand || "驱鸟车" }}</div>
          <div>负责人：{{ car.manager }}</div>
        </div>
        <div class="info-row">
          <div>所属单位：{{ car.company || "机场发展公司" }}</div>
          <div>联系方式：{{ car.phone || "18661190988" }}</div>
        </div>
      </div>

      <!-- 任务信息 -->
      <div class="section task-info">
        <div class="section-title">任务信息</div>
        <div class="info-row">
          <div>开始时间：{{ car.taskStart || "5月1日12:00" }}</div>
          <div>结束时间：{{ car.taskEnd || "5月1日12:30" }}</div>
        </div>
        <div class="info-row">
          <div>起点：{{ car.taskStartPoint || "A区快冲桩" }}</div>
          <div>终点：{{ car.taskEndPoint || "B区快冲桩" }}</div>
        </div>
        <div class="info-row">
          <div>行驶速度：{{ car.speed }}</div>
          <div>行驶里程：{{ car.distance }}</div>
        </div>
      </div>

      <!-- 电池监控 -->
      <div class="section battery-info">
        <div class="section-title">
          电池监控 <span class="status-normal">正常</span>
        </div>
        <div class="info-row1">
         
          <div class="battery-left">
            <img src="../../../assets/images/battery.png" alt="battery" class="battery-icon">
            <p class="battery-content">电池温度</p>
          </div>
            <p class="battery-temp" :class="getBatteryTempClass(car.batteryTemp ?? '--')">{{ car.batteryTemp ?? "--" }}</p>
        
        </div>
      </div>

      <!-- 360°监控状态 -->
      <div class="section video-info">
        <div class="section-title">
          360°监控状态
          <span class="video-tabs">
            <span class="tab active">前视</span>
            <span class="tab">左前</span>
            <span class="tab">右前</span>
            <span class="tab">后视</span>
          </span>
        </div>
        <div class="video-preview">
          <img :src="car.videoImg" alt="360监控" />
        </div>
      </div>

      <!-- 历史轨迹 -->
      <div class="section track-info">
        <div class="section-title">历史轨迹（{{ trackCount }}）</div>
        <div class="track-search">
          <input type="text" placeholder="请输入关键字搜索" />
          <span class="search-icon"></span>
        </div>
      
       
            <div
              class="track-item"
              v-for="(item, idx) in car.trackList || defaultTrackList"
              :key="idx"
            >
              <div class="track-timeline">
                <div class="timeline-dot" :class="{ 'active': idx === 0 }"></div>
                <div class="timeline-line"></div>
              </div>
              <div class="track-content">
                <div class="track-time">{{ item.time }}</div>
                <div class="track-desc">{{ item.desc }}</div>
                <div class="track-detail">
                  <span>行驶里程：{{ item.distance }}</span>
                  <span>任务编号：{{ item.taskId }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    

</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  car: {
    type: Object,
    required: true,
  },
});

const defaultTrackList = [
  {
    time: "2024年6月16日 18:12:09—2024年6月16日 20:12:09",
    desc: "起点：机场发展公司 终点：机场发展公司",
    distance: "20km",
    taskId: "001",
  },
  {
    time: "2024年6月15日 18:12:09—2024年6月15日 20:12:09",
    desc: "起点：机场发展公司 终点：机场发展公司",
    distance: "20km",
    taskId: "002",
  },
];

// 根据温度判断状态类名
function getBatteryTempClass(temp) {
  // 提取温度数值
  const tempValue = parseFloat(temp);
  
  if (isNaN(tempValue)) return 'temp-normal';
  
  if (tempValue >= 45) return 'temp-danger';
  if (tempValue >= 38) return 'temp-warning';
  return 'temp-normal';
}

const trackCount = computed(() => {
  const list = props.car?.trackList;
  if (Array.isArray(list)) return list.length;
  return defaultTrackList.length;
});
</script>

<style lang="scss" scoped>
.car-detail-container {
  width: 391px;
  height: 85vh;
  overflow-y: hidden;
  background: #4F565F;
  border-radius: 8px;
  color: #fff;
  /* padding: 18px 20px 20px 20px; */
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  position: absolute;
  right: 0px;
  top:0;
  z-index: 10;
}
.header-actions {
  padding: 16px;
}
/* 返回按钮样式 */
/* .back-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
} */

/* 自定义返回按钮样式 */
.custom-back-btn {
  margin: 10px;
  background-color: #424851 !important;
  border-color: #303236 !important;
  color: #ffffff !important;
  padding: 5px;
  line-height: 1.5;
  font-size: 12px;
}

.custom-back-btn:hover {
  background-color: rgba(52, 122, 226, 0.3) !important;
}

.back-icon {
  margin-right: 4px;
}
.header {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1.8;
  font-weight: bold;
  background: url("../../../assets/images/subheading.png") no-repeat;
  background-size: 100% 100%;
  padding: 5px 10px;
  color: #fff;
  img {
    width: 31px;
    height: 15px;
    margin-right: 5px;
  }
}
.back-btn {
  color: #fff;
  background: #424851;
  cursor: pointer;
  font-size: 13px;
  /* display: inline-block; */
  padding: 5px 10px;
  border-radius: 4px;
}
.header-title {
  font-size: 18px;
  font-weight: bold;
}
.section {
  width:95%;
  margin:0 auto;
  background: #424851;
  border-radius: 6px;
  margin-bottom: 16px;
  padding: 14px 16px 10px 16px;
}
.base-info .car-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;

}
.info-row1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  border:1px solid #222b36;
  background: #3B4047;
  border-left: 4px solid #303236;
  padding:5px 10px;
 
  

}
.info-row1 p{
    margin:0 !important;
  }
.battery-left{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:10px;
  }
.battery-content{
  color: #fff;
}
.section-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.status-normal {
  background: #1fcb81;
  color: #fff;
  border-radius: 3px;
  font-size: 12px;
  padding: 2px 8px;
  margin-left: 10px;
}
.battery-temp {
  font-weight: bold;
  margin-left: 8px;
}

.temp-normal {
  color: #1fcb81;
}

.temp-warning {
  color: #FDB92C;
}

.temp-danger {
  color: #FF312F;
}
.video-info {
  padding-bottom: 10px;
}
.video-tabs {
  margin-left: 18px;
}
.tab {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  background: #222b36;
  color: #8ec6ff;
  margin-left: 6px;
  font-size: 13px;
  cursor: pointer;
}
.tab.active {
  background: #5690E7;
  color: #fff;
}
.video-preview {
  width:100%;
  height: 200px;
  aspect-ratio:4/3;
  object-fit: cover;

  text-align: center;
  border:1px solid #222b36;
}
.video-preview img {
  width: 95%;
  border-radius: 6px;
  background: #222b36;
  
}
.track-info {
  padding-bottom: 0;
}
.track-search {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.track-search input {
  background: #222b36;
  border: none;
  border-radius: 4px;
  padding: 5px 30px 5px 10px;
  color: #fff;
  width: 100%;
  font-size: 13px;
  outline: none;
}
.search-icon {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238EC6FF'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-left: -26px;
}
.track-list {
  height: 70vh;
  /* flex: 1; */
  overflow-y: auto;

}
.track-item {
  border-radius: 4px;
  padding: 7px 10px;
  margin-bottom: 7px;
  font-size: 13px;
  display: flex;
  position: relative;
}

.track-timeline {
  width: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 2;
}

.timeline-dot.active {
  width: 14px;
  height: 14px;
  background-color: #6DB8FF;
  box-shadow: 0 0 8px 2px rgba(26, 109, 255, 0.6);
}

.timeline-line {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% - 10px);
  background: linear-gradient(to bottom, #536C8F 50%, transparent 50%);
  background-size: 2px 8px;
  z-index: 1;
}

.track-content {
  flex: 1;
}

.track-time {
  color: #F0F0F0;
  font-size: 12px;
}

.track-desc {
  margin: 2px 0 2px 0;
  color:#C3C3C3;
}

.track-detail {
  color: #b0b8c5;
  font-size: 12px;
  display: flex;
  gap: 16px;
}
</style>

