<template>
  <div id="TopBox">
    <div
      :class="['part', checkedKey == item.key ? 'changed' : '']"
      v-for="item in headArr"
      :key="item.key"
      @click="changeHeadData(item.key)"
    >
      <img :src="getImgMonitorIcon(item.imgUrl)" :alt="item.name" />
      <div class="FontBox">
        <div class="label">{{ item.name }}</div>
        <div class="value">
          {{ item.value }}
        </div>
      </div>
    </div>
  </div>
  <div id="LeftBox">
    <div class="ListBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font" @click="NLFXMN()">内涝风险模拟</div>
        <div class="ListBoxHeader_Sel">
          <el-select
            v-model="AllData.Echarts1SelValue"
            placeholder="请选择"
            @change="getDataForEcharts1()"
          >
            <el-option
              v-for="item in AllData.Echarts1SelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div
        class="ListBoxBody"
        v-loading="loading1"
        element-loading-text="加载中..."
        element-loading-background="rgba(0, 0, 0,1)"
      >
        <div id="Echarts1"></div>
        <!-- <el-empty
          :image-size="80"
        /> -->
      </div>
    </div>
    <div class="ListBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font">典型下垫面SS总量削减率分析</div>
      </div>
      <div
        class="ListBoxBody"
        v-loading="loading2"
        element-loading-text="加载中..."
        element-loading-background="rgba(0, 0, 0,1)"
      >
        <div id="Echarts2"></div>
        <!-- <el-empty
          :image-size="80"
        /> -->
      </div>
    </div>
    <div class="ListBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font">排水口流量对比分析</div>
        <div class="ListBoxHeader_Sel">
          <el-select
            v-model="AllData.Echarts3SelValue"
            placeholder="请选择"
            @change="getDataForEcharts3()"
          >
            <el-option
              v-for="item in AllData.Echarts3SelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div
        class="ListBoxBody"
        v-loading="loading3"
        element-loading-text="加载中..."
        element-loading-background="rgba(0, 0, 0,1)"
      >
        <div id="Echarts3"></div>
        <!-- <el-empty
          :image-size="80"
        /> -->
      </div>
    </div>
  </div>
  <div id="RightBox">
    <EquipLeft :monitorTargetType="checkedKey"></EquipLeft>
  </div>
  <el-dialog
    v-model="dialogShow"
    title="内涝风险模拟"
    width="1600px"
    append-to-body
    destroy-on-close
    class="equipMonitorDialog"
  >
    <HeaderTabs></HeaderTabs>
  </el-dialog>
</template>

<script setup name="jianCePingJia">
import { ref, reactive, toRefs, onMounted } from "vue";
import bus from "@/bus";
import {
  getSiteInfoCountZH,
  getListByTargetType,
  waterLoggingRiskSim,
  outfallFlowAnalysis,
  UnderSurfaceSsReductionRate,
} from "@/api/dataAnalysis/syntherticData";
import { getImgMonitorIcon } from "@/utils/validate";
import EquipLeft from "./equipLeft.vue"; //左侧内容
import { syncRef } from "@vueuse/core";
import HeaderTabs from "./gongcheng_components/neiLaoFengXianMoNi/headerTabs.vue";
const AllData = reactive({
  Echarts1SelValue: "",
  Echarts1SelOptions: [],
  Echarts3SelValue: "",
  Echarts3SelOptions: [],
});
const headArr = reactive([
{ name: '全部', value: '', imgUrl: 'all_icon.png', key: '' },
  {
    name: '典型项目',
    value: '(4水质、4水位自建 市局20处共享)',
    imgUrl: 'river_icon.png',
    key: 'river',
  },
  {
    name: '典型片区',
    value: '(4水质、4水位自建 市局20处共享)',
    imgUrl: 'lake_icon.png',
    key: 'lake',
  },
  { name: '海绵设施', value: '', imgUrl: 'gqjc_icon.png', key: 'channel' },
  { name: '片区雨量', value: '', imgUrl: 'line_icon.png', key: 'pipeline' },
  { name: '内涝点', value: '', imgUrl: 'nalaodian.png', key: 'waterlogging' },
  // { name: '管网', value: '', imgUrl: 'line_icon.png', key: 'pipeline' },
]);

const checkedKey = ref("");
const myChart1 = shallowRef(null);
const myChart2 = shallowRef(null);
const myChart3 = shallowRef(null);
const { proxy } = getCurrentInstance();
const loading1 = ref(false);
const loading2 = ref(false);
const loading3 = ref(false);

