<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 YSIndex from "./YSIndex.vue";
// 引入接口
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;
};

const AllData = reactive({
  yw_type: [
    {
      name: "污水体系",
      key: "sewage",
      values: [
        { key: "污水分区", visible: true },
        { key: "尾水路径", visible: true },
      ],
    },
    {
      name: "雨水体系",
      key: "rain",
      values: [
        { key: "雨水分区", visible: true },
        { key: "newfiber-XYZLayer", visible: true },
        { key: "高清地图", visible: true },
        { key: "rain_water_pump_station_info", visible: true },
        { key: "outlet_info2", visible: false },
        { key: "排口流向", visible: false },
        { key: "排口流向1", visible: false },
        { key: "rainwater_pipeline_quality1", visible: false },
      ],
    },
  ],
});

const TypeClick = (item) => {
  TypeClick_(item);
  AllData.TypeID = item.key;
};
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, []);
};

onMounted(() => {
  let initeGLTimer = setInterval(() => {
    if (!newfiberMap) return;
    TypeClick(AllData.yw_type[1]);

    clearInterval(initeGLTimer);
  }, 100);

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

onBeforeUnmount(() => {
  bus.off("FenQuClick");
  bus.off("openJXFXDialog");
  bus.off(mapInitBusName);
  closeAllLayer();
});
</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>