<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';
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: '降雨量',
  yAxis3: [],
  yAxis3_Name: '水深',
  xAxis: [],
  MGSW: 0,
  GSW: 0,
  MG: 0,
  YL: 0,
});
const Timers = ref([moment().subtract(3, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]);
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: 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,
            formatter: function (value) {
              return value.toFixed(2); // 保留两位小数
            },
          },
          min: 0,
          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,
          max: function (value) {
            return value.max > AllData.YL ? value.max : AllData.YL;
          },
          min: 0,
          axisLabel: {
            color: '#AAC1CF',
            show: true,
            formatter: function (value) {
              return value.toFixed(2); // 保留两位小数
            },
          },
          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', // 数据点颜色
          },
          // yAxisIndex: 1,
          markLine: {
            data: [],
            symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none'，即不显示箭头
          },
        },
      ],
    };
    if (AllData.MGSW > 0) {
      option.series[1].markLine.data.push({
        yAxis: AllData.MGSW, // 这是水平线的 Y 轴值
        lineStyle: {
          type: 'dashed',
          color: 'red', // 线的颜色
        },
        label: {
          show: true,
          // formatter: "满管水位" + props.data.yAxis6_YJ,
          formatter: '溢流风险:' + AllData.MGSW,
          color: 'red',
          fontSize: 12,
          position: 'middle',
        },
      });
    }
    if (AllData.GSW > 0) {
      option.series[1].markLine.data.push({
        yAxis: AllData.GSW, // 这是水平线的 Y 轴值
        lineStyle: {
          type: 'dashed',
          color: 'yellow', // 线的颜色
          cap: 'round',
        },
        label: {
          show: true,
          formatter: '高水位:' + AllData.GSW,
          color: 'yellow',
          fontSize: 12,
          position: 'middle',
        },
      });
    }
    if (AllData.MG > 0) {
      option.series[1].markLine.data.push({
        yAxis: AllData.MG, // 这是水平线的 Y 轴值
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 191, 0, 1)', // 线的颜色
          cap: 'round',
        },
        label: {
          show: true,
          formatter: '满管:' + AllData.MG,
          color: 'rgba(255, 191, 0, 1)',
          fontSize: 12,
          position: 'middle',
        },
      });
    }
    if (AllData.YL > 0) {
      option.series[1].markLine.data.push({
        yAxis: AllData.YL, // 这是水平线的 Y 轴值
        lineStyle: {
          type: 'dashed',
          color: '#610404', // 线的颜色
          cap: 'round',
        },
        label: {
          show: true,
          formatter: '溢流:' + AllData.YL,
          color: '#610404',
          fontSize: 12,
          position: 'middle',
        },
      });
    }
    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: Timers.value[0],
    end: Timers.value[1],
  }).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;
            element.cordonLineList.forEach(element => {
              if (element.code == 'ylfx') {
                AllData.MGSW = Number(element.lineValue);
              }
              if (element.code == 'gsw') {
                AllData.GSW = Number(element.lineValue);
              }
              if (element.code == 'mg') {
                AllData.MG = Number(element.lineValue);
              }
              if (element.code == 'yl') {
                AllData.YL = Number(element.lineValue);
              }
            });
            break;

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

const listData = ref({});
function gitDataFun() {
  let params = {
    id: props.Getproperties.id,
  };
  drainageDispatchRainAnalysisByGwjcd(params).then(
    res => {
      console.log('监测分析渍水风险降雨历史', res);
      if (res && res.code == 200) {
        listData.value = res.data;
      }
    },
    error => {}
  );
}
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(() => {
    if (props.Getproperties.daterange) {
      Timers.value = props.Getproperties.daterange;
    }
    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: 120px;
        overflow-y: auto;
      }
    }
  }
}
</style>