<template>
  <div class="disaster-analysis">
    <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>
</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 {
  display: flex;
  flex-direction: column;
  gap: vh(12);
}

.disaster-analysis__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: vw(12);
}
</style>
