<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>
    <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
    <Transition name="fade_left">
      <div :class="['moduleBox', 'moduleBoxLeft']" v-show="!showPanel">
        <!-- 顶部公共标题 -->
        <div class="CrumbesTitle">
          <!-- 一级 -->
          <span
            class="crumbs"
            v-for="item in AllData.TitleName"
            :key="item.grade"
            v-show="item.abbreviation"
            @click="MBClick(item)"
          >
            {{ item.grade != "one" ? "/" : "" }}
            {{ item.abbreviation ? item.abbreviation : "" }}
          </span>
        </div>
        <div class="modular1">
          <div class="leve2Title">河湖水情</div>
          <div class="modularBody">
            <MonBarCharts
              v-if="AllData.regionGrade == 'two'"
              :data="AllData.chartData1"
              :refresh="AllData.refresh1"
              :ClickData="AllData.ClickData1"
            ></MonBarCharts>
          </div>
        </div>
        <div class="modular2">
          <div class="leve2Title">流域管网</div>
          <div class="modularBody">
            <MonBarChartsLeft
              v-if="
                AllData.regionGrade == 'one' ||
                AllData.regionGrade == 'two' ||
                AllData.regionGrade == 'three'
              "
              :data="AllData.chartData2"
              :refresh="AllData.refresh2"
              :ClickData="AllData.ClickData2"
            ></MonBarChartsLeft>
          </div>
        </div>
        <div class="modular3">
          <div class="leve2Title">河湖排口</div>
          <div class="modularBody">
            <MonLineChartsLeft
              v-if="AllData.TypeID == 'four'"
              :data="AllData.chartData3"
              :refresh="AllData.refresh3"
              :ClickData="AllData.ClickData3"
            />
          </div>
        </div></div
    ></Transition>
    <Transition name="fade_right">
      <div
        :class="['moduleBox', 'moduleBoxRight']"
        v-show="!showPanel && AllData.RightShow"
      >
        <!-- 顶部公共标题 -->
        <div class="CrumbesTitle">
          <!-- 一级 -->
          <span
            class="crumbs"
            v-for="item in AllData.TitleName"
            :key="item.grade"
            v-show="item.abbreviation"
          >
            {{ item.grade != "one" ? "/" : "" }}
            {{ item.abbreviation ? item.abbreviation : "" }}
          </span>
        </div>
        <div class="modular1">
          <!-- <div class="leve2Title">河湖水情</div>
          <div class="modularBody"></div> -->
        </div>
        <div class="modular2">
          <div class="leve2Title">水量分析</div>
          <div class="modularBody"></div>
        </div>
        <div class="modular3">
          <div class="leve2Title">管网本底</div>
          <div class="modularBody"></div>
        </div></div
    ></Transition>
  </div>
</template>

<script setup name="DrainageSystem">
import { ref, reactive, toRefs, onMounted } 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;
};

