<template>
  <!-- 雨水 -->
  <div class="Rain">
    <div class="small-TitleBox">雨水泵站({{ rainCount }})</div>
    <div class="one" v-loading="chartInfo2.loading" element-loading-background="rgba(122, 122, 122, 0.2)">
      <yushuibengzhanEcharts
        :refresh="chartInfo2.refresh"
        :XAxis="chartInfo2.XAxis"
        :YAxis="chartInfo2.YAxis"
        :typeName="chartInfo2.typeName"
        :zoomData="chartInfo2.zoomData"
      ></yushuibengzhanEcharts>
    </div>
    <div class="small-TitleBox">调蓄池({{ tiaoxuchiCount }})</div>
    <div class="two" v-loading="chartInfo3.loading" element-loading-background="rgba(122, 122, 122, 0.2)">
      <tiaoxuchiEcharts
        :refresh="chartInfo3.refresh"
        :XAxis="chartInfo3.XAxis"
        :YAxis="chartInfo3.YAxis"
        :typeName="chartInfo3.typeName"
      ></tiaoxuchiEcharts>
    </div>
    <div class="small-TitleBox">管网</div>
    <div class="three Gw_center_box">
      <div class="boxitem" v-for="p in centerArr" :key="p">
        <img class="itemimg" :src="p.icon" />
        <div class="name">{{ p.name }}</div>
        <div class="Numbervalue">
          <div class="value" :style="{ color: p.color }">{{ Number(p.value).toFixed(2) || '0' }}</div>
          <div class="unit">{{ p.unit }}</div>
        </div>
      </div>
    </div>
    <div class="small-TitleBox">分流井</div>
    <div class="four" v-loading="chartInfo4.loading" element-loading-background="rgba(122, 122, 122, 0.2)">
      <fenliujinEcharts
        :refresh="chartInfo4.refresh"
        :XAxis="chartInfo4.XAxis"
        :YAxis="chartInfo4.YAxis"
        :typeName="chartInfo4.typeName"
      ></fenliujinEcharts>
    </div>
  </div>
</template>
<script setup name="Rain">
import { ref, reactive, onMounted, nextTick } from 'vue';
const { proxy } = getCurrentInstance();
import yushuibengzhanEcharts from '@/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/yushuibengzhanEcharts.vue';
import fenliujinEcharts from '@/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/fenliujinEcharts.vue';
import tiaoxuchiEcharts from '@/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/tiaoxuchiEcharts.vue';
import { getImageUrl, replaceArrName } from '@/utils/ruoyi';
import { getPumpCount, getStorageCount, getPipeCount, getWellCount } from '@/api/WaterAssets';
const chartInfo2 = ref({
  refresh: 1,
  // XAxis: ['光谷转盘珞喻路', '光谷转盘鲁磨路', '光谷四路', '河湖排涝泵站', '五家湖', '佛祖岭'],
  // YAxis: [50, 145, 34, 170, 144, 220],
  XAxis: [],
  YAxis: [],
  zoomData: [0, 100],
  typeName: '装机功率(kw)',
  loading: true,
});

const rainCount = ref('0');
const tiaoxuchiCount = ref('0');

const chartInfo3 = ref({
  refresh: 1,
  // XAxis: ['锦绣良缘', '赵家池', '黄龙山', '秀湖', '严冬湖西渠'],
  // YAxis:[4, 5, 4, 6, 5, 1, 3],
  XAxis: [],
  YAxis: [],
  typeName: '(万方)',
  loading: true,
});

const chartInfo4 = ref({
  refresh: 1,
  // XAxis: ['红旗渠', '赵家池'],
  // YAxis: [
  //   {
  //     name: '堰门高度',
  //     value: ['5.8', '3.56'],
  //   },
  //   {
  //     name: '闸门高度',
  //     value: ['2', '1.5'],
  //   },
  // ],
  XAxis: [],
  YAxis: [],
  typeName: '(米)',
  loading: true,
});

const centerArr = ref([
  {
    name: '总长',
    value: '0',
    icon: getImageUrl('leftcenterone.png', 'images/shuiwuzichan'),
    color: '#61FAC2',
    unit: 'km',
  },
  {
    name: '市政管网',
    value: '0',
    icon: getImageUrl('leftcentertwo.png', 'images/shuiwuzichan'),
    color: '#61F8FA',
    unit: 'km',
  },
  {
    name: '社区管网',
    value: '0',
    icon: getImageUrl('leftcenterthree.png', 'images/shuiwuzichan'),
    color: '#61CDFA',
    unit: 'km',
  },
]);

//雨水泵站
function GetgetPumpCount() {
  getPumpCount().then(res => {
    // chartInfo2.value.XAxis = res.data.name;
    chartInfo2.value.XAxis = replaceArrName(res.data.name, '泵站');
    chartInfo2.value.YAxis = res.data.value;
    rainCount.value = res.data.total;
    chartInfo2.value.loading = false;

    chartInfo2.value.refresh = Math.random();
  });
}

// 调蓄池
function GetgetStorageCount() {
  getStorageCount().then(res => {
    // chartInfo3.value.XAxis = res.data.name;
    chartInfo3.value.XAxis = replaceArrName(res.data.name, '调蓄池');
    chartInfo3.value.YAxis = res.data.value;
    tiaoxuchiCount.value = res.data.total;
    chartInfo3.value.loading = false;

    chartInfo3.value.refresh = Math.random();
  });
}

// 分流井
function GetgetWellCount() {
  getWellCount().then(res => {
    chartInfo4.value.XAxis = replaceArrName(res.data.name, '分流井');
    // chartInfo4.value.XAxis = res.data.name;
    chartInfo4.value.YAxis = res.data.value;
    chartInfo4.value.loading = false;
    chartInfo4.value.refresh = Math.random();
  });
}

// 管网
function GetgetPipeCount() {
  let params = {
    type: 'YS',
  };
  getPipeCount(params).then(res => {
    centerArr.value[0].value = res.data.total;
    centerArr.value[1].value = res.data.city;
    centerArr.value[2].value = res.data.area;
  });
}

onMounted(() => {
  GetgetPumpCount();
  GetgetStorageCount();
  GetgetPipeCount();
  GetgetWellCount();
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/WaterAssets.scss';

.Rain {
  height: calc(100% - 44px);
  width: 100%;
}

.one {
  height: calc(30% - 35px);
}

.two {
  height: calc(30% - 35px);
}

.three {
  height: 90px;
}

.four {
  height: calc(40% - 168px);
}
</style>