<template>
  <!-- 降雨报告单详情 -->
  <!-- <el-button plain type="warning" @click="downloadPdf" styhahaha le="margin: 10px 0px" :disabled="showLoading">下载</el-button> -->
  <div class="publicContainer reportDetail" v-loading="showLoading" :element-loading-text="loadingText" id="rainReport">
    <h1>开封市海绵城市雨情分析报告</h1>
    <h4>报告时间：{{ rePortTime }}</h4>
    <div v-for="item in raindataObj.siteList">
      <!-- 雨量站数据 -->
      <p class="title">【{{ item.stName }}】月累计降雨量：{{ item.monthRainTotol }}mm</p>
      <!-- <div class="rain_date_detail flex flex-r flex-wrap flex-justcontent-start">
                <div class="flex flex-v rain_box rain_box2"
                    :class="[statistic.time == moment(item.rainDataAnalysisVO.dataList[0].belongTime).format('YYYY-MM-DD') ? 'active_rain_box2' : '']"
                    v-for="statistic in item.rainStatisticList" @click="selectDate(item, statistic)">
                    <div>{{ moment(statistic.time).format('MM-DD') }}</div>
                    <div class="rainfall"><span>{{ statistic.rainfall }}</span>mm</div>
                </div>
                <div class="flex flex-v rain_box">
                    <div>合计</div>
                    <div class="rainfall"><span>{{ item.monthRainTotol }}</span>mm</div>
                </div>
            </div> -->
      <div v-loading="tableLoading">
        <div class="flex flex-r flex-justcontent-spacebetween">
          <p class="small_title">统计结果</p>
          <!-- <div class="flex flex-r">
                        <div class="button_title" :class="[item.type == 0 ? 'active_button_title' : '']"
                            @click="openLine(0, item)">报表统计</div>
                        <div class="button_title" :class="[item.type == 1 ? 'active_button_title' : '']"
                            @click="openLine(1, item)">趋势图</div>
                    </div> -->
        </div>
        <el-table
          :data="item.rainDataAnalysisVO && item.rainDataAnalysisVO.dataList"
          style="width: 100%; margin: 0 auto"
          class="detailDataTable"
          v-show="item.type == 0"
        >
          <el-table-column label="降雨日期" prop="belongTime" class="pdf-details" aline="center" width="200px" />
          <el-table-column label="开始时间" prop="startTime" class="pdf-details" aline="center" width="200px" />
          <el-table-column label="结束时间" prop="endTime" class="pdf-details" aline="center" width="200px" />
          <el-table-column label="历时" prop="remark" class="pdf-details" aline="center" width="120px" />
          <el-table-column label="累计降雨量(mm)" prop="accumulate" class="pdf-details" aline="center">
            <template #default="{ row }">
              <span>{{ row.accumulate }}({{ row.rainSystemType }})</span>
            </template>
          </el-table-column>
          <el-table-column label="降雨强度" prop="rainLevel" class="pdf-details" aline="center">
            <template #default="{ row }">
              <span><dict-tag :options="props.rainfallIntensity" :value="row.rainIntensity.toString()" /></span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="峰值降雨量" prop="maxRainData" class="pdf-details" aline="center">
                        <template #default="{ row }">
                            {{ row.maxRainData }}/5min
                        </template>
                    </el-table-column> -->
        </el-table>

        <p class="small_title">结论</p>
        <!-- <p class="content">本月累计降雨量：<span>{{ item.monthRainTotol }}mm
                    </span>
                </p> -->
        <p class="content">
          最大降雨量在<span>{{ item.rainDataAnalysisVO.realTime }}</span
          >， 降雨量为:<span>{{ item.rainDataAnalysisVO.rainTotol }}mm</span> 降雨时间
          <span>{{ item.rainDataAnalysisVO.rainStartTime }}</span> 至 <span>{{ item.rainDataAnalysisVO.rainEndTime }}</span> 历时<span>{{
            item.rainDataAnalysisVO.remark
          }}</span>
        </p>
        <p class="content flex flex-r flex-justcontent-start">
          月降雨场次统计:<span>{{ item.rainDataAnalysisVO.rainLevelCountDescribe }}</span>
        </p>
        <div :id="`rain_chart_${item.stCode}`" class="chartOneBG rainChart"></div>
      </div>
    </div>
    <!-- 综述 -->
    <p class="small_title">[综述]</p>
    <div id="rain_chart" class="chartOneBG"></div>
  </div>
