<!-- 点击车辆详情弹窗 -->
<template>
  <div class="vehicle-detail-container" v-if="visible" :style="popupStyle">
    <div class="vehicle-detail-box">
      <div class="vehicle-detail-header">
        <span>详情</span>
        <img class="vehicle-detail-close" src="../../../assets/images/close_icon.png" alt="" @click="close" />
      </div>
      <div class="vehicle-detail-content">
        <div class="vehicle-detail-title">
          <span>{{ detail.id }} ({{ detail.type }})</span>
          <div class="vehicle-detail-status-container">
            <div class="vehicle-detail-status" :class="{'status-running': detail.status === '任务中', 'status-idle': detail.status === '待命'}">{{ detail.status }}</div>
            <div class="vehicle-detail-online">在线</div>
          </div>
        </div>
        <div class="vehicle-detail-info-container">
          <div class="vehicle-detail-info-row">
            <div class="vehicle-detail-info-item">
              <span class="vehicle-info-label">任务开始时间:</span>
              <span class="vehicle-info-value">{{ detail.startTime }}</span>
            </div>
            <div class="vehicle-detail-info-item">
              <span class="vehicle-info-label">当前位置:</span>
              <span class="vehicle-info-value">{{ detail.currentLocation }}</span>
            </div>
          </div>
          <div class="vehicle-detail-info-row">
            <div class="vehicle-detail-info-item">
              <span class="vehicle-info-label">任务起点:</span>
              <span class="vehicle-info-value">{{ detail.startLocation }}</span>
            </div>
            <div class="vehicle-detail-info-item">
              <span class="vehicle-info-label">任务终点:</span>
              <span class="vehicle-info-value">{{ detail.endLocation }}</span>
            </div>
          </div>
          <div class="vehicle-detail-info-row">
            <div class="vehicle-detail-info-item">
              <span class="vehicle-info-label">行驶总里程:</span>
              <span class="vehicle-info-value">{{ detail.totalDistance }}</span>
            </div>
            <div class="vehicle-detail-info-item">
              <span class="vehicle-info-label">电量剩余:</span>
              <span class="vehicle-info-value">{{ detail.battery }}</span>
            </div>
          </div>
          <div class="vehicle-detail-info-row">
            <div class="vehicle-detail-info-item">
              <span class="vehicle-info-label">负责人:</span>
              <span class="vehicle-info-value">{{ detail.manager }}</span>
            </div>
            <div class="vehicle-detail-info-item">
              <span class="vehicle-info-label">联系电话:</span>
              <span class="vehicle-info-value">{{ detail.phone }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  detail: {
    type: Object,
    default: () => ({
      id: 'QN001',
      type: '驱鸟车',
      status: '任务中',
      startTime: '11-19 11:30',
      currentLocation: 'A区T3点',
      startLocation: 'T1航站楼',
      endLocation: 'T3航站楼',
      totalDistance: '1.3km',
      battery: '60%',
      manager: '张三',
      phone: '18661910988'
    })
  },
  popupStyle: {
    type: Object,
    default: () => ({
      left: '0px',
      top: '0px'
    })
  }
});

const emit = defineEmits(['close']);

function close() {
  emit('close');
}
</script>

<style scoped>
/* 车辆详情弹窗样式 */
.vehicle-detail-container {
  position: fixed;
  z-index: 2000;
  width: 380px;
}

.vehicle-detail-box {
  background-color: #424851;
  border-radius: 8px;
  overflow: hidden;
}

.vehicle-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom:1px solid #777777;
  background-color: #424851;
  color: #fff;
  padding: 8px 12px;
  font-size: 16px;
}

.vehicle-detail-close {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.vehicle-detail-content {
  padding: 12px;
}

.vehicle-detail-title {
  color: #fff;
  font-size: 16px;
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.vehicle-detail-status-container {
  display: flex;
  align-items: center;
}

.vehicle-detail-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.vehicle-detail-online {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  background-color: #409EFF;
  color: #fff;
  margin-left: 10px;
}

.status-running {
  background-color: #409EFF;
  color: #fff;
}

.status-idle {
  background-color: #409EFF;
  color: #fff;
}

.vehicle-detail-info-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vehicle-detail-info-row {
  display: flex;
  justify-content: space-between;
}

.vehicle-detail-info-item {
  flex: 1;
}

.vehicle-info-label {
  color: #EEEEEE;
  font-size: 14px;
  margin-right: 4px;
}

.vehicle-info-value {
  color: #EEEEEE;
  font-size: 14px;
}
</style> 