<template>
  <!-- 排水体系 -->
  <div class="DrainageSystem">
    <!-- 中间的污水/雨水切换 -->
    <div class="TypeChangeBox">
      <div
        class="TypeBtn"
        v-for="(item, index) in AllData.yw_type"
        :class="[AllData.TypeID == item.key ? 'TypeBtnCheck' : '']"
        @click="TypeClick(item)"
      >
        <span class="TypenName">{{ item.name }}</span>
      </div>
    </div>
    <YSIndex v-if="AllData.TypeID == 'rain'"></YSIndex>
  </div>
</template>

<script setup name="DrainageSystem">
  import {ref, reactive, toRefs, onMounted, onBeforeUnmount} from "vue";
import bus from "@/bus";
// 引入接口
import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
// 引入echarts组件
// 纵向立体柱状体以及标线和折现
import MonBarCharts from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonBarCharts.vue";
//横向的两组柱状图堆叠
import MonBarChartsLeft from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonBarChartsLeft.vue";
// 纵向的两条折现
import MonLineChartsLeft from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonLineChartsLeft.vue";
// 面板控制组件
import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
const showPanel = ref(false); //面板展开收起
const PanelChange = (val) => {
  showPanel.value = val;
};

=======
import { ref, reactive, toRefs, onMounted } from "vue";
import YSIndex from "./YSIndex.vue";
>>>>>>> e667c948d24ce7ebd6d93760b5f869c8372212a5
const AllData = reactive({
  yw_type: [
    { name: "污水体系", key: "sewage",
      values: [
        {key: "污水分区", visible: true},
        {key: "尾水路径", visible: true},
      ]},
    {
      name: "雨水体系", key: "rain",
      values: [
        {key: "雨水分区", visible: true},
        {key: "高清地图", visible: true},
        {key: "outlet_info2", visible: false},
        {key: "排口流向", visible: false},
        {key: "排口流向1", visible: false},
        {key: "rainwater_pipeline_quality1", visible: false}
      ]
    },
  ],
});

const TypeClick = (item) => {
  let type = item.key;
  TypeClick_();
  AllData.regionGrade = "one";
  AllData.regionName = "";
  newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  // 切换时回到默认一级分区
  AllData.TypeID = type;
};
const TypeClick_ = (item)=>{
  closeAllLayer();
  bus.emit("clearTemporaryData");
  const { setLayerVisible } = events_params;
  newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  item.values && item.values.filter((i) => i.visible).forEach((i) => bus.emit(setLayerVisible.key, { layername: i.key, isCheck: true }));
};
const events_params = {
  setHighlight: { key: "setHighlight" },
  setLayerVisible: { key: "setLayerVisible" },
  clearTemporaryData: { key: "clearTemporaryData" },
};
const closeAllLayer = () => {
  const { setLayerVisible, setHighlight } = events_params;
  AllData.yw_type.map((i) => i.values).filter(Boolean).flat().forEach((i) => bus.emit(setLayerVisible.key, { layername: i.key, isCheck: false,values:i.values }));
  bus.emit(setHighlight.key, []);
};
// 清除面包屑的数据
const clearMianBaoData = () => {
  AllData.TitleName[1] = {
    abbreviation: "",
    Name: "",
    id: "",
    grade: "two",
    sort: 1,
  };
  AllData.TitleName[2] = {
    abbreviation: "",
    Name: "",
    id: "",
    grade: "three",
    sort: 2,
  };
  AllData.TitleName[3] = {
    abbreviation: "",
    Name: "",
    id: "",
    grade: "four",
    sort: 3,
  };
  AllData.TitleName[4] = {
    abbreviation: "",
    Name: "",
    id: "",
    grade: "five",
    sort: 4,
  };
};
// 获取数据  一级界面的流域管网/二级界面的管网统计/三级界面的管网统计
const getData1 = () => {
  MonitorAPI.pipelineProblemStatistic({
    regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
    regionName: AllData.regionName, //分区名称
    regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
  }).then((res) => {
    if (res && res.code == 200) {
      if (AllData.regionGrade == "one") {
        // 一级Ecahrts 名称
        AllData.chartData2.yAxis_Name = "摸排管网";
      }
      if (AllData.regionGrade == "two") {
        // 二级Ecahrts 名称
        AllData.chartData2.yAxis_Name = "问题管网";
      }
      if (AllData.regionGrade == "three") {
        // 三级Ecahrts 名称
        AllData.chartData2.yAxis_Name = "摸排管网";
      }
      //   数据赋值
      AllData.chartData2.xAxis = res.data.regionNameList;
      AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
      AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
      AllData.chartData2.yAxis2_Name = "总长度";
      AllData.refresh2++;
    }
  });
};