</template>

<script setup stName="降雨报告单详情">
import bus from '@/bus';
import { ElMessage } from 'element-plus';
import chartOption from './riskChart';
import * as echarts from 'echarts';
import { pageToPDF } from '@/utils/exportPdf.js'; //导出下载PDF
import { querySationdateByMonth, changeMonthDate } from '@/api/zongHeDD.js';

const props = defineProps({
  params: {
    type: Object,
    default: {},
  },
  rainfallIntensity: {
    type: Array,
    default: [],
  },
});
const { proxy } = getCurrentInstance();
const search = ref({
  time: '',
});
const rePortTime = ref('');
const loadingText = ref('正在加载中...');
//降雨等级
const levelData = ref([
  {
    type: '小雨',
    '24Rail': '小于10.0',
    '12Rail': '小于5.0',
  },
  {
    type: '中雨',
    '24Rail': '10.0~24.9',
    '12Rail': '5.0~14.9',
  },
  {
    type: '大雨',
    '24Rail': '25.0~49.9',
    '12Rail': '25.0~49.9',
  },
  {
    type: '暴雨',
    '24Rail': '50.0~99.9',
    '12Rail': '30.0~69.9',
  },
  {
    type: '大暴雨',
    '24Rail': '100.0~249.0',
    '12Rail': '70.0~139.0',
  },
  {
    type: '特大暴雨',
    '24Rail': '250.0以上',
    '12Rail': '140.0以上',
  },
]);
//雨量站数据
const raindataObj = ref({});
//管网数据
const pipelinedatalist = ref([]);
//易涝点数据
const loggingdatalist = ref([]);
//项目数据
const projectdatalist = ref([]);
const showLoading = ref(false);
const tableLoading = ref(false);
const tableType = ref(0);
const detailData = ref({
  startTime: '',
  endTime: '',
  accumulate: '',
});

