<template>
  <div class="ship-shore-power">
    <div class="left" style="width: 50%;">
      <div class="card digital-twin-card--deep-blue " style="flex: 1;">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">概览</span>
        </div>
        <div class="card-content">
          <div class="overview-grid">
            <div class="overview-item">
              <div class="overview-value">{{ berthingShips }}</div>
              <div class="overview-label">在泊船舶数量</div>
            </div>
            <div class="overview-item">
              <div class="overview-value">{{ shorePowerShips }}</div>
              <div class="overview-label">使用岸电船舶数量</div>
            </div>
            <div class="overview-item">
              <div class="overview-value">{{ noShorePowerShips }}</div>
              <div class="overview-label">未使用岸电船舶数量</div>
            </div>
          </div>
        </div>
      </div>
      <div class="card digital-twin-card--deep-blue " style="flex: 3;">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">数据</span>
        </div>
        <div class="card-content">
          <div class="ship-data-table-container">
            <div class="ship-data-table">
              <div v-for="(ship, index) in shipData" :key="index" class="ship-data-row">
                <div class="ship-data-cell ship-name">{{ ship.name }}</div>
                <div class="ship-data-cell wharf-name">{{ ship.wharf }}</div>
                <div class="ship-data-cell berth-number">{{ ship.berth }}</div>
                <div class="ship-data-cell content shore-power-status" :class="ship.statusClass">{{ ship.status }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref, onMounted, onBeforeUnmount, watch } from 'vue'

// 定义组件属性
interface ShipDataItem {
  name: string;
  wharf: string;
  berth: string;
  status: string;
  statusClass: string;
}

interface Props {
  berthingShips: number;
  shorePowerShips: number;
  noShorePowerShips: number;
  shipData: ShipDataItem[];
}

const props = defineProps<Props>()
</script>

<style scoped>
.ship-shore-power {
  display: flex;
  height: 100%;
  gap: 10px;
}

.ship-data-table-container {
  height: 100%;
  overflow-y: auto;
}

.ship-data-table {
  width: 100%;
}

.ship-data-row {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ship-data-cell {
  flex: 1;
  padding: 1px;
  font-size: 16px;
  /* color: #fff; */
}

.ship-data-cell.content {
  flex: 2;
}

.shore-power-status {
  font-weight: bold;
}

.shore-power-status.status-on {
  color: #4CAF50;
}

.shore-power-status.status-off {
  color: #F44336;
}

.overview-value {
  font-size: 24px;
  font-weight: 700;
}

.overview-label {
  font-size: 18px;
  font-weight: 700;

}
</style>