const dialogShow = ref(false);
// 方法
function changeHeadData(warnType) {
  checkedKey.value = warnType;
}
// 获取不同监测类型对应数量
const getStationCount = async () => {
  let res = await getSiteInfoCountZH();
  if (res && res.code == 200) {
    let datas = res.data;
    headArr[0].value = datas.total; //全部
    headArr[1].value = datas.river; //河道
    headArr[2].value = datas.lake; //湖泊监测
    headArr[3].value = datas.channel; //港渠监测
    headArr[4].value = datas.pipeline; //管网
    headArr[5].value = datas.waterlogging; //典型地块
    changeHeadData(""); //默认显示全部
  }
};
// 加载左侧三个echarts
const initEcharts1 = (XData, YData1, YData2) => {
  if (!!myChart1.value) {
    myChart1.value.dispose();
  }
  let dsiab_com = document.getElementById("Echarts1");
  dsiab_com.removeAttribute("_echarts_instance_");
  myChart1.value = proxy.echarts.init(dsiab_com, "dark");
  // 绘制图表
  myChart1.value.setOption({
    backgroundColor: "rgba(128, 128, 128, 0)", //rgba设置透明度
    tooltip: {
      trigger: "axis",
      // axisPointer: {
      //   type: "cross",
      // },
      textStyle: {
        color: "#fff",
      },
      backgroundColor: "rgba(13, 44, 92, 0.7)", // 提示背景颜色，默认为透明度为0.7的黑色
      borderColor: "rgba(116, 187, 250, 1)", // 提示边框颜色
      borderRadius: 4, // 提示边框圆角，单位px，默认为4
      borderWidth: 1, // 提示边框线宽，单位px，默认为0（无边框）
      padding: 15, // 提示内边距，单位px，默认各方向内边距为5，
    },
    grid: {
      left: "10%",
      right: "15%",
      bottom: "15%",
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: "#666",
          },
        },
        data: XData,
        axisLabel: {
          fontSize: 10,
        },
        // boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "液位(m)",
        position: "left",
        max: Math.max(...YData1) * 2,
        min: 0,
        // alignTicks: true,
        axisLine: {
          lineStyle: {
            color: "#43E08D",
          },
        },
        axisLabel: {
          formatter: "{value} ",
          formatter: (value) => {
            return Number.isInteger(value) ? value : ""; // 判断y轴数值为整数的才显示
          },
        },
      },
      {
        type: "value",
        name: "雨强(mm)",
        max: Math.max(...YData2) * 2,
        min: 0,
        minInterval: 1,
        // alignTicks: true,
        position: "right",
        nameLocation: "start",
        inverse: true,
        axisLine: {
          lineStyle: {
            color: "#1093FA",
          },
        },
        axisLabel: {
          formatter: "{value}",
          formatter: (value) => {
            return Number.isInteger(value) ? value : ""; // 判断y轴数值为整数的才显示
          },
        },
      },
    ],

    series: [
      {
        name: "液位",
        type: "line",
        data: YData1,
        smooth: true,
        itemStyle: {
          color: "#43E08D",
        },
        areaStyle: {
          color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#43e08d96",
            },
            {
              offset: 1,
              color: "#43E08D30",
            },
          ]),
        },
      },
      {
        name: "雨强",
        type: "bar",
        yAxisIndex: 1,
        data: YData2,
        barWidth: "10.5px",
        itemStyle: {
          color: new proxy.echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: "#1093FA" },
            { offset: 1, color: "#1093FA30" },
          ]),
          borderRadius: [0, 0, 15, 15],
        },
      },
    ],
  });
};
const initEcharts2 = (XData, YData1) => {
  if (!!myChart2.value) {
    myChart2.value.dispose();
  }
  let dsiab_com = document.getElementById("Echarts2");
  dsiab_com.removeAttribute("_echarts_instance_");
  myChart2.value = proxy.echarts.init(dsiab_com, "dark");
  // 绘制图表
  myChart2.value.setOption({
    backgroundColor: "rgba(128, 128, 128, 0)", //rgba设置透明度
    legend: {
      data: ["SS总量削减率"],
      icon: "circle", //图例前面的图标形状
    },
    tooltip: {
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      backgroundColor: "rgba(13, 44, 92, 0.7)", // 提示背景颜色，默认为透明度为0.7的黑色
      borderColor: "rgba(116, 187, 250, 1)", // 提示边框颜色
      borderRadius: 4, // 提示边框圆角，单位px，默认为4
      borderWidth: 1, // 提示边框线宽，单位px，默认为0（无边框）
      padding: 15, // 提示内边距，单位px，默认各方向内边距为5，
      formatter: function (params) {
        var relVal = params[0].name;
        for (var i = 0; i < params.length; i++) {
          relVal +=
            "<br/>" +
            params[i].marker +
            params[i].seriesName +
            " : " +
            params[i].value +
            "%";
        }
        return relVal;
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: XData,
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 100,
      axisLabel: {
        formatter: "{value} %",
      },
    },
    series: [
      {
        name: "SS总量削减率",
        type: "line",
        smooth: true,
        data: YData1,
        lineStyle: {
          color: "#1093FA", // 设置线的颜色
        },
        itemStyle: {
          //下面是拐点样式配置属性
          color: "#1093FA", //这里设置的拐点颜色
          borderWidth: 3, //  拐点边框宽度
          shadowBlur: 2, //  阴影渐变范围控制
        },
        symbol: "circle", //拐点的形状
        symbolSize: 8, //拐点大小
      },
    ],
  });
};
const initEcharts3 = (XData, YData1, YData2, YData3) => {
  if (!!myChart3.value) {
    myChart3.value.dispose();
  }
  let dsiab_com = document.getElementById("Echarts3");
  dsiab_com.removeAttribute("_echarts_instance_");
  myChart3.value = proxy.echarts.init(dsiab_com, "dark");
  // 绘制图表
  myChart3.value.setOption({
    backgroundColor: "rgba(128, 128, 128, 0)", //rgba设置透明度
    legend: {
      data: ["降雨量(mm)", "改造前流量(L/S)", "改造后流量(L/S)"],
      icon: "rect", //图例前面的图标形状
    },
    tooltip: {
      trigger: "axis",
      // axisPointer: {
      //   type: "cross",
      // },
      textStyle: {
        color: "#fff",
      },
      backgroundColor: "rgba(13, 44, 92, 0.7)", // 提示背景颜色，默认为透明度为0.7的黑色
      borderColor: "rgba(116, 187, 250, 1)", // 提示边框颜色
      borderRadius: 4, // 提示边框圆角，单位px，默认为4
      borderWidth: 1, // 提示边框线宽，单位px，默认为0（无边框）
      padding: 15, // 提示内边距，单位px，默认各方向内边距为5，
    },
    grid: {
      left: "10%",
      right: "15%",
      bottom: "15%",
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: "#666",
          },
        },
        data: XData,
        axisLabel: {
          fontSize: 10,
        },
        // boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "流量(L/S)",
        max: Math.max(...YData3, ...YData2) * 2,
        min: 0,
        alignTicks: true,
        position: "left",
        axisLine: {
          lineStyle: {
            color: "#1093FA",
          },
        },
        axisLabel: {
          formatter: "{value}",
          formatter: (value) => {
            return Number.isInteger(value) ? value : ""; // 判断y轴数值为整数的才显示
          },
        },
      },
      {
        type: "value",
        name: "降雨量(mm)",
        position: "right",
        minInterval: 1,
        nameLocation: "start",
        inverse: true,
        max: Math.max(...YData1) * 2,
        min: 0,
        // alignTicks: true,
        axisLine: {
          lineStyle: {
            color: "#43E08D",
          },
        },
        axisLabel: {
          formatter: "{value} ",
          formatter: (value) => {
            return Number.isInteger(value) ? value : ""; // 判断y轴数值为整数的才显示
          },
        },
      },
    ],

    series: [
      {
        name: "降雨量(mm)",
        type: "line",
        data: YData1,
        yAxisIndex: 1,
        smooth: true,
        itemStyle: {
          color: "rgba(160, 173, 202, 1)",
        },
        areaStyle: {
          color: new proxy.echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: "rgba(160, 173, 202, 0.8)",
            },
            {
              offset: 1,
              color: "rgba(160, 173, 202, 0.1)",
            },
          ]),
        },
      },
      {
        name: "改造前流量(L/S)",
        type: "bar",
        data: YData2,
        barWidth: "5px",
        itemStyle: {
          color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(255, 159, 101, 1)" },
            { offset: 1, color: "rgba(255, 159, 101, 0.3)" },
          ]),
          borderRadius: [15, 15, 0, 0],
        },
      },
      {
        name: "改造后流量(L/S)",
        type: "bar",
        data: YData3,
        barWidth: "5px",
        itemStyle: {
          color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(86, 181, 255, 1)" },
            { offset: 1, color: "rgba(86, 181, 255, 0.3)" },
          ]),
          borderRadius: [15, 15, 0, 0],
        },
      },
    ],
  });
};
//echarts自适应
function resizeTheChart() {
  if (myChart1.value) {
    myChart1.value.resize();
  }
  if (myChart2.value) {
    myChart2.value.resize();
  }
  if (myChart3.value) {
    myChart3.value.resize();
  }
}
// 获取三个Echarts的数据,并渲染
const getDataForEcharts1 = async () => {
  loading1.value = true;
  waterLoggingRiskSim({
    stCode: AllData.Echarts1SelValue,
  }).then((res) => {
    if (res.code == 200) {
      loading1.value = false;
      initEcharts1(res.data.timeList, res.data.levelList, res.data.rainList);
    }
  });
};