// 获取数据  二级界面的管网监测/四级界面的历史风险
const getData2 = () => {
  MonitorAPI.pipelineRunRiskStatistic({
    regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
    regionName: AllData.regionName, //分区名称
    regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
    // startTime: "", //开始时间（仅历史风险需要用到）
    // endTime: "", //结束时间（仅历史风险需要用到）
  }).then((res) => {
    if (res && res.code == 200) {
      if (AllData.regionGrade == "two") {
        AllData.chartData1.xAxis = res.data.regionNameList;
        AllData.chartData1.yAxis = res.data.pipelinePointCount; //运行风险点位数
        AllData.chartData1.yAxis2 = res.data.pipelineRunRiskPointCount; //管网监测点位数
        AllData.chartData1.yAxis_Name = "运行风险数";
        AllData.chartData1.yAxis2_Name = "点位数";
        AllData.refresh1++;
      }
      if (AllData.regionGrade == "four") {
        AllData.chartData3.xAxis = res.data.regionNameList;
        AllData.chartData3.yAxis = res.data.overFlowRiskTimesList; //溢流风险
        AllData.chartData3.yAxis2 = res.data.fullPipeTimesList; //满管风险
        AllData.chartData3.yAxis_Name = "溢流风险";
        AllData.chartData3.yAxis2_Name = "满管风险";
        AllData.refresh3++;
      }
    }
  });
};
onMounted(() => {
  let initeGLTimer = setInterval(() => {
    if (!newfiberMap) return;
    TypeClick(AllData.yw_type[1]);
    bus.on("FenQuClick", FenQuClick);
    // bus.on("openJXFXDialog", openJXFXDialog);
    clearInterval(initeGLTimer);
  }, 100);

  bus.on(mapInitBusName, () => TypeClick(AllData.yw_type[0]);
});

  onBeforeUnmount(() => {
    bus.off("FenQuClick");
    bus.off("openJXFXDialog");
    bus.off(mapInitBusName);
    closeAllLayer();
  });
=======
  AllData.TypeID = item.key;
};

onMounted(() => {});

onBeforeUnmount(() => {});
>>>>>>> e667c948d24ce7ebd6d93760b5f869c8372212a5
</script>

<style lang="scss" scoped>
.DrainageSystem {
  .TypeChangeBox {
    left: 50%;
    position: fixed;
    top: 120px;
    width: 300px;
    height: 39px;
    margin-left: -150px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    z-index: 10;

    .TypeBtn {
      width: 138px;
      height: 39px;
      background: url("@/assets/images/pictureOnMap/JCFX/MoRen.png") no-repeat center;
      float: left;
      cursor: pointer;
      .TypenName {
        display: inline-block;
        width: 138px;
        height: 39px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        line-height: 36px;
        text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
        // background: linear-gradient(
        //   180deg,
        //   rgba(49, 190, 255, 0.3) 0%,
        //   rgba(239, 252, 254, 1) 40%,
        //   rgba(239, 252, 254, 1) 100%
        // );
        // background-clip: text;
        // -webkit-text-fill-color: transparent;
        text-align: center;
      }
    }
    .TypeBtnCheck {
      background: url("@/assets/images/pictureOnMap/JCFX/XuanZhong.png") no-repeat center;
    }
  }
}
</style>