<template>
  <div class="dispatch-suggestion">
    <div class="suggestion-header">
      <img src="../../assets/images/SketchPng08ea47fd72e32082154366a0cbcd9a701074a835d3bae2eb9237b81b2ae775a6.png" alt="suggestion" class="header-icon" />
      <div class="header-content">
        <span class="header-title">应急物资</span>
        <span class="header-title">应急人员</span>
        <span class="header-title">阻断信息</span>
      </div>
      <div class="header-values">
        <div class="value-item">
          <span class="value-number">{{ dispatchSuggestion.supplies }}</span>
          <span class="value-unit">个</span>
        </div>
        <div class="value-item">
          <span class="value-number">{{ dispatchSuggestion.personnel }}</span>
          <span class="value-unit">人</span>
        </div>
        <span class="value-status">{{ dispatchSuggestion.blockInfo }}</span>
      </div>
      <div class="header-details">
        <div class="detail-item">
          <span class="detail-label">养护站</span>
          <span class="detail-value">{{ dispatchSuggestion.stations }}</span>
          <span class="detail-unit">个</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">挖掘机</span>
          <span class="detail-value">{{ dispatchSuggestion.excavators }}</span>
          <span class="detail-unit">个</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">交通管制</span>
          <span class="detail-status">{{ dispatchSuggestion.trafficControl }}</span>
        </div>
      </div>
      <div class="suggestion-action">
        <button class="suggestion-btn" @click="handleSuggestion">
          建议<br />调度力量
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { inject } from 'vue'

const { dispatchSuggestion } = inject('disasterData')

const handleSuggestion = () => {
  console.log('查看调度力量建议')
}
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;

.dispatch-suggestion {
  padding: vh(20) vw(24);
  margin-top: vh(20);

  .suggestion-header {
    display: flex;
    align-items: center;
    gap: vw(16);
    padding: vh(16) vw(20);
    background: url(../../assets/images/SketchPng84e383eb0cfecb67b9a0068cf2c81514a13efe72d2ac102b28c4739dfd5bacf6.png) no-repeat;
    background-size: 100% 100%;
    border-radius: vw(8);

    .header-icon {
      width: vw(32);
      height: vh(32);
      flex-shrink: 0;
    }

    .header-content {
      display: flex;
      flex-direction: column;
      gap: vh(8);

      .header-title {
        color: var(--text-white);
        font-size: fs(13);
        font-family: SourceHanSansCN-Medium, sans-serif;
        white-space: nowrap;
      }
    }

    .header-values {
      display: flex;
      flex-direction: column;
      gap: vh(8);

      .value-item {
        display: flex;
        align-items: baseline;
        gap: vw(4);

        .value-number {
          color: var(--text-white);
          font-size: fs(16);
          font-family: FZZYJW--GB1-0, sans-serif;
          font-weight: bold;
        }

        .value-unit {
          color: var(--text-white);
          font-size: fs(12);
          font-family: SourceHanSansCN-Regular, sans-serif;
        }
      }

      .value-status {
        color: var(--warning-color);
        font-size: fs(13);
        font-family: SourceHanSansCN-Medium, sans-serif;
      }
    }

    .header-details {
      display: flex;
      flex-direction: column;
      gap: vh(8);
      flex: 1;

      .detail-item {
        display: flex;
        align-items: center;
        gap: vw(8);

        .detail-label {
          color: var(--text-white);
          font-size: fs(12);
          font-family: SourceHanSansCN-Regular, sans-serif;
        }

        .detail-value {
          color: var(--text-white);
          font-size: fs(14);
          font-family: FZZYJW--GB1-0, sans-serif;
          font-weight: bold;
        }

        .detail-unit {
          color: var(--text-white);
          font-size: fs(12);
          font-family: SourceHanSansCN-Regular, sans-serif;
        }

        .detail-status {
          color: var(--success-color);
          font-size: fs(13);
          font-family: SourceHanSansCN-Medium, sans-serif;
        }
      }
    }

    .suggestion-action {
      .suggestion-btn {
        padding: vh(12) vw(16);
        background: var(--primary-color);
        border: none;
        border-radius: vw(6);
        color: var(--text-white);
        font-size: fs(13);
        font-family: SourceHanSansCN-Medium, sans-serif;
        line-height: 1.5;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
        white-space: nowrap;

        &:hover {
          background: rgba(28, 161, 255, 0.8);
          transform: translateY(-2px);
        }

        &:active {
          transform: translateY(0);
        }
      }
    }
  }
}
</style>