//雨量站--综合降雨量
const initEchartsSiteRain = async datas => {
  var chart = echarts.init(document.getElementById(`rain_chart`));
  let xData = datas.map(item => item.stName);
  let yData = datas.map(item => item.allRain);
  var rainMaxNum = Math.max(...yData);
  var rainMinNum = Math.min(...yData);
  let option4 = {
    color: '#6881CD',
    // 显示暂无数据
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: true, // 有数据就隐藏
      style: {
        fill: '#c6c6c6',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
      },
    },
    tooltip: {
      trigger: 'axis',
      show: true,
      formatter: function (params) {
        // params 是一个数组，数组中包含了多个要显示的数据的信息
        var result =
          '<div style="border-bottom: 1px solid #DCDCDC;padding-bottom: 10px;">' +
          rePortTime.value +
          params[0].axisValueLabel +
          '</div><div>';
        for (var i = 0, l = params.length; i < l; i++) {
          let data = datas.filter(item => item.stName == params[i].axisValueLabel);
          result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:6px;height:6px;background-color:${params[i].color}"></span>
                        ${params[i].seriesName} : ${params[i].value}mm<br/>`;
        }
        return result + '</div>';
      },
    },
    title: {
      left: 'center',
      text: '',
      textStyle: {
        color: '#333', //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: {
      left: '3%',
      right: '3%',
      top: '15%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      top: '8%',
      orient: 'horizontal', //horizontal
      left: 'center', //left ,center
      textStyle: {
        color: '#333',
      },
      data: [],
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisLabel: {
        color: '#333',
      },
      axisLine: {
        lineStyle: {
          color: '#066592',
        },
      },
    },
    yAxis: [
      {
        name: '月平均降雨量(mm)',
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 10, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#333', //字体颜色
          fontSize: 12, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
          padding: [0, 0, 0, 0],
        },
        axisLabel: {
          color: '#333',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
        min: (Number(rainMinNum) * 0.8).toFixed(1),
        max: (Number(rainMaxNum) * 1.5).toFixed(1),
      },
    ],
    series: [{ name: '月平均降雨量', type: 'bar', barWidth: 15, data: yData }],
  };
  if (xData.length > 0) {
    option4.graphic.invisible = true;
  } else {
    option4.graphic.invisible = false;
  }
  chart.clear();
  chart.setOption(option4);
};

//站点一个月降雨量
const initEchartsDayRain = async datas => {
  for (var i = 0; i < datas.length; i++) {
    var chart = echarts.init(document.getElementById(`rain_chart_${datas[i].stCode}`));
    let xData = datas[i].statisticListVo.timeList.map(item => proxy.moment(item).format('MM-DD HH:mm'));
    let yData = datas[i].statisticListVo.rainList;
    var rainMaxNum = Math.max(...yData);
    var rainMinNum = Math.min(...yData);
    let option4 = {
      color: '#6881CD',
      // 显示暂无数据
      graphic: {
        type: 'text', // 类型：文本
        left: 'center',
        top: 'middle',
        silent: true, // 不响应事件
        invisible: true, // 有数据就隐藏
        style: {
          fill: '#c6c6c6',
          fontWeight: 'bold',
          text: '暂无数据',
          fontFamily: 'Microsoft YaHei',
          fontSize: '18px',
        },
      },
      tooltip: {
        trigger: 'axis',
        show: true,
      },
      title: {
        left: 'center',
        text: '',
        textStyle: {
          color: '#333', //字体颜色
          fontSize: 16, //字体大小
        },
      },
      grid: {
        left: '3%',
        right: '3%',
        top: '15%',
        bottom: '3%',
        containLabel: true,
      },
      legend: {
        top: '8%',
        orient: 'horizontal', //horizontal
        left: 'center', //left ,center
        textStyle: {
          color: '#333',
        },
        data: [],
      },
      dataZoom: {
        // 设置滚动条的隐藏与显示
        show: true,
        // 设置滚动条类型
        type: 'inside',
        // 设置背景颜色
        backgroundColor: '#F1F1F1',
        // 设置选中范围的填充颜色
        fillerColor: '#C1C1C1',
        // 设置边框颜色
        borderColor: '#F1F1F1',
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        start: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        end: 100,
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: 'empty',
        // 设置滚动条宽度，相对于盒子宽度
        width: '50%',
        // 设置滚动条高度
        height: 8,
        // 设置滚动条显示位置
        left: 'center',
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLoxk: true,
        // 控制手柄的尺寸
        handleSize: 0,
        // dataZoom-slider组件离容器下侧的距离
        bottom: 0,
      },
      xAxis: {
        type: 'category',
        data: xData,
        axisLabel: {
          color: '#333',
          rotate: 0,
        },
        axisLine: {
          lineStyle: {
            color: '#066592',
          },
        },
      },
      yAxis: [
        {
          name: '降雨量(mm)',
          type: 'value',
          nameLocation: 'end', // 坐标轴名称显示位置
          nameGap: 10, // 坐标轴名称与轴线之间的距离
          nameTextStyle: {
            color: '#333', //字体颜色
            fontSize: 12, //字体大小
            align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
            padding: [0, 0, 0, 0],
          },
          axisLabel: {
            color: '#333',
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#066592',
            },
          },
          min: (Number(rainMinNum) * 0.8).toFixed(1),
          max: (Number(rainMaxNum) * 1.5).toFixed(1),
        },
      ],
      series: [{ name: '降雨量', type: 'bar', barWidth: 2, data: yData }],
    };
    if (xData.length > 0) {
      option4.graphic.invisible = true;
    } else {
      option4.graphic.invisible = false;
    }
    chart.clear();
    chart.setOption(option4);
  }
};

//雨量站--降雨量、流量
const initEchartsZB2 = async datas => {
  for (var i = 0; i < datas.length; i++) {
    var chart2 = echarts.init(document.getElementById(`JYLLChartOneBG_${datas[i]['stationCode']}`));
    let xData = datas[i].pipelineTimeX;
    let pipelineRainY = datas[i].pipelineRainY;
    let pipelineFlowY = datas[i].pipelineFlowY;
    chartOption.option5.xAxis.data = xData;
    chartOption.option5.series[0].data = pipelineFlowY;
    chartOption.option5.series[1].data = pipelineRainY;
    if (xData.length > 0) {
      chartOption.option5.graphic.invisible = true;
    } else {
      chartOption.option5.graphic.invisible = false;
    }
    chart2.clear();
    chart2.setOption(chartOption.option5);
  }
};
//雨量站--水位、流量
const initEchartsZB3 = async datas => {
  for (var i = 0; i < datas.length; i++) {
    var chart3 = echarts.init(document.getElementById(`SWLLChartOneBG_${datas[i]['stationCode']}`));
    let xData = datas[i].pipelineTimeX;
    let pipelineWaterlevelY = datas[i].pipelineWaterlevelY;
    let pipelineFlowY = datas[i].pipelineFlowY;
    chartOption.option6.xAxis[0].data = xData;
    chartOption.option6.series[0].data = pipelineFlowY;
    chartOption.option6.series[1].data = pipelineWaterlevelY;

    if (xData.length > 0) {
      chartOption.option6.graphic.invisible = true;
    } else {
      chartOption.option6.graphic.invisible = false;
    }
    chart3.clear();
    chart3.setOption(chartOption.option6);
  }
};
//易涝点降雨趋势分析--降雨量、水位
const initEchartsZB4 = async datas => {
  for (var i = 0; i < datas.length; i++) {
    var chart4 = echarts.init(document.getElementById(`LoggingJYLSWChartOneBG_${datas[i]['stationCode']}`));
    let xData = datas[i].loggingTimeX;
    let loggingRainY = datas[i].loggingRainY;
    let loggingWaterlevelY = datas[i].loggingWaterlevelY;
    chartOption.option7.xAxis.data = xData;
    chartOption.option7.series[0].data = loggingWaterlevelY;
    chartOption.option7.series[1].data = loggingRainY;

    if (xData.length > 0) {
      chartOption.option7.graphic.invisible = true;
    } else {
      chartOption.option7.graphic.invisible = false;
    }
    chart4.clear();
    chart4.setOption(chartOption.option7);
  }
};
//项目----降雨量、流量
const intProjectJYLLLChart = async datas => {
  for (var i = 0; i < datas.length; i++) {
    var chart5 = echarts.init(document.getElementById(`projectJYLLLChartOneBG_${datas[i]['stationCode']}`));
    let xData = datas[i].projectTimeX;
    let projectRainY = datas[i].projectRainY;
    let projectFlowY = datas[i].projectFlowY;
    chartOption.option5.xAxis.data = xData;
    chartOption.option5.xAxis.data = xData;
    chartOption.option5.series[0].data = projectFlowY;
    chartOption.option5.series[1].data = projectRainY;

    if (xData.length > 0) {
      chartOption.option5.graphic.invisible = true;
    } else {
      chartOption.option5.graphic.invisible = false;
    }
    chart5.clear();
    chart5.setOption(chartOption.option5);
  }
};
//项目---流量、悬浮物
const intProjectLLXFWChart = async datas => {
  for (var i = 0; i < datas.length; i++) {
    var chart6 = echarts.init(document.getElementById(`projectLLXFWChartOneBG_${datas[i]['stationCode']}`));
    let xData = datas[i].projectTimeX;
    let projectFlowY = datas[i].projectFlowY;
    let projectSSY = datas[i].projectSSY;
    chartOption.option8.xAxis[0].data = xData;
    chartOption.option8.series[0].data = projectFlowY;
    chartOption.option8.series[1].data = projectSSY;
    if (xData.length > 0) {
      chartOption.option8.graphic.invisible = true;
    } else {
      chartOption.option8.graphic.invisible = false;
    }
    chart6.clear();
    chart6.setOption(chartOption.option8);
  }
};
//项目---水位、流量
const intProjectSWLLChart = async datas => {
  for (var i = 0; i < datas.length; i++) {
    var chart7 = echarts.init(document.getElementById(`projectSWLLChartOneBG_${datas[i]['stationCode']}`));
    let xData = datas[i].projectTimeX;
    let projectFlowY = datas[i].projectFlowY;
    let projectWaterlevelY = datas[i].projectWaterlevelY;
    chartOption.option6.xAxis[0].data = xData;
    chartOption.option6.series[0].data = projectFlowY;
    chartOption.option6.series[1].data = projectWaterlevelY;
    if (xData.length > 0) {
      chartOption.option6.graphic.invisible = true;
    } else {
      chartOption.option6.graphic.invisible = false;
    }
    chart7.clear();
    chart7.setOption(chartOption.option6);
  }
};

// 下载降雨报告单
function downloadPdf() {
  showLoading.value = true;
  loadingText.value = '正在下载中...';
  const lableList = document.getElementsByClassName('pdf-details');
  pageToPDF(`${proxy.moment(rePortTime.value).format('YYYY年MM月')}降雨结论报告`, document.querySelector('#rainReport'), lableList)
    .then(flag => {
      if (flag == 1) {
        showLoading.value = false;
        loadingText.value = '正在加载中...';
        ElMessage({ message: '下载成功', type: 'success', duration: 5 * 1000 });
      }
    })
    .catch(() => {
      showLoading.value = false;
      ElMessage({ message: '下载失败', type: 'error', duration: 5 * 1000 });
    });
}
//获取数据
const getDetailData = params => {
  showLoading.value = true;
  let timeObj = {
    ...params,
  };
  rePortTime.value = params.dateTime;
  querySationdateByMonth(timeObj).then(res => {
    showLoading.value = false;
    raindataObj.value = res.data;
    if (raindataObj.value['siteList'].length) {
      raindataObj.value['siteList'].forEach(item => {
        item.type = 0;
      });
    }
    setTimeout(() => {
      initEchartsSiteRain(raindataObj.value.comDataList);
      initEchartsDayRain(raindataObj.value.siteList);
    }, 1000);
  });
};

//选择日期
const selectDate = (item, date) => {
  tableLoading.value = true;
  changeMonthDate({
    dateTime: date.time,
    stCode: item.stCode,
  }).then(res => {
    tableLoading.value = false;
    let data = res.data;
    raindataObj.value.siteList.forEach(el => {
      if (el.stCode == item.stCode) {
        el.rainDataAnalysisVO = data;
      }
    });
    let array = [
      {
        rainDataAnalysisVO: data,
      },
    ];
    initEchartsDayRain(array);
  });
};
//切换表格和echarts
const openLine = (type, item) => {
  item.type = type;
};

onMounted(() => {
  getDetailData(props.params);
  bus.on('searchRainFX', params => {
    getDetailData(params);
  });
  bus.on('downLoadRainFX', () => {
    downloadPdf();
  });
});
onBeforeUnmount(() => {
  bus.off('searchRainFX');
  bus.off('downLoadRainFX');
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
@import '@/assets/styles/rainReportDetail.scss';
</style>