<template>
  <div class="rainfall-partition">
    <div v-for="(value, key) in dataObj" class="rp-list" @click="upSwitch(key, value)">
      <div class="rp-title"> {{ key }} </div>
      <div class="rp-box">
        <div>
          <progressBar
            :width="(value.rain / maxBox) * 100?(value.rain / maxBox) * 100:0"
            :iconType="3"
            :backgroundColorBox="'rgba(255, 255, 255, 0.1)'"
            :backgroundColorInner="'linear-gradient(270deg, #06C7ED 0%, rgba(55,145,255,0.76) 100%)'"
          />
        </div>
        <div
          ><span v-if="value.rain*1 !== 0">{{ value.rain }}mm</span><span v-else>暂无降雨</span></div
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import progressBar from '../../../components/progressBar/index.vue';
import { defineEmits } from 'vue';
import { any, number } from 'vue-types';
const emit = defineEmits(['alertSome']);
function upSwitch(key, value) {
  emit('subIsSwitch');
  if (key) {
    let obj = {};
    obj.value = value;
    obj.key = key;
    emit('activeRainfallData', obj);
  }
}
const props = defineProps({
  dataObj: { type: Object, default: {} },
  maxBox: { type: any, default: 0 },
});
</script>
<style lang="less" scoped>
.rainfall-partition {
  // height: 24vh;
  height: 280px;
  overflow-y: auto;
  margin: 0 10px;
}
.rp-list {
  margin-top: 7px;
  cursor: pointer;
}
.rp-title {
  color: rgba(255, 255, 255, 0.87);
  font-size: 14px;
}
.rp-box {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 10px;
  div:nth-child(1) {
    width: 280px;
  }
  div:nth-child(2) {
    margin-top: -8px;
    color: #ffffff;
    font-size: 16px;
    margin-right: 10px;
  }
}
</style>
