<template>
  <div class="force-dispatch">
    <!-- 顶部两个卡片 -->
    <div class="force-dispatch__top">
      <!-- 响应等级卡片 -->
      <div class="force-dispatch__level-card">
        <span class="force-dispatch__level-label">响应等级</span>
        <span class="force-dispatch__level-value">{{ getLevelText(forceDispatch.responseLevel) }}</span>
      </div>

      <!-- 智能应急方案按钮 -->
      <div class="force-dispatch__plan-btn" @click="handleViewPlan">
        <span class="force-dispatch__plan-text">智能应急方案</span>
        <img
          src="../../assets/images/SketchPng4f8a9129bc3dd552a5a409c19b2bf92a44549ac8628f51dd4db3d1183f1bf455.png"
          alt="arrow"
          class="force-dispatch__plan-icon"
        />
      </div>
    </div>

    <!-- 中间三列布局 -->
    <div class="force-dispatch__middle">
      <!-- 左列资源 -->
      <div class="force-dispatch__left">
        <div class="force-dispatch__stat">
          <span class="force-dispatch__stat-label">应急基地与预置点</span>
          <span class="force-dispatch__stat-value">
            <!-- {{ dispatchSuggestion.bases }} -->
              2
            <span class="force-dispatch__stat-unit">处</span>
          </span>
        </div>
        <div class="force-dispatch__stat">
          <span class="force-dispatch__stat-label">应急装备</span>
          <span class="force-dispatch__stat-value">
            <!-- {{ dispatchSuggestion.excavators }} -->
              14
            <span class="force-dispatch__stat-unit">台</span>
          </span>
        </div>
        <div class="force-dispatch__stat force-dispatch__stat--action">
          <span class="force-dispatch__stat-label">交通管制</span>
          <span class="force-dispatch__stat-value">{{ dispatchSuggestion.trafficControl }}</span>
        </div>
      </div>

      <!-- 中央圆形元素 -->
      <div class="force-dispatch__center">
        <div class="force-dispatch__circle">
          <!-- <div class="force-dispatch__circle-ring"></div> -->
          <div class="force-dispatch__circle-text">
            <div class="force-dispatch__circle-line1">建议</div>
            <div class="force-dispatch__circle-line2">调度力量</div>
          </div>
        </div>
      </div>

      <!-- 右列资源 -->
      <div class="force-dispatch__right">
        <div class="force-dispatch__stat">
          <span class="force-dispatch__stat-label">应急物资</span>
          <span class="force-dispatch__stat-value">
            <!-- {{ dispatchSuggestion.supplies }} -->
              190
            <span class="force-dispatch__stat-unit">件</span>
          </span>
        </div>
        <div class="force-dispatch__stat">
          <span class="force-dispatch__stat-label">应急人员</span>
          <span class="force-dispatch__stat-value">
            <!-- {{ dispatchSuggestion.personnel }} -->
              20
            <span class="force-dispatch__stat-unit">人</span>
          </span>
        </div>
        <div class="force-dispatch__stat force-dispatch__stat--action">
          <span class="force-dispatch__stat-label">阻断信息</span>
          <span class="force-dispatch__stat-value">{{ dispatchSuggestion.blockInfo }}</span>
        </div>
      </div>
    </div>

    <!-- 底部时间和按钮 -->
    <div class="force-dispatch__bottom">
      <div class="force-dispatch__eta">
        <span class="force-dispatch__eta-label">预计抢通时间</span>
        <span class="force-dispatch__eta-value">{{ forceDispatch.estimatedClearTime || '2025/10/21 22:00' }}</span>
      </div>
      <ActionButton
        text="响应调度"
        type="primary"
        size="medium"
        @click="handleStartDispatch"
      />
    </div>
  </div>
</template>

<script setup>
import { inject } from 'vue'
import ActionButton from '../shared/ActionButton.vue'
import { RESPONSE_LEVELS } from '../../constants'

const { forceDispatch, dispatchSuggestion } = inject('disasterData')

// 定义对外事件
const emit = defineEmits(['view-plan', 'start-dispatch'])

/**
 * 获取响应等级文本，带默认值兜底
 */
const getLevelText = (level) => {
  const item = RESPONSE_LEVELS.find(l => l.value === level)
  return item ? `${item.label}` : '四级'
}

/**
 * 查看智能应急方案详情
 */
const handleViewPlan = () => {
  console.log('查看智能应急方案:', forceDispatch.plan)
  emit('view-plan', forceDispatch.plan)
}

/**
 * 启动应急调度方案
 */
const handleStartDispatch = () => {
  const planName = forceDispatch.plan?.name || '智能应急方案'
  console.log('启动应急方案:', planName)
  emit('start-dispatch', {
    planName,
    plan: forceDispatch.plan,
    responseLevel: forceDispatch.responseLevel,
    estimatedClearTime: forceDispatch.estimatedClearTime
  })
}
</script>

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

.force-dispatch {
  padding: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: vh(5);
}

/* 顶部两个卡片 */
.force-dispatch__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: vw(20);
}

