<template>
  <div class="disaster-analysis">
    <!-- <div class="disaster-analysis__location">
      <img
        src="../../assets/images/SketchPng6b1bc7da82dd750ccb3b0a21a6fb46e0173d2fbabde3c21d83e92a2bc004dcfc.png"
        alt="location"
        class="location-icon"
      />
      <span class="location-text">地理位置</span>
      <img
        src="../../assets/images/SketchPng52c0048cd3e760896c35ba9be5433c689d4c5063439ad54d40a678a1b2b20ca0.png"
        alt="arrow"
        class="arrow-icon"
      />
    </div> -->

    <div class="disaster-analysis__content">
      <div class="disaster-analysis__row">
        <DataField
          label="灾害类型"
          :value="disasterInfo.type"
          :icon="DataFieldIcon1"
        />
        <DataField
          label="损坏方量"
          :value="disasterInfo.volume"
          :unit="disasterInfo.volumeUnit"
          :icon="DataFieldIcon2"
        />
      </div>

      <div class="disaster-analysis__row">
        <DataField
          label="滑坡体长度"
          :value="disasterInfo.length"
          :unit="disasterInfo.lengthUnit"
          :icon="DataFieldIcon3"
        />
        <DataField
          label="滑坡体宽度"
          :value="disasterInfo.width"
          :unit="disasterInfo.widthUnit"
          :icon="DataFieldIcon4"
        />
      </div>

      <div class="disaster-analysis__row">
        <DataField
          label="人员伤亡"
          :value="disasterInfo.casualties"
          unit="人"
          color-type="success"
          :icon="DataFieldIcon5"
        />
        <DataField
          label="车辆损坏"
          :value="disasterInfo.vehicles"
          unit="台"
          color-type="success"
          :icon="DataFieldIcon6"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { inject } from "vue";
import DataField from "../shared/DataField.vue";

import DataFieldIcon1 from "../../assets/images/DataField/icon-1.png";
import DataFieldIcon2 from "../../assets/images/DataField/icon-2.png";
import DataFieldIcon3 from "../../assets/images/DataField/icon-3.png";
import DataFieldIcon4 from "../../assets/images/DataField/icon-4.png";
import DataFieldIcon5 from "../../assets/images/DataField/icon-5.png";
import DataFieldIcon6 from "../../assets/images/DataField/icon-6.png";

const { disasterInfo } = inject("disasterData");
</script>

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

.disaster-analysis {
  padding: 0;

  &__location {
    display: flex;
    align-items: center;
    gap: vw(8);
    padding: vh(8) vw(12);
    background: rgba(20, 53, 118, 0.5);
    border-radius: vw(4);
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: rgba(20, 53, 118, 0.7);
    }

    .location-icon {
      width: vw(14);
      height: vh(14);
    }

    .location-text {
      color: var(--text-white);
      font-size: fs(14);
      font-family: SourceHanSansCN-Medium, sans-serif;
    }

    .arrow-icon {
      width: vw(10);
      height: vh(10);
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: vh(12);
  }

  &__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: vw(16);
  }
}
</style>
