<template>
  <el-form :model="queryParams" ref="queryRef" :rules="Formrules" :inline="true" label-width="110px">
    <el-form-item label="类型：" prop="isControllerRainSite" label-width="70px">
      <el-select
        filterable
        v-model="queryParams.isControllerRainSite"
        :clearable="false"
        placeholder="请选择"
        popper-class="dialogPopperClass"
        @change="changeType"
        style="width: 100px"
      >
        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="项目选择：" prop="belongArea" v-if="queryParams.isControllerRainSite == 0" label-width="110px">
      <el-select
        filterable
        v-model="queryParams.belongArea"
        :clearable="false"
        placeholder="请选择"
        popper-class="dialogPopperClass"
        @change="changePro"
        style="width: 200px"
      >
        <el-option v-for="item in list" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
      </el-select>
    </el-form-item>
    <el-form-item label="设施选择:" prop="stCode" v-if="queryParams.isControllerRainSite == 1">
      <el-select
        filterable
        v-model="queryParams.stCode"
        :clearable="false"
        placeholder="请选择"
        popper-class="dialogPopperClass"
        @change="changeSite"
        style="width: 200px"
      >
        <el-option v-for="item in siteList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
      </el-select>
    </el-form-item>
    <el-form-item label="典型降雨：" prop="realTime">
      <span style="color: #d3f6ff !important; font-size: 17px">{{ queryParams.realTime }}</span>
    </el-form-item>
    <el-form-item label="同等降雨对比时间：" prop="contrastTime" label-width="180px">
      <rainCalender
        ref="rainCalenderRef"
        :contrastTime="queryParams.contrastTime"
        :stCode="queryParams.stCode"
        :rainIntensity="queryParams.rainIntensity"
        :projectCode="queryParams.belongArea"
        :calenderRainTime="search.time"
        @change="changeTime"
      >
      </rainCalender>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
      <el-button plain type="warning" icon="Download" @click="downloadPdf" style="margin-left: 10px">导出</el-button>
    </el-form-item>
  </el-form>

  <div class="publicContainer reportDetail" v-loading="showLoading" :element-loading-text="loadingText" id="rainReport">
    <h1>开封市海绵城市项目及设施分析报告</h1>
    <h4>报告时间：{{ rePortTime }}</h4>
    <div v-if="projectObj['tablelist'] && projectObj['tablelist'].length">
      <div class="chart_content" v-for="item in projectObj['tablelist']">
        <!-- 小时流量、降雨量 -->
        <div class="chart_list" v-for="(child, index) in item['tablelist']">
          <p class="small_title">【{{ moment(child.dataTime).format('YYYY-MM-DD') }}号{{ item.stName }}趋势】</p>
          <div :id="`rain_chart_${moment(child.dataTime).format('YYYY-MM-DD')}_${item.stCode}_${index}`" class="chartOneBG rainChart"></div>
        </div>
        <p class="small_title" v-if="projectObj['tablelist'] && projectObj['tablelist'].length">
          【设计参数】设计降雨量 {{ projectObj.designRain }}mm，设计年径流总控制率{{ projectObj.ghJlzlkzl }}%
        </p>
        <el-table :data="item['tablelist']" style="width: 100%; margin: 0 auto" class="detailDataTable">
          <el-table-column label="对比日期" prop="dataTime" class="pdf-details" aline="center" width="150px">
            <template #default="{ row }">
              <span>{{ moment(row.dataTime).format('YYYY-MM-DD') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="降雨开始时间" prop="rainStartTime" class="pdf-details" aline="center" width="210px" />
          <el-table-column label="出流开始时间" prop="flowStartTime" class="pdf-details" aline="center" width="210px" />
          <el-table-column label="错峰间隔时间" prop="flowIntervalTime" class="pdf-details" aline="center" width="180px" />
          <el-table-column label="控制雨量(mm)" prop="trueRain" class="pdf-details" aline="center" width="180px" />
          <el-table-column label="总出流量(m³)" prop="totolFlow" class="pdf-details" aline="center"> </el-table-column>

          <el-table-column label="典型降雨径流总量控制率(%)" prop="jlzlkzl" class="pdf-details" aline="center"> </el-table-column>
          <el-table-column label="是否达标" prop="isStandard" class="pdf-details" aline="center" width="210px">
            <template #default="{ row }"> </template>
          </el-table-column>
        </el-table>
        <p class="small_title" style="font-weight: normal">【信息】{{ item['tablelist'][0].information }}</p>
        <p class="small_title" style="font-weight: normal">【建议】{{ item['tablelist'][0].advice }}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import bus from '@/bus';
import { ElNotification, ElMessageBox, ElMessage, ElLoading } from 'element-plus';
import rainCalender from './rainCalender';
import chartOption from './riskChart';
import { pageToPDF } from '@/utils/exportPdf.js'; //导出下载PDF
import * as echarts from 'echarts';
import {
  siteReportRelation,
  queryProjectStation,
  queryDayRainCumulative,
  projectReportResult,
  queryRainIntensity,
  queryFacilitiesAnalysis,
} from '@/api/zongHeDD';
const { proxy } = getCurrentInstance();
const search = ref({
  siteId: '',
  projectId: '',
  time: proxy.moment().format('YYYY-MM-DD'),
});
const rePortTime = ref('');
const projectObj = ref({});
const loadingText = ref('正在加载中...');
const showLoading = ref(false);
const typeList = [
  {
    label: '设施',
    value: 1,
  },
  {
    label: '项目',
    value: 0,
  },
];
const siteList = ref([]);
const list = ref([]);
const rainCalenderRef = ref(null);
const queryParams = ref({
  contrastTime: '',
  stCode: '',
  belongArea: '',
  realTime: '',
  isControllerRainSite: 0,
});
//搜索pdf
const handleQuery = () => {
  let timeObj = {
    // contrastTime: '',
    // realTime: '2024-11-24',
    // // projectCode: queryParams.value.isControllerRainSite == 1 ? '' : queryParams.value.belongArea,
    // projectCode: 'XMBH20240507-00010',
    // stCode: '',
    // status: '0',
    contrastTime: queryParams.value.contrastTime,
    realTime: localStorage.getItem('setRainDateKF'),
    projectCode: queryParams.value.isControllerRainSite == 1 ? '' : queryParams.value.belongArea,
    stCode: queryParams.value.isControllerRainSite == 1 ? queryParams.value.stCode : '',
    status: queryParams.value.isControllerRainSite,
  };
  rePortTime.value = localStorage.getItem('setRainDateKF');
  queryFacilitiesAnalysis(timeObj).then(res => {
    projectObj.value = res.data;
    setTimeout(() => {
      initEchartsZB2(projectObj.value['tablelist']);
    }, 1000);
  });
};

//雨量站--降雨量、流量
const initEchartsZB2 = async (datas, params) => {
  console.log(datas, 'datas');
  for (var i = 0; i < datas.length; i++) {
    for (var j = 0; j < datas[i]['tablelist'].length; j++) {
      let obj = datas[i]['tablelist'][j];
      let xData = obj.projectTimeX.map(item => proxy.moment(item).format('HH:mm'));
      var chart2 = echarts.init(
        document.getElementById(`rain_chart_${proxy.moment(obj.dataTime).format('YYYY-MM-DD')}_${datas[i].stCode}_${j}`)
      );
      let pipelineRainY = obj.projectRainY;
      let pipelineFlowY = obj.projectFlowY;
      chartOption.option5.xAxis.data = xData;
      chartOption.option5.series[0].data = pipelineFlowY;
      chartOption.option5.series[1].data = pipelineRainY;
      var rainMaxNum = Math.max(...pipelineRainY);
      var rainMinNum = Math.min(...pipelineRainY);
      var flowMaxNum = Math.max(...pipelineFlowY);
      var flowMinNum = Math.min(...pipelineFlowY);
      chartOption.option5.xAxis.axisLabel.rotate = 90;
      chartOption.option5.yAxis[1].min = (Number(rainMinNum) * 0.8).toFixed(1);
      chartOption.option5.yAxis[1].max = (Number(rainMaxNum) * 1.5).toFixed(1);
      if (xData.length > 0) {
        chartOption.option5.graphic.invisible = true;
      } else {
        chartOption.option5.graphic.invisible = false;
      }
      chart2.clear();
      showLoading.value = false;
      chart2.setOption(chartOption.option5);
    }
  }
};

//查询项目距离设施最近的相同一场雨的时间
const getProjectReportResult = () => {
  let data = {
    // realTime: '2024-11-24',
    realTime: queryParams.value.realTime,
    status: queryParams.value.isControllerRainSite,
    projectCode: queryParams.value.isControllerRainSite == 1 ? '' : queryParams.value.belongArea,
    stCode: queryParams.value.isControllerRainSite == 1 ? queryParams.value.stCode : '',
  };
  console.log(data, 'data');
  projectReportResult(data).then(res => {
    if (res.data.length) {
      queryParams.value.contrastTime = res.data[0].contrastTime ? proxy.moment(res.data[0].contrastTime).format('YYYY-MM-DD') : '';
    } else {
      queryParams.value.contrastTime = '';
    }
    queryParams.value.contrastTime = queryParams.value.contrastTime || '';
    handleQuery();
    setTimeout(() => {
      rainCalenderRef.value.getRainTimeDayData(queryParams.value.contrastTime);
    }, 100);
  });
};

//查询设施站点雨强
const getFacitYRainIntensity = () => {
  let data = {
    dataTime: queryParams.value.realTime,
    stCode: queryParams.value.stCode,
  };
  queryDayRainCumulative(data).then(res => {
    queryParams.value.rainIntensity = res.data.rainIntensity;
    getProjectReportResult();
  });
};

//查询项目站点雨强
const getProjectRainIntensity = () => {
  let data = {
    dataTime: queryParams.value.realTime,
    stCode: queryParams.value.stCode,
  };
  queryRainIntensity(data).then(res => {
    queryParams.value.rainIntensity = res.data.rainIntensity;
    getProjectReportResult();
  });
};
//修改站点
const changeSite = () => {
  let filterData = siteList.value.filter(item => item.stCode == queryParams.value.stCode);
  queryParams.value.rainIntensity = filterData[0].rainIntensity;
  getFacitYRainIntensity();
};
//修改项目
const changePro = () => {
  let filterData = list.value.filter(item => item.projectCode == queryParams.value.belongArea);
  queryParams.value.stCode = filterData[0].rainStCode;
  console.log(queryParams.value.stCode, '  queryParams.value.stCode');
  getProjectRainIntensity();
};
// 切换
const changeType = () => {
  console.log('111');
  queryParams.value.belongArea = queryParams.value.isControllerRainSite == 1 ? '' : list.value[0].projectCode;
  queryParams.value.stCode = queryParams.value.isControllerRainSite == 1 ? siteList.value[0].stCode : '';
  if (queryParams.value.isControllerRainSite == 1) {
    getFacitYRainIntensity();
  } else {
    changePro();
  }
};

//切换日历时间
const changeTime = val => {
  queryParams.value.contrastTime = val;
};

//项目数据
const getProjectStation = () => {
  queryProjectStation({ realTime: search.value.time, status: 0 }).then(res => {
    list.value = res.data;
    queryParams.value.belongArea = list.value[0].projectCode;
  });
};

//获取设施数据
const getFacilitiesData = () => {
  siteReportRelation({ isControllerRainSite: 1 }).then(res => {
    siteList.value = res.data;
    // queryParams.value.stCode = siteList.value[0].stCode || '';
  });
};

//下载pdf
const downloadPdf = () => {
  showLoading.value = true;
  loadingText.value = '正在下载中...';
  const lableList = document.getElementsByClassName('pdf-details');
  pageToPDF(`${proxy.moment(rePortTime.value).format('YYYY年')}降雨结论报告`, 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(() => {
  getProjectStation();
  getFacilitiesData();
  getFacitYRainIntensity();
  queryParams.value.realTime = localStorage.getItem('setRainDateKF');
});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
@import '@/assets/styles/rainReportDetail.scss';
</style>