/* 响应等级卡片 */
.force-dispatch__level-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: vw(12);
  padding: vh(5) vw(16);
  // background: rgba(20, 53, 118, 0.6);
  // border: 1px solid rgba(28, 161, 255, 0.3);
  // border-radius: vw(4);
  background: url('../../assets/images/响应等级bg.png') no-repeat center center;
  background-size: 100% 100%;
  min-height: vh(30);
}

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

.force-dispatch__level-value {
  font-size: fs(15);
  font-family: SourceHanSansCN-Bold, sans-serif;
  font-weight: 600;
  color: var(--text-white);
}

/* 智能应急方案按钮 */
.force-dispatch__plan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: vw(8);
  padding: vh(10) vw(16);
  // background: linear-gradient(135deg, rgba(28, 161, 255, 0.3), rgba(28, 161, 255, 0.5));
  // border: 1px solid rgba(28, 161, 255, 0.5);
  // border-radius: vw(4);
  background: url('../../assets/images/文本按钮bg.png') no-repeat center center;
  background-size: 100% 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: vh(30);
  user-select: none;

  &:hover {
    background: linear-gradient(135deg, rgba(28, 161, 255, 0.4), rgba(28, 161, 255, 0.6));
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 vh(2) vh(8) rgba(28, 161, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
  }
}

.force-dispatch__plan-text {
  font-size: fs(15);
  font-family: SourceHanSansCN-Medium, sans-serif;
  font-weight: 500;
  color: var(--text-white);
}

.force-dispatch__plan-icon {
  width: vw(16);
  height: vh(16);
  transition: transform 0.3s ease;
}

.force-dispatch__plan-btn:hover .force-dispatch__plan-icon {
  transform: translateX(vw(2));
}

/* 中间三列布局 */
.force-dispatch__middle {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: vw(10);
  align-items: center;
  padding: vh(5) 0;
  // background: url('../../assets/images/ForceDispatchBg.png') center top no-repeat;
}

/* 左右列统一样式 */
.force-dispatch__left,
.force-dispatch__right {
  display: flex;
  flex-direction: column;
  gap: vh(12);
}

/* 统计项 */
.force-dispatch__stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: vh(8) 0;
  background: url('../../assets/images/文本线条框.png') no-repeat center center;
  background-size: 100% 100%;
}

.force-dispatch__stat-label {
  font-size: fs(10);
  font-family: SourceHanSansCN-Regular, sans-serif;
  color: var(--text-white);
  width: 45px;
}

.force-dispatch__stat-value {
  font-size: fs(18);
  font-family: SourceHanSansCN-Bold, sans-serif;
  font-weight: 700;
  color: var(--text-white);
}

.force-dispatch__stat--action .force-dispatch__stat-value {
  color: var(--primary-color);
}

.force-dispatch__stat-unit {
  font-size: fs(12);
  font-family: SourceHanSansCN-Regular, sans-serif;
  font-weight: 400;
  color: var(--text-white);
  margin-left: vw(2);
}

/* 中央圆形区域 */
.force-dispatch__center {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url('../../assets/images/中心.png') no-repeat center center;
  background-size: contain;
}

.force-dispatch__circle {
  position: relative;
  width: vw(140);
  height: vh(120);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 三层旋转环 */
.force-dispatch__circle-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: vw(3) solid transparent;
  border-top-color: rgba(28, 161, 255, 0.8);
  border-right-color: rgba(28, 161, 255, 0.6);
  border-bottom-color: rgba(28, 161, 255, 0.4);
  border-left-color: rgba(28, 161, 255, 0.2);
  animation: force-dispatch-spin 3s linear infinite;

  /* 第二层圆环 */
  &::before {
    content: '';
    position: absolute;
    inset: vw(8);
    border-radius: 50%;
    border: vw(2) solid transparent;
    border-top-color: rgba(28, 161, 255, 0.4);
    border-right-color: rgba(28, 161, 255, 0.3);
    animation: force-dispatch-spin 2s linear infinite reverse;
  }

  /* 外层光晕 */
  &::after {
    content: '';
    position: absolute;
    inset: vw(-6);
    border-radius: 50%;
    background: radial-gradient(
      circle,
      transparent 50%,
      rgba(28, 161, 255, 0.1) 70%,
      transparent 100%
    );
  }
}

/* 中央文字 */
.force-dispatch__circle-text {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: vh(2);
}

.force-dispatch__circle-line1 {
  font-size: fs(16);
  font-family: SourceHanSansCN-Medium, sans-serif;
  font-weight: 500;
  color: var(--text-white);
}

.force-dispatch__circle-line2 {
  font-size: fs(16);
  font-family: SourceHanSansCN-Regular, sans-serif;
  font-weight: 400;
  color: var(--text-white);
}

/* 旋转动画 */
@keyframes force-dispatch-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 底部时间和按钮 */
.force-dispatch__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: vw(16);
  // padding-top: vh(12);
}

.force-dispatch__eta {
  display: flex;
  // flex-direction: column;
  align-items: center;
  gap: vh(2);
  background: url('../../assets/images/文本线条框.png') no-repeat center center;
  background-size: 100% 100%;
  padding: vh(8) vw(12);
}

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

.force-dispatch__eta-value {
  font-size: fs(13);
  font-family: SourceHanSansCN-Bold, sans-serif;
  font-weight: 600;
  color: var(--text-white);
}
</style>