const AllData = reactive({
  regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
  regionName: "", //分区名称
  RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
  yw_type: [
    { name: "污水体系", value: "污水分区,尾水路径", key: "sewage" },
    {
      name: "雨水体系",
      value:
        "雨水分区,雨水系统流向,雨水系统流向1,rain_water_pump_station_info,water_gate_info,storage_tank_info",
      key: "rain",
    },
  ],
  TitleName: [
    {
      abbreviation: "一级分区", //分区缩写-动态
      id: "", //分区信息-动态
      grade: "one", //分区层级-静态(查询数据用)
      sort: 0, //面包屑的顺序
      Name: "", //全称
    },
    {
      abbreviation: "", //分区缩写-动态
      id: "", //分区信息-动态
      grade: "two", //分区层级-静态
      sort: 1, //面包屑的顺序
      Name: "", //全称
    },
    {
      abbreviation: "", //分区缩写-动态
      id: "", //分区信息-动态
      grade: "three", //分区层级-静态
      sort: 2, //面包屑的顺序
      Name: "", //全称
    },
    {
      abbreviation: "", //分区缩写-动态
      id: "", //分区信息-动态
      grade: "four", //分区层级-静态
      sort: 3, //面包屑的顺序
      Name: "", //全称
    },
    {
      abbreviation: "", //分区缩写-动态
      id: "", //分区信息-动态
      grade: "five", //分区层级-静态
      sort: 4, //面包屑的顺序
      Name: "", //全称
    },
  ],
  //   Ecahrts数据
  //   河湖水情
  chartData1: {
    // xAxis: [],
    // yAxis: [],
    // yAxis_Name: "",
    // yAxis2: [],
    // yAxis2_Name: "",
    // yAxis3_line: [],
    // yAxis3_line_Name: "",
    // yAxis4_line: null,
    // yAxis4_line_Name: "",
    xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
    yAxis: ["870", "568", "700", "600", "276", "280"],
    yAxis_Name: "复勘数",
    yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
    yAxis2_Name: "片区管网",
    yAxis3_line: ["1000", "600", "680", "520", "160", "180"],
    yAxis3_line_Name: "报告数",
    yAxis4_line: null,
    yAxis4_line_Name: "",
  },
  refresh1: 0,
  ClickData1: "dgtxg",
  //   流域管网
  chartData2: {
    xAxis: [],
    yAxis: [],
    yAxis2: [],
    yAxis_Name: "",
    yAxis2_Name: "",
  },
  refresh2: 0,
  ClickData2: "dgtxg",
  //   河湖排口
  chartData3: {
    xAxis: [],
    yAxis: [],
    yAxis_Name: "",
    yAxis2: [],
    yAxis2_Name: "",
    yAxis3_line: [],
    yAxis3_line_Name: "",
    yAxis4_line: null,
    yAxis4_line_Name: "",
  },
  refresh3: 0,
  ClickData3: "dgtxg",
});
// 面包屑点击事件
const MBClick = (item) => {
  console.log(item);
  // 赋值需要进行echarts数据请求的数据
  AllData.regionGrade = item.grade;
  AllData.regionName = item.Name;

  // 视角切换
  if (item.sort == 0) {
    // 回到默认图层
    newfiberMap.map.easeTo(newfiberMap.config_.params.init);
    AllData.regionGrade = "one";
    AllData.regionName = "";
    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,
    };
  }
  if (item.sort == 1) {
    bus.emit("panelDataToMap", {
      name: item.abbreviation,
      id: item.id,
    });
    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,
    };
  }
  if (item.sort == 2) {
    bus.emit("panelDataToMap", {
      name: item.abbreviation,
      id: item.id,
    });
    AllData.TitleName[3] = {
      abbreviation: "",
      Name: "",
      id: "",
      grade: "four",
      sort: 3,
    };
    AllData.TitleName[4] = {
      abbreviation: "",
      Name: "",
      id: "",
      grade: "five",
      sort: 4,
    };
  }
  if (item.sort == 3) {
    bus.emit("panelDataToMap", {
      name: item.abbreviation,
      id: item.id,
    });
    AllData.TitleName[4] = {
      abbreviation: "",
      Name: "",
      id: "",
      grade: "five",
      sort: 4,
    };
  }
  // 切换时进行数据请求,默认视角请求

  getData1();
};
// 分区点击切换
const FenQuClick = (properties) => {
  console.log("FenQuClick", properties);
  if (!!!properties.pid) return;
  // 请求面包屑的数据
  let params = {
    regionType: AllData.TypeID,
    id: Number(properties.pid),
  };
  MonitorAPI.lineGrade(params).then((res) => {
    if (res && res.code == 200) {
      // 默认设置基础的分区
      if (AllData.TypeID == "sewage") {
        // 污水
        AllData.TitleName[0].abbreviation = "一级分区";
        AllData.TitleName[0].id = ""; //分区信息-动态
        AllData.TitleName[0].grade = "one"; //分区层级-静态
        AllData.TitleName[0].sort = 0; //面包屑的顺序
        AllData.TitleName[0].Name = ""; //全称
      } else {
        // 雨水
        AllData.TitleName[0].abbreviation = "一级流域";
        AllData.TitleName[0].id = ""; //分区信息-动态
        AllData.TitleName[0].grade = "one"; //分区层级-静态
        AllData.TitleName[0].sort = 0; //面包屑的顺序
        AllData.TitleName[0].Name = ""; //全称
      }
      // 设置1 2 3 4 级分区

      clearMianBaoData();
      //   if (res.data.length == 1) {
      //     // 只有总分区/一级分区
      //     res.data.forEach((element) => {
      //       if (element.grade == "one") {
      //         AllData.TitleName[1] = {
      //           abbreviation: element.shortName,
      //           id: element.id,
      //           grade: "two",
      //           sort: 1,
      //           Name: element.name,
      //         };
      //       }
      //     });
      //   } else if (res.data.length == 2) {
      //     // 只有总分区/一级分区/二级分区

      //     res.data.forEach((element) => {
      //       if (element.grade == "one") {
      //         AllData.TitleName[1] = {
      //           abbreviation: element.shortName,
      //           id: element.id,
      //           grade: "two",
      //           sort: 1,
      //           Name: element.name,
      //         };
      //       }
      //       if (element.grade == "two") {
      //         AllData.TitleName[2] = {
      //           abbreviation: element.shortName,
      //           id: element.id,
      //           grade: "three",
      //           sort: 2,
      //           Name: element.name,
      //         };
      //       }
      //     });
      //   } else if (res.data.length == 3) {
      //     // 只有总分区/一级分区/二级分区/三级分区

      //     res.data.forEach((element) => {
      //       if (element.grade == "one") {
      //         AllData.TitleName[1] = {
      //           abbreviation: element.shortName,
      //           id: element.id,
      //           grade: "two",
      //           sort: 1,
      //           Name: element.name,
      //         };
      //       }
      //       if (element.grade == "two") {
      //         AllData.TitleName[2] = {
      //           abbreviation: element.shortName,
      //           id: element.id,
      //           grade: "three",
      //           sort: 2,
      //           Name: element.name,
      //         };
      //       }
      //       if (element.grade == "three") {
      //         AllData.TitleName[3] = {
      //           abbreviation: element.shortName,
      //           id: element.id,
      //           grade: "four",
      //           sort: 3,
      //           Name: element.name,
      //         };
      //       }
      //     });
      //   } else if (res.data.length == 4) {
      //     // 只有总分区/一级分区/二级分区/三级分区/四级分区
      res.data.forEach((element) => {
        if (element.grade == "one") {
          AllData.TitleName[1] = {
            abbreviation: element.shortName,
            id: element.id,
            grade: "two",
            sort: 1,
            Name: element.name,
          };
        }
        if (element.grade == "two") {
          AllData.TitleName[2] = {
            abbreviation: element.shortName,
            id: element.id,
            grade: "three",
            sort: 2,
            Name: element.name,
          };
        }
        if (element.grade == "three") {
          AllData.TitleName[3] = {
            abbreviation: element.shortName,
            id: element.id,
            grade: "four",
            sort: 3,
            Name: element.name,
          };
        }
        if (element.grade == "four") {
          AllData.TitleName[4] = {
            abbreviation: element.shortName,
            id: element.id,
            grade: "five",
            sort: 4,
            Name: element.name,
          };
        }
      });
      //   }
      // 赋值需要进行echarts数据请求的数据
      AllData.regionGrade =
        res.data.length == 1
          ? "two"
          : res.data.length == 2
          ? "three"
          : res.data.length == 3
          ? "four"
          : "five"; //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
      AllData.regionName = AllData.TitleName[res.data.length].Name;
      if (AllData.regionGrade == "two") {
        // 二级
        console.log("二级");
        getData1();
        getData2();
      } else if (AllData.regionGrade == "three") {
        // 三级
        console.log("三级");
        getData1();
      } else if (AllData.regionGrade == "four") {
        // 四级
        console.log("四级");
        getData2();
      } else {
        // 五级  五级为排水单元,由上可知,因为没有pid 所以此方法无效
        console.log("五级");
      }
    }
  });
};
const TypeClick = (item) => {
  let type = item.key;
  bus.emit("clearTemporaryData");
  AllData.yw_type.forEach((i) =>
    i.value.split(",").forEach((o) => operationLayer(o, false))
  );
  item.value.split(",").forEach((o) => operationLayer(o, true));
  AllData.regionGrade = "one";
  AllData.regionName = "";
  newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  // 切换时回到默认一级分区
  AllData.TypeID = type;
};
const events_params = {
  setHighlight: { key: "setHighlight" },
  setLayerVisible: { key: "setLayerVisible" },
  clearTemporaryData: { key: "clearTemporaryData" },
};
const operationLayer = (name, visible) => {
  const { setLayerVisible, setHighlight } = events_params;
  bus.emit(setLayerVisible.key, { layername: name, isCheck: visible });
};
// 清除面包屑的数据
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);
});

onBeforeUnmount(() => {
  bus.off("FenQuClick");
});
</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;
    }
  }
  .CrumbesTitle {
    width: 100%;
    height: 44px;
    background: url("@/assets/images/pictureOnMap/eachBgc.png") no-repeat center;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .crumbs {
      font-weight: bold;
      font-size: 20px;
      color: #ffffff;
      cursor: pointer;
      &:hover {
        color: #2291e1;
      }
    }
  }
  .modular1,
  .modular2,
  .modular3 {
    width: 100%;
    height: calc((100% - 50px) / 3);

    .modularBody {
      width: 100%;
      height: calc(100% - 50px);

      .FontText {
        width: 100%;
        height: 20px;
        line-height: 20px;
        text-align: right;
        color: rgb(110, 230, 230);
        font-weight: 300;
        font-size: 12px;
      }
    }
  }
}
</style>