<template>
  <!-- 排水设施 -->
  <div class="tabRight" v-if="tabShowWL == 1">
    <!-- 厂站设施 -->
    <div class="riverPK">
      <div class="selectTitle">
        <div class="name">排水设施</div>
      </div>
      <div class="flex flex-wrap">
        <div class="partBox flex flex-align-center" style="width: 100%">
          <img src="@/assets/images/gisMap/ysbz.png" alt="管网" class="img" />
          <div class="cont">
            <p class="line flex flex-justcontent-spacebetween">
              雨水泵站 <span>{{ allData.rainWaterCount }} 座</span>
            </p>
            <p class="value flex flex-justcontent-spacebetween" style="font-size: 13px">
              总规模 <span>{{ allData.rainWaterSum }} 立方米/秒</span>
            </p>
          </div>
        </div>
        <div class="partBox flex flex-align-center" style="width: 100%">
          <img src="@/assets/images/gisMap/plbz.png" alt="管网" class="img" />
          <div class="cont">
            <p class="line flex flex-justcontent-spacebetween">
              排涝泵站 <span>{{ allData.drainFloodedCount }} 座</span>
            </p>
            <p class="value flex flex-justcontent-spacebetween" style="font-size: 13px">
              总规模 <span>{{ allData.drainFloodedSum }} 立方米/秒</span>
            </p>
          </div>
        </div>
        <div class="partBox flex flex-align-center" style="width: 100%">
          <img src="@/assets/images/gisMap/dfbz.png" alt="管网" class="img" />
          <div class="cont">
            <p class="line flex flex-justcontent-spacebetween">
              污水泵站 <span>{{ allData.sewageWaterCount }} 座</span>
            </p>
            <p class="value flex flex-justcontent-spacebetween" style="font-size: 13px">
              总规模 <span>{{ allData.sewageWaterSum }} 万吨/日</span>
            </p>
          </div>
        </div>
        <div class="partBox flex flex-align-center" style="width: 100%">
          <img src="@/assets/images/gisMap/wsclc.png" alt="管网" class="img" />
          <div class="cont">
            <p class="line flex flex-justcontent-spacebetween">
              污水处理厂 <span>{{ allData.sewageFactoryCount }}座</span>
            </p>
            <p class="value flex flex-justcontent-spacebetween" style="font-size: 13px">
              总规模 <span>{{ allData.sewageFactorySum }}万吨/日</span>
            </p>
          </div>
        </div>
        <div class="partBox flex flex-align-center" style="width: 100%">
          <img src="@/assets/images/gisMap/gwzcd.png" alt="管网" class="img" />
          <div class="cont">
            <p class="line">管网总长度</p>
            <!-- <p class="value">{{ allData.pipeLineObj.total.length }} 千米</p> -->
            <p class="value">632 千米</p>
          </div>
        </div>
        <div class="partBox flex flex-align-center" style="width: 100%">
          <img src="@/assets/images/gisMap/ysgw.png" alt="管网" class="img" />
          <div class="cont">
            <p class="line">雨水管网</p>
            <!-- <p class="value">{{ allData.pipeLineObj.Rain.length }} 千米</p> -->
            <p class="value">357 千米</p>
          </div>
        </div>
        <div class="partBox flex flex-align-center" style="width: 100%">
          <img src="@/assets/images/gisMap/wsgw.png" alt="管网" class="img" />
          <div class="cont">
            <p class="line">污水管网</p>
            <!-- <p class="value">{{ allData.pipeLineObj.Sewage.length }} 千米</p> -->
            <p class="value">275 千米</p>
          </div>
        </div>
        <!-- <div class="partBox flex flex-align-center" style="width: 100%">
          <img src="@/assets/images/gisMap/jcj.png" alt="管网" class="img" />
          <div class="cont">
            <p class="line">检查井</p>
            <p class="value">{{ allData.jcjObj.total.count }} 个</p>
          </div>
        </div> -->
        <!-- <div class="partBox flex flex-align-center" style="width: 100%">
          <img src="@/assets/images/gisMap/yspk.png" alt="管网" class="img" />
          <div class="cont">
            <p class="line">雨水排口</p>
            <p class="value">{{ allData.jcjObj.RainPort.count }} 个</p>
          </div>
        </div>
        <div class="partBox flex flex-align-center" style="width: 100%">
          <img src="@/assets/images/gisMap/hlz.png" alt="管网" class="img" />
          <div class="cont" style="flex: none">
            <p class="line">溢流口</p>
            <p class="value">{{ allData.jcjObj.Overflow.count }}个</p>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script setup name="tabRight">
