<template>
  <div id="ylfxJCFX">
    <div id="HeaderEcharts"></div>
    <el-divider>管网历史分析</el-divider>
    <div id="BodyFenXi">
      <div class="flex flex-justcontent-spacebetween">
        <div class="eachInfo">
          <div class="name">所属雨水分区:</div>
          <div class="text">{{ listData.rainArea }}</div>
        </div>
        <div class="eachInfo">
          <div class="name">运维片区:</div>
          <div class="text">{{ listData.watchAreaName }}</div>
        </div>
      </div>
      <div class="tableBox">
        <div class="name">历史经验:</div>
        <div class="text popUpTable">
          <el-table :data="listData.rainHistoryList" class="w100" stripe>
            <el-table-column prop="time" label="降雨日期" width="140px">
            </el-table-column>
            <el-table-column prop="rain" label="日降雨量(mm)" />
            <el-table-column prop="jyjb" label="降雨级别">
              <template #default="scope">
                <div>
                  {{ RainfallLevelFun(scope.row.rain) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="maxData" label="最大雨强(mm)" />
            <el-table-column prop="zdss" label="最大水深(cm)" />
            <el-table-column prop="cmd" label="充满度" />
            <el-table-column prop="warn" label="风险" />
            <el-table-column prop="duration" label="风险时长(分钟)" width="140px" />
          </el-table>
        </div>
      </div>
      <div class="eachInfo">
        <div class="name">周边环境分析:</div>
        <div class="text">{{ listData.zbhjfx }}</div>
      </div>
    </div>
  </div>
</template>

<script setup name="ylfxJCFX">
import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import { drainageDispatchRainAnalysisByGwjcd, getEchart } from "@/api/MonitorAssetsOnMap";

const AllData = reactive({
  chart: null,
  yAxis: [],
  yAxis_Name: "降雨量",
  yAxis3: [],
  yAxis3_Name: "水深",
  xAxis: [],
});
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.yAxis3_Name],
        textStyle: {
          color: "#FFFFFF",
          fontSize: 12,
        },
      },
      grid: {
        left: 30,
        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",
        },
        {
          name: AllData.yAxis3_Name,
          type: "value",
          minInterval: 1,
          axisLabel: {
            color: "#AAC1CF",
            show: true,
          },
          nameTextStyle: {
            color: "#99FF55",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
        },
      ],
      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.yAxis3_Name,
          type: "line",
          data: AllData.yAxis3,
          yAxisIndex: 1,
          symbolSize: 7,
          // 修改折线颜色
          lineStyle: {
            color: "#99FF55", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#99FF55", // 数据点颜色
          },
        },
      ],
    };
    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: "2024-07-01 00:00:00",
    // end: "2024-07-01 23:59:59",
    stType: "rainwater_pipeline_quality",
    stCode: "0201460323",
    dataCode: "pipePoint",
    start: "2024-11-26 11:10:03",
    end: "2024-11-27 11:10:03",
  }).then((res) => {
    if (res && res.code == 200) {
      AllData.xAxis = res.data.times;
      res.data.datas.forEach((element) => {
        switch (element.dataKey) {
          case "z":
            AllData.yAxis3 = element.datas;
            break;

          case "pn05":
            AllData.yAxis = element.datas;
            break;
        }
      });
      init();
    }
  });
};

const listData = ref({});
function gitDataFun() {
  // loading.value = true;
  let params = {
    // id: props.Getproperties.id,
    id: "1855860534121910516",
  };
  drainageDispatchRainAnalysisByGwjcd(params).then(
    (res) => {
      console.log("监测分析渍水风险降雨历史", res);
      // loading.value = false;
      if (res && res.code == 200) {
        listData.value = res.data;
      }
    },
    (error) => {
      // loading.value = false;
    }
  );
}
function RainfallLevelFun(rain) {
  let sum = Number(rain);
  let text = "";
  switch (true) {
    // 江河水位
    case sum > 200:
      text = "特大暴雨";
      break;
    case sum > 100:
      text = "大暴雨";
      break;
    case sum > 50:
      text = "暴雨";
      break;
    case sum > 25:
      text = "大雨";
      break;
    case sum > 10:
      text = "中雨";
      break;
    case sum > 0:
      text = "小雨";
      break;
    default:
      text = "无雨";
  }
  return text;
}
onMounted(() => {
  nextTick(() => {
    getChartsData();
    gitDataFun();
    window.addEventListener("resize", resizeTheChart);
  });
});
</script>

<style lang="scss" scoped>
#ylfxJCFX {
  width: 100%;
  height: 100%;
  #HeaderEcharts {
    width: 1198px;
    height: 320px;
  }
  #BodyFenXi {
    width: 100%;
    height: 250px;

    .eachInfo {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 10px;

      .name {
        color: #ccdfff;
        width: 100px;
        text-align: right;
        padding-right: 10px;
      }
      .text {
        flex: 1;
        min-width: 300px;
        min-height: 37px;
        color: #8fbffe;
        background: #0d2359;
        border-radius: 6px;
        border: 1px solid #0b9bff;
        padding: 7px 12px;
      }
    }
    .tableBox {
      display: flex;
      font-size: 14px;
      margin-bottom: 10px;
      color: #ccefff;
      .name {
        color: #ccdfff;
        min-width: 100px;
        text-align: right;
        padding-right: 10px;
      }
      .text {
        width: calc(100% - 100px);
      }
      :deep(.el-scrollbar__wrap) {
        max-height: 160px;
        overflow-y: auto;
      }
    }
  }
}
</style>