<template>
  <!-- 降雨报告单详情 -->
  <!-- <el-button plain type="warning" @click="downloadPdf" style="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 raindata">
      <p class="title">【{{ item.stName }}】</p>
      <p class="content">
        降雨时间段：<span>{{ item.rainStartTime }}</span> 开始至<span>{{ item.rainEndTime }}</span> 结束，总历时
        <span> {{ item.rainTodate }}; </span>
      </p>
      <p class="content">
        日累计降雨量:<span>{{ item.rainTotol }} mm;</span>
      </p>
      <p class="content flex flex-r flex-justcontent-start">
        降雨等级:<span><dict-tag :options="props.rainfallIntensity" :value="item.rainLevel" /></span>;
      </p>
      <p class="content">
        最大小时降雨量：<span>{{ item.maxRainData }}mm/h</span> <span>（{{ item.maxRainTimeStart }}-{{ item.maxRainTimeEnd }}）</span>;
      </p>
      <div :id="`rain_chart_${item.stCode}`" class="chartOneBG rainChart"></div>
    </div>
    <!-- 所有雨量站数据 -->
    <p class="title">【降雨时空分布】</p>
    <div id="rain_chart" class="chartOneBG"></div>
  </div>
</template>

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

const props = defineProps({
  params: {
    type: Object,
    default: {},
  },
  rainfallIntensity: {
    type: Array,
    default: [],
  },
});
const { proxy } = getCurrentInstance();
const search = ref({
  time: '',
});
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 revelLabel = {
  1: '小雨',
  2: '中雨',
  3: '大雨',
  4: '暴雨',
  5: '大暴雨',
  6: '特大暴雨',
};
//雨量站数据
const raindatalist = ref([]);
//管网数据
const pipelinedatalist = ref([]);
//易涝点数据
const loggingdatalist = ref([]);
//项目数据
const projectdatalist = ref([]);
const showLoading = ref(false);
const detailData = ref({
  startTime: '',
  endTime: '',
  accumulate: '',
});
const rePortTime = ref('');
//单个雨量站数据
const raindata = ref([]);
//所有雨量站数据
const siteData = ref([]);
//雨量站--降雨量
const initEchartsRain = async datas => {
  for (var i = 0; i < datas.length; i++) {
    var chart2 = echarts.init(document.getElementById(`rain_chart_${datas[i]['stCode']}`));
    let xData = datas[i].rainTimeX.map(item => proxy.moment(item).format('HH:mm'));
    let yData = datas[i].rainY;
    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: [],
      },
      xAxis: {
        type: 'category',
        data: xData,
        axisLabel: {
          color: '#333',
          rotate: 90,
        },
        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;
    }
    chart2.clear();
    chart2.setOption(option4);
  }
};
//所有雨量站数据
const initEchartsSiteRain = async (timeData, rainList) => {
  var chart2 = echarts.init(document.getElementById(`rain_chart`));
  let xData = timeData;
  let yData = 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,
      formatter: function (params) {
        // params 是一个数组，数组中包含了多个要显示的数据的信息
        var result = '<div style="font-size:14px">' + search.value.time + '日' + params[0].axisValueLabel + '</div><div>';
        for (var i = 0, l = params.length; i < l; i++) {
          debugger;
          let data = siteData.value.filter(item => item.stName == params[i].axisValueLabel);
          result += `<div style="padding:6px 0"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:8px;height:8px;background-color:#6881CD"></span>
                        ${params[i].seriesName} : ${params[i].value}mm</div>
                        <span style="display:inline-block;margin-right:5px;border-radius:10px;width:8px;height:8px;background-color:#6881CD"></span>
                        级别 :<span style="display:inline-block;margin-right:5px;border-radius:3px;width:35px;height:20px;text-align:center;">${
                          revelLabel[data[0].rainLevle]
                        }</span> <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',
        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: 20, data: yData }],
  };
  if (xData.length > 0) {
    option4.graphic.invisible = true;
  } else {
    option4.graphic.invisible = false;
  }
  chart2.clear();
  chart2.setOption(option4);
};

//获取数据
const getDetailData = params => {
  showLoading.value = true;
  let timeObj = {
    ...params,
  };
  rePortTime.value = params.dateTime;
  querySationdateByDay(timeObj).then(res => {
    showLoading.value = false;
    raindata.value = res.data;
    setTimeout(() => {
      initEchartsRain(raindata.value);
    }, 1000);
  });
};

//获取所有雨量站的降雨总和对比柱状图
const getRainStationCharts = params => {
  let data = {
    dateTime: proxy.moment(params.dateTime).format('YYYY-MM-DD'),
  };
  queryRainStationCharts(data).then(res => {
    siteData.value = res.data;
    let timeData = res.data && res.data.map(item => item.stName);
    let rainList = res.data && res.data.map(item => item.raintotol);
    if (timeData.length) {
      setTimeout(() => {
        initEchartsSiteRain(timeData, rainList);
      }, 1000);
    }
  });
};

// 下载降雨报告单
function downloadPdf() {
  showLoading.value = true;
  loadingText.value = '正在下载中...';
  const lableList = document.getElementsByClassName('pdf-details');
  pageToPDF(`${proxy.moment(rePortTime.value).format('YYYY年MM月DD日')}降雨结论报告`, 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 });
    });
}

onMounted(() => {
  getDetailData(props.params);
  getRainStationCharts(props.params);
  bus.on('searchRainFX', params => {
    getDetailData(params);
    getRainStationCharts(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>