<template>
  <div id="yszrfxJCFX">
    <div id="HeaderEcharts"></div>
    <el-divider>管网历史分析</el-divider>
    <div id="BodyFenXi">
      <div class="list1">
        <div class="listLabel">问题日期</div>
        <div class="listValue">{{ AllData.WTRQ }}</div>
      </div>
      <div class="list1">
        <div class="listLabel">天气情况</div>
        <div class="listValue">{{ AllData.TQ }}</div>
      </div>
      <div class="list2">
        <div class="listLabel">问题分析</div>
        <div class="listValue">
          <p>条件库：</p>
          {{ AllData.TJK }}
          <p>推论库：</p>
          {{ AllData.TLK }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="yszrfxJCFX">
import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import { getEchart } from "@/api/MonitorAssetsOnMap";
import { riskAnalysisReason } from "@/api/MonitoringAnalysis";
import { rainCalendar } from "@/api/FloodControlAndDrainage";

import moment from "moment";
const props = defineProps({
  // 数据id
  dataID: {
    type: String,
  },
  dataCode: {
    type: String,
  },
  arrstcode: {
    type: Array,
  },
  arrid: {
    type: Array,
  },
  Getproperties: {
    type: Object,
  },
});

const AllData = reactive({
  chart: null,
  yAxis: [],
  yAxis_Name: "降雨量",
  yAxis2: [],
  yAxis2_Name: "流速",
  yAxis3: [],
  yAxis3_Name: "水深",
  yAxis4: [],
  yAxis4_Name: "COD",
  xAxis: [],
  TJK: "",
  TLK: "",
  WTRQ: "",
  TQ: "",
});
const init = () => {
  //先获取Dom上的实例
  let chartDom = echarts.getInstanceByDom(document.getElementById("HeaderEcharts"));
  //然后判断实例是否存在，如果不存在，就创建新实例
  if (chartDom == null) {
    chartDom = echarts.init(document.getElementById("HeaderEcharts"));
    var option = {
      tooltip: {
        trigger: "axis",
        backgroundColor: "#004284",
        borderColor: "#0B9BFF",
        borderRadius: 6, // 设置圆角大小
        // 自定义提示框文本样
        textStyle: {
          // 字体颜色
          color: "white",
          // 字体大小
          fontSize: 14,
        },
      },
      legend: {
        data: [
          AllData.yAxis_Name,
          AllData.yAxis2_Name,
          AllData.yAxis3_Name,
          AllData.yAxis4_Name,
        ],
        textStyle: {
          color: "#FFFFFF",
          fontSize: 12,
        },
      },
      grid: {
        left: 100,
        right: 100,
        bottom: 20,
        containLabel: true,
      },

      xAxis: {
        type: "category",
        boundaryGap: true,
        data: AllData.xAxis,
        axisLabel: {
          color: "rgba(255,255,255,1)",
          fontSize: 12,
          fontFamily: "AlibabaPuHuiTi",
        },
      },
      dataZoom: [
        {
          // show: true,
          show: false,
          height: 4,
          bottom: 10,
          start: 0,
          end: 100,
          handleSize: "100%",
          fillerColor: "#94FA41",
          borderColor: "transparent",
          backgroundColor: "rgba(148, 250, 65, 0.2)",
          handleStyle: {
            color: "#94FA41",
          },
          moveHandleSize: 0,
          textStyle: {
            color: "#fff",
          },
        },
        {
          type: "inside",
          show: true,
          height: 15,
          start: 0,
          end: 100,
        },
      ],
      yAxis: [
        {
          name: AllData.yAxis_Name,
          type: "value",
          // minInterval: 1,
          axisLabel: {
            color: "#AAC1CF",
            show: true,
          },
          nameTextStyle: {
            color: "#19D5FF",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "left",
          inverse: true,
          nameLocation: "start",
          offset: 60,
        },
        {
          name: AllData.yAxis2_Name,
          type: "value",
          // minInterval: 1,
          axisLabel: {
            color: "#AAC1CF",
            show: true,
          },
          nameTextStyle: {
            color: "#55FFC5",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "right",
          offset: 60,
        },
        {
          name: AllData.yAxis3_Name,
          type: "value",
          // minInterval: 1,
          axisLabel: {
            color: "#AAC1CF",
            show: true,
          },
          nameTextStyle: {
            color: "#99FF55",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          offset: 0,
        },

        {
          name: AllData.yAxis4_Name,
          type: "value",
          // minInterval: 1,
          axisLabel: {
            color: "#AAC1CF",
            show: true,
          },
          nameTextStyle: {
            color: "#FFC155",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "left",
          offset: 0,
        },
      ],
      series: [
        {
          name: AllData.yAxis_Name,
          type: "bar",
          data: AllData.yAxis,
          barWidth: "30%", // 可以是具体像素值 '20px' 或百分比 '50%'
          // 修改数据点颜色
          itemStyle: {
            borderRadius: [0, 0, 50, 50],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#08B1FF" },
              { offset: 1, color: "#19D6FF" },
            ]), // 数据点颜色
          },
        },
        {
          name: AllData.yAxis2_Name,
          type: "line",
          data: AllData.yAxis2,
          yAxisIndex: 1,
          symbolSize: 7,
          // 修改折线颜色
          lineStyle: {
            color: "#55FFC5", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#55FFC5", // 数据点颜色
            width: 4,
          },
        },
        {
          name: AllData.yAxis3_Name,
          type: "line",
          data: AllData.yAxis3,
          yAxisIndex: 2,
          // 修改折线颜色
          lineStyle: {
            color: "#99FF55", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#99FF55", // 数据点颜色
          },
        },
        {
          name: AllData.yAxis4_Name,
          type: "line",
          data: AllData.yAxis4,
          yAxisIndex: 3,
          // 修改折线颜色
          lineStyle: {
            color: "#FFC155", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#FFC155", // 数据点颜色
          },
        },
      ],
    };
    option && chartDom.setOption(option, true);
    AllData.chart = chartDom;
  }
};
const resizeTheChart = () => {
  if (AllData.chart) {
    AllData.chart.resize();
  }
};
const getChartsData = () => {
  getEchart({
    stType: props.Getproperties.stType,
    stCode: props.Getproperties.stCode,
    dataCode: props.Getproperties.dataCode,
    start: props.Getproperties.daterange
      ? props.Getproperties.daterange[0]
      : moment(localStorage.getItem("JCFXDialogTimer")).format("YYYY-MM-DD") +
        " 00:00:00",
    end: props.Getproperties.daterange
      ? props.Getproperties.daterange[1]
      : moment(localStorage.getItem("JCFXDialogTimer")).format("YYYY-MM-DD") +
        " 23:59:59",
  }).then((res) => {
    if (res && res.code == 200) {
      AllData.xAxis = res.data.times;
      res.data.datas.forEach((element) => {
        switch (element.dataKey) {
          case "cond":
            AllData.yAxis4 = element.datas;
            break;
          case "z":
            AllData.yAxis3 = element.datas;
            break;
          case "va":
            AllData.yAxis2 = element.datas;
            break;
          case "pn05":
            AllData.yAxis = element.datas;
            break;
        }
      });
      init();
    }
  });
};
const getFenXiData = () => {
  console.log(props);
  riskAnalysisReason({
    startTime: props.Getproperties.daterange
      ? props.Getproperties.daterange[0]
      : moment(localStorage.getItem("JCFXDialogTimer")).format("YYYY-MM-DD") +
        " 00:00:00",
    endTime: props.Getproperties.daterange
      ? props.Getproperties.daterange[1]
      : moment(localStorage.getItem("JCFXDialogTimer")).format("YYYY-MM-DD") +
        " 23:59:59",

    stCode: props.Getproperties.stCode,
    dataCode: props.Getproperties.dataCode,
    menuType: "yszrfxJCFX",
  }).then((res) => {
    if (res && res.code == 200) {
      let A = 1;
      let AFont = "";
      let B = 1;
      let BFont = "";
      if (res.data.reasonList.length > 0) {
        res.data.reasonList.forEach((element) => {
          AFont += `${A}:${element},`;
          A++;
        });
      } else {
        AFont = "无";
      }

      if (res.data.inferList.length> 0) {
        res.data.inferList.forEach((element) => {
          BFont += `${B}:${element},`;
          B++;
        });
      } else {
        BFont = "无";
      }

      AllData.TJK = AFont;
      AllData.TLK = BFont;
    }
  });
};
const getWatherData = () => {
  AllData.WTRQ = props.Getproperties.daterange
    ? props.Getproperties.daterange[1]
    : moment(localStorage.getItem("JCFXDialogTimer")).format("YYYY-MM-DD");

  rainCalendar({
    queryTime: AllData.WTRQ,
  }).then((res) => {
    console.log(res);
    res.forEach((element) => {
      if (element.date == AllData.WTRQ) {
        AllData.TQ =
          element.value == 0
            ? element.weather
            : element.weather + "(" + element.value + "mm)";
      }
    });
  });
};
onMounted(() => {
  nextTick(() => {
    getFenXiData();
    getChartsData();
    getWatherData();

    window.addEventListener("resize", resizeTheChart);
  });
});
</script>

<style lang="scss" scoped>
#yszrfxJCFX {
  width: 100%;
  height: 100%;
  #HeaderEcharts {
    width: 1198px;
    height: 320px;
  }
  #BodyFenXi {
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    align-items: center;

    .list1 {
      width: 50%;
      height: 60px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      align-items: center;

      .listLabel {
        width: 200px;
        height: 40px;
        text-align: right;
        box-sizing: border-box;
        padding-right: 30px;
        line-height: 40px;
        color: #ccdfff;
      }

      .listValue {
        width: 250px;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 0 5px;
        color: #8fbffe;
        background: #0d2359;
        border-radius: 5px;
        border: 1px solid #0b9bff;
      }
    }

    .list2 {
      width: 100%;
      height: 190px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      align-items: center;

      .listLabel {
        width: 200px;
        height: 170px;
        line-height: 170px;
        text-align: right;
        box-sizing: border-box;
        padding-right: 30px;
        color: #ccdfff;
      }

      .listValue {
        width: 825px;
        height: 170px;
        box-sizing: border-box;
        padding: 5px;
        color: #8fbffe;
        background: #0d2359;
        border-radius: 5px;
        border: 1px solid #0b9bff;
      }
    }
  }
}
</style>