// 获取三个Echarts的数据,并渲染
const getDataForEcharts2 = async () => {
  loading2.value = true;
  UnderSurfaceSsReductionRate().then((res) => {
    if (res.code == 200) {
      loading2.value = false;
      initEcharts2(res.data.timeList, res.data.rateList);
    }
  });
};
// 获取三个Echarts的数据,并渲染
const getDataForEcharts3 = async () => {
  loading3.value = true;
  outfallFlowAnalysis({
    stCode: AllData.Echarts3SelValue,
  }).then((res) => {
    if (res.code == 200) {
      loading3.value = false;
      initEcharts3(
        res.data.timeList,
        res.data.rainList,
        res.data.beforeFlowList,
        res.data.afterFlowList
      );
    }
  });
};
// 根据类型获取点位集合
const getSiteListforType = () => {
  getListByTargetType({
    monitorTargetType: "waterlogging",
  }).then((res) => {
    if (res.code == 200) {
      AllData.Echarts1SelOptions = res.data;
      AllData.Echarts1SelValue = AllData.Echarts1SelOptions[0].value;
      getDataForEcharts1();
    }
  });
  getListByTargetType({
    monitorTargetType: "outfall",
  }).then((res) => {
    if (res.code == 200) {
      AllData.Echarts3SelOptions = res.data;
      AllData.Echarts3SelValue = AllData.Echarts3SelOptions[0].value;
      getDataForEcharts3();
    }
  });
};
// 内涝风险模拟
const NLFXMN = () => {
  dialogShow.value = true;
};

onMounted(() => {
  getStationCount();
  getSiteListforType();
  getDataForEcharts2();
  window.addEventListener("resize", resizeTheChart);
});
</script>

<style lang="scss" scoped>
#TopBox {
  position: absolute;
  top: 20px;
  left: 493px;
  width: 1070px;
  height: 100px;
  background: linear-gradient(0deg, rgba(1, 20, 49, 0.8) 0%, rgba(0, 30, 75, 0.8) 100%);
  border-radius: 4px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .part {
    line-height: 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 100px;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
    img {
      margin-right: 6px;
      width: 26px;
      height: 26px;
    }
    .FontBox {
      display: flex;
      height: 30px;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-start;
      .label {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
      }
      .value {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #3782ff;
      }
    }

    &:hover {
      background: linear-gradient(0deg, #011739 0%, #003a91 100%);
      border-radius: 4px 0px 0px 4px;
      // border: 1px solid #3782ff;
    }
  }
  .changed {
    background: linear-gradient(0deg, #011739 0%, #003a91 100%);
    border-radius: 4px 0px 0px 4px;
    animation-duration: 1s;
  }
}
#LeftBox {
  position: absolute;
  left: 20px;
  top: 20px;
  height: calc(100% - 20px);
  width: 455px;
  z-index: 999;

  .ListBox {
    width: 100%;
    height: 33.3%;

    .ListBoxHeader {
      height: 38px;
      width: 100%;
      background: url("@/assets/images/Sponge_screen/ListBox_Header_BG.png");
      box-sizing: border-box;
      padding-left: 42px;
      padding-right: 20px;

      .ListBoxHeader_font {
        width: auto;
        height: 38px;
        line-height: 38px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
        float: left;
      }
      .ListBoxHeader_Sel {
        width: 140px;
        height: 38px;
        line-height: 38px;
        float: right;
        background: #011431b9;
      }
    }
    .ListBoxBody {
      width: 100%;
      height: calc(100% - 40px);
      background: linear-gradient(0deg, #011431 0%, rgba(1, 20, 49, 0.8) 100%);

      #Echarts1,
      #Echarts2,
      #Echarts3 {
        width: 100%;
        height: 100%;
      }
    }
  }
}
#RightBox {
  position: absolute;
  right: 20px;
  top: 20px;
  height: calc(100% - 20px);
  width: 322px;
  background: linear-gradient(0deg, #011431 0%, rgba(1, 20, 49, 0.8) 100%);
  z-index: 999;
}
</style>
<style lang="scss">
.equipMonitorDialog {
  height: 800px;
  overflow: auto;
  .el-dialog__body {
    width: 100%;
    height: calc(100% - 60px);
  }
}
</style>