import chartOption from '@/components/Echarts/pieChart_1.js';
import { pipeLineStatistics, pipePointStatistics, factoryStatistics, drainageStatistics } from '@/api/floodSys/oneMap.js';
import bus from '@/bus';
import { nextTick } from 'vue';
const { proxy } = getCurrentInstance();
const allData = reactive({
  pipeLineObj: { total: { length: null }, Rain: { length: null }, Sewage: { length: null }, Mix: { length: null } },
  jcjObj: { total: { count: null }, RainPort: { count: null }, Overflow: { count: null } },

  rainWaterCount: null,
  rainWaterSum: null,
  sewageWaterCount: null,
  sewageFactoryCount: null,
  sewageFactorySum: null,
  sewageWaterSum: null,
  drainFloodedCount: null,
  drainFloodedSum: null,
  gateStationCount: null,
  gateStationSum: null,
});
const tabShowWL = ref(1);
const tabShowWL2 = ref(1);
//获取管网统计
const getPipeLineStatis = async () => {
  let res = await pipeLineStatistics();
  if (res && res.code == 200) {
    allData.pipeLineObj = res.data;
  }
};
//获取检查井统计
const getPipePointStatis = async () => {
  let res = await pipePointStatistics();
  if (res && res.code == 200) {
    allData.jcjObj = res.data || {};
  }
};
//获取厂站统计
const getfactoryStatis = async () => {
  let res = await factoryStatistics();
  if (res && res.code == 200) {
    let data = res.data;
    allData.rainWaterCount = data.rain_water.count;
    allData.rainWaterSum = data.rain_water.sum;
    allData.sewageWaterCount = data.sewage_water.count;
    allData.sewageWaterSum = data.sewage_water.sum;
    allData.sewageFactoryCount = data.sewageFactory.count;
    allData.sewageFactorySum = data.sewageFactory.sum;
    allData.drainFloodedCount = data.drain_flooded.count;
    allData.drainFloodedSum = data.drain_flooded.sum;
    allData.gateStationCount = data.gate_station.count;
    allData.gateStationSum = data.gate_station.sum;
  }
};
//获取入河排口统计
const getdrainagetStatis = async () => {
  let res = await drainageStatistics();
  if (res && res.code == 200) {
    let datas = res.data;
    if (datas.length == 0) {
      return;
    } else {
      chartOption.floodOneMapPSPK.legend.data = [datas[0].name, datas[1].name];
      chartOption.floodOneMapPSPK.xAxis[0].data = datas[0].xdata;
      chartOption.floodOneMapPSPK.series[0].name = datas[0].name;
      chartOption.floodOneMapPSPK.series[0].data = datas[0].ydata;
      chartOption.floodOneMapPSPK.series[1].name = datas[1].name;
      chartOption.floodOneMapPSPK.series[1].data = datas[1].ydata;
      // 设置鼠标滚轮放大缩小展示数据区间
      chartOption.floodOneMapPSPK.dataZoom = [{ type: 'inside', startValue: datas[0].xdata[datas[0].xdata.length / 2] }];
      if (datas[0].xdata.length > 0) {
        chartOption.floodOneMapPSPK.graphic.invisible = true;
      } else {
        chartOption.floodOneMapPSPK.graphic.invisible = false;
      }
      initEcharts1();
    }
  }
};
// 管网资产饼图
let chart1 = null;
const initEcharts1 = () => {
  chart1 && chart1.dispose();
  chart1 = proxy.echarts.init(document.getElementById('chartRiver'));
  chart1.clear();
  chart1.setOption(chartOption.floodOneMapPSPK);
};
// 获取数据
function getPSData() {
  getPipeLineStatis();
  getPipePointStatis();
  getfactoryStatis();
  getdrainagetStatis();
}

onMounted(() => {
  getPSData();
  bus.on('changeTableContent', val => {
    if (val == 1) {
      tabShowWL.value = val;
      nextTick(() => {
        getPSData();
        bus.emit('initeLayer', ['YSBZ', 'PLBZ', 'WSBZ', 'WSCLC', 'wsLine1', 'ysLine1']);
      });
    } else {
      tabShowWL.value = null;
    }
  });
});
onBeforeUnmount(() => {
  bus.off('changeTableContent');
});
</script>
<style lang="scss" scoped>
.tabRight {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: absolute;
  background: #00314e;
  border: 1px solid #094065;
  z-index: 115;
  .partBox {
    border: 1px solid #0073a5;
    border-radius: 8px;
    background: linear-gradient(180deg, #0073a5 -101.06%, rgba(0, 115, 165, 0) 87.65%);
    margin: 5px 10px;
    .img {
      width: 32px;
      height: 32px;
      margin: 0px 20px;
    }
    .cont {
      font-size: 16px;
      flex: 1;
      margin-right: 10px;
      .value {
        font-size: 12px;
        margin: 6px 0px;
      }
      .line {
        color: #00d1ff;
        font-size: 15px;
        border-bottom: 1px solid #0073a5;
        padding: 5px 0px;
      }
    }
  }
  #chartRiver {
    width: 100%;
    height: 300px;
  }
}
</style>