<template>
  <!-- 长效考核-合流制溢流污染治理 -->
  <div class="overBlackCX">
    <!-- gis地图 -->
    <MapBox :initJson="`/static/libs/mapbox/style/overflowBlack.json`" @map-click="mapClick"></MapBox>

    <div class="longTermYear">
      <el-select v-model="currentYear" @change="getDatas">
        <el-option label="2023" value="2023" />
        <el-option label="2024" value="2024" />
      </el-select>
    </div>
    <!-- <img src="@/assets/images/longTerm/hlzyl.png" class="imgTL" /> -->
    <div class="tuli">
      <div style="margin: 10px; font-size: 18px">图例</div>
      <div v-for="i in tuliList" class="tuli_img">
        <img :src="i.icon" alt="" />
        <div>{{ i.label }}</div>
      </div>
    </div>
    <!-- 右侧内容 -->
    <div :class="['videoImgRCX', ifExpand ? 'rightZkCX' : 'rightSqCX']" @click="ifExpand = !ifExpand"></div>
    <div
      :class="['preContentRight', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']"
      v-loading="chartLoading"
    >
      <div class="selectTitle">
        <div class="name">{{ currentYear }}年度溢流污染频次统计</div>
      </div>
      <PieChart
        :echartData="echartDataPie"
        :title="pieTitle"
        :refresh="refresh"
        @click-call-back="lxClickCallBack"
        class="chartHeight"
      ></PieChart>

      <div class="selectTitle">
        <div class="name">{{ currentYear }}年度溢流污染统计</div>
      </div>
      <div id="ylwrCount" class="chartHeight"></div>

      <div class="selectTitle">
        <div class="name">{{ currentYear }}年降雨溢流事件</div>
      </div>
      <el-table ref="tableArea" :data="tableData" height="250" v-loading="tableLoading" @row-click="checkProject" highlight-current-row>
        <el-table-column prop="startTime" label="降雨开始时间" width="160" />
        <el-table-column prop="duration" label="降雨历时(h)" width="100" />
        <el-table-column prop="accumulate" label="降雨量(mm)" width="100" />
        <el-table-column prop="codSum" label="溢流污染物(t,COD)" width="140" />
        <el-table-column prop="cq1Sum" label="溢流量(万m³)" width="110" />
      </el-table>
    </div>

    <!-- 监测站点溢流详情 -->
    <el-dialog v-model="showStationDetail" title="溢流口监测数据详情" width="900px" append-to-body>
      <el-table
        ref="tableStation"
        :data="tableDataStation"
        height="300"
        style="margin-bottom: 30px"
        @row-click="clickStation"
        highlight-current-row
      >
        <el-table-column label="排口名称" prop="overflowStName" />
        <el-table-column label="溢流开始时间" prop="startTime" />
        <el-table-column label="溢流结束时间" prop="endTime" />
        <el-table-column label="累计溢流量(m³)" prop="cq1Sum" />
        <el-table-column label="累计溢流污染物(t,COD)" prop="codSum" />
      </el-table>
      <div id="ylwrStation" style="width: 850px; height: 230px; margin-bottom: 40px" v-loading="loadingStation"></div>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  rainfallYearCount,
  rainfallSiteCount,
  rainfallCountList,
  rainfallSessionOverflowList,
  rainfallSessionOverflowDataList,
} from '@/api/longTerm/index.js';
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import bus from '@/bus';
import PieChart from '@/components/Echarts/pieChart.vue'; //饼图
import optionChart from './chartOption.js';

const { proxy } = getCurrentInstance();
const tableStation = ref(null);
const showStationDetail = ref(false);
const loadingStation = ref(false);
const tableDataStation = ref([]);
const currentYear = ref('2024');
const checkMonth = ref('1');
const ifExpand = ref(true);
const tableData = ref([]);
const tableLoading = ref(true);
const tableArea = ref(null);
const chartKst = shallowRef(null);
const chartLoading = ref(true);
const siteOverflowListRain = ref([]); //溢流站点列表-表格
const pieTitle = ref('');
const echartDataPie = ref([
  { name: '>=5次', value: 12 },
  { name: '未发生', value: 2 },
  { name: '1-2次', value: 1 },
  { name: '3-5次', value: 3 },
]);
const pcLogCount = ref({});
const barCount = ref({});
const refresh = ref(1);
const detailObj = ref({ stCode: null, month: null, year: null });
let tuliList = ref([
  { label: '发生溢流', id: 0, icon: '/images/1.1.jpg' },
  { label: '未发生溢流', id: 1, icon: '/images/1.2.jpg' },
]);
// 表格项目点击在地图定位-降雨溢流事件
function checkProject(row) {
  siteOverflowListRain.value = row.siteOverflowList;
  // gis地图渲染
  siteOverflowListRain.value.map(item => {
    item.type = 'error_zishui';
  });
  gisMapInit(siteOverflowListRain.value);
}

// 污染溢流统计echarts 柱状图
function kstChart() {
  chartLoading.value = true;
  //先销毁实例
  chartKst.value && chartKst.value.dispose();
  chartKst.value = proxy.echarts.init(document.getElementById('ylwrCount'));
  rainfallYearCount({ year: currentYear.value }).then(res => {
    let datas = res.data;
    barCount.value = datas;
    let charts = JSON.parse(JSON.stringify(optionChart.option2));
    charts.xAxis.data = [];
    charts.series[0].data = []; //溢流污染物总量(cod)kg
    charts.series[1].data = []; //溢流量m³
    if (Boolean(datas.months.length)) {
      datas.months.forEach(i => {
        i = i + '月';
        charts.xAxis.data.push(i);
      });
    }
    if (Boolean(datas.codSum.length)) {
      datas.codSum.forEach(i => {
        i = Math.round(i * 100) / 100;
        charts.series[0].data.push(i);
      });
    }
    if (Boolean(datas.cq1Sum.length)) {
      datas.cq1Sum.forEach(i => {
        i = Math.round(i * 100) / 100;
        charts.series[1].data.push(i);
      });
    }
    // charts.xAxis.data = datas.months;
    charts.series[0].barWidth = '8';
    charts.series[1].barWidth = '8';
    if (datas.months.length > 0) {
      charts.graphic.invisible = true; // 暂无数据
    } else {
      charts.graphic.invisible = false; // 暂无数据
    }
    chartKst.value.clear();
    chartKst.value.setOption(charts);
    chartLoading.value = false;
    barChartClick(); //柱状图点击事件
  });
}
// 污染溢流统计echarts柱状图点击事件
function barChartClick() {
  chartKst.value.getZr().setCursorStyle('pointer'); //设置鼠标移入手形
  chartKst.value.off('click'); //防止触发两次点击事件
  // 柱状图点击
  chartKst.value.getZr().on('click', params => {
    let pointInPixel = [params.offsetX, params.offsetY];
    if (chartKst.value.containPixel('grid', pointInPixel)) {
      let pointInGrid = chartKst.value.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
      let xIndex = pointInGrid[0]; //索引
      let handleIndex = Number(xIndex);
      if (handleIndex == -0) handleIndex = 0;
      checkMonth.value = handleIndex + 1;
      console.log(handleIndex, checkMonth.value);
      detailObj.value.year = null;
      detailObj.value.month = checkMonth.value;
      // gis地图渲染
      let dataArr = barCount.value.siteOverflowLists[handleIndex];
      dataArr &&
        dataArr.map(item => {
          item.type = 'error_zishui';
        });
      gisMapInit(dataArr);
    }
  });
}

// 溢流污染频次统计(饼图)  降雨溢流事件
async function getDatas() {
  kstChart();
  chartLoading.value = true;
  // 溢流污染频次统计
  let res1 = await rainfallSiteCount({ year: currentYear.value });
  if (res1 && res1.code == 200) {
    let datas = res1.data;
    pcLogCount.value = datas;
    refresh.value = Math.random();
    pieTitle.value = '排口 ' + datas.drainOutletSiteNum;
    echartDataPie.value[0].value = datas.fiveOverflowNum;
    echartDataPie.value[1].value = datas.noOverflowNum;
    echartDataPie.value[2].value = datas.oneOverflowNum;
    echartDataPie.value[3].value = datas.threeOverflowNum;

    // gis地图渲染，默认加载全部的溢流点
    let logDatas = [...datas.oneOverflowSiteList, ...datas.threeOverflowSiteList, ...datas.fiveOverflowSiteList];
    logDatas.map(item => {
      item.type = 'error_zishui';
    });
    gisMapInit(logDatas);
    detailObj.value.year = currentYear.value;
    detailObj.value.month = null;
  }
  // 降雨溢流事件
  tableLoading.value = true;
  let res2 = await rainfallCountList({ year: currentYear.value });
  if (res2 && res2.code == 200) {
    tableData.value = res2.data;
    tableLoading.value = false;
  }
  chartLoading.value = false;
}
// 溢流污染频次统计 饼图点击事件
function lxClickCallBack(params) {
  console.log(params, pcLogCount.value);
  detailObj.value.year = currentYear.value;
  detailObj.value.month = null;
  let datas = [];
  if (params.name == '>=5次') {
    datas = pcLogCount.value.fiveOverflowSiteList;
  } else if (params.name == '1-2次') {
    datas = pcLogCount.value.oneOverflowSiteList;
  } else if (params.name == '3-5次') {
    datas = pcLogCount.value.threeOverflowSiteList;
  } else if (params.name == '未发生') {
    datas = pcLogCount.value.noOverflowSiteList;
  }

  // gis地图渲染
  if (params.name == '未发生') {
    datas &&
      datas.map(item => {
        item.type = 'success_zishui';
      });
  } else {
    datas &&
      datas.map(item => {
        item.type = 'error_zishui';
      });
  }
  gisMapInit(datas);
}

//自适应
function resizeTheChart() {
  chartKst.value.resize();
}

// //地图点击事件
const mapClick = async () => {
  console.log('properties', properties);
  detailObj.value.stCode = properties.overflowStCode;
  let res = await rainfallSessionOverflowList(detailObj.value);
  if (res && res.code == 200) {
    checkDataFlow(res.data);
  }
};

const checkDatas = async e => {
  detailObj.value.stCode = e;
  let res = await rainfallSessionOverflowList(detailObj.value);
  if (res && res.code == 200) {
    checkDataFlow(res.data);
  }
};
// 溢流数据详情弹窗数据加载
function checkDataFlow(data) {
  console.log(data, 9999999999);
  showStationDetail.value = true;
  tableDataStation.value = data;
  setTimeout(() => {
    if (!!!data[0]) {
      loadingStation.value = false;
      return;
    }
    // tableStation.value.setCurrentRow(data[0], true); //表格默认第一个高亮选中
    clickStation(data[0]);
  });
}
// 溢流数据详情弹窗数据表格点击获取趋势统计
let chartStation = null;
async function clickStation(row) {
  loadingStation.value = true;
  //先销毁实例
  chartStation && chartStation.dispose();
  chartStation = proxy.echarts.init(document.getElementById('ylwrStation'));
  rainfallSessionOverflowDataList({ startTime: row.startTime, endTime: row.endTime, overflowStCode: row.overflowStCode }).then(res => {
    let { dateList, codList, cq1List } = res.data;
    let charts = JSON.parse(JSON.stringify(optionChart.option2));
    charts.xAxis.data = dateList;
    charts.series[0].data = codList; //溢流污染物总量(cod)kg
    charts.series[0].type = 'line';
    charts.series[0].smooth = true;
    charts.series[1].data = cq1List; //溢流量m³
    charts.series[1].type = 'line';
    charts.series[1].smooth = true;
    charts.dataZoom = [
      { type: 'slider', start: 10, end: 60 }, // start 左边在 10% 的位置  end 右边在 60% 的位置
      { type: 'inside', start: 10, end: 60 }, //鼠标控制滚轮缩放
    ];
    if (dateList.length > 0) {
      charts.graphic.invisible = true; // 暂无数据
    } else {
      charts.graphic.invisible = false; // 暂无数据
    }
    chartStation.clear();
    chartStation.setOption(charts);
    loadingStation.value = false;
  });
}

// gis地图渲染
function gisMapInit(data) {
  console.log('gis地图渲染数据--', data);
  let keys = ['error_zishui', 'success_zishui'];
  newfiberMapbox.popupService.popups.forEach(popup => {
    nextTick(() => {
      newfiberMapbox.removePopup(popup);
    });
  });
  //keys.forEach(key => {
  let coverflowFeature = [];
  data.forEach(item => {
    if (!!!item.overflowStLonLat) {
      return;
    } else {
      let coverflowPoint = turf.point(item.overflowStLonLat.split(',').map(Number), {
        ...item,
        overflowStName: `${item.overflowStName}`,
        overflowStCode: `${item.overflowStCode}`,
        overflowCount: `${item.overflowCount || 1}`,
        codSum: `${item.codSum}`,
        cq1Sum: `${item.cq1Sum}`,
        color: item.type == 'error_zishui' ? '#d9001b' : '#70b603',
      });
      coverflowFeature.push(coverflowPoint);
    }
  });
  let geojson1 = turf.featureCollection(coverflowFeature);
  // bus.emit('getGeojsonByType', {
  //   type: key,
  //   callback: geojson => {
  //     setTimeout(() => {
  //       bus.emit('removeMapDatas', [key]);
  //       if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: geojson1, key });
  //       bus.emit('setLayerVisible', { layername: key, isCheck: true });
  //     }, 2000);
  //   },
  // });
  if (newfiberMapbox.map.getLayer('overflowBlack')) {
    newfiberMapbox.map.getSource('overflowBlack').setData(geojson1);
  } else {
    addWaterloggingLayer(geojson1, 'overflowBlack');
  }

  geojson1.features.forEach(feature => {
    let popupClass;
    feature.properties.type == 'success_zishui' ? (popupClass = 'successPopup') : (popupClass = 'errorPopup');
    return newfiberMapbox.addPopup(
      new mapboxL7.Popup({
        title: '',
        html: `<div class=${popupClass}><div class='title'>${feature.properties.overflowStName}</div>
          <div class='part'>溢流排口编号：${feature.properties.overflowStCode}</div>
          <div class='part'>溢流频次：${feature.properties.overflowCount}</div>
          <div class='part'>溢流污染量(COD)：${feature.properties.codSum}</div>
          <div class='part'>溢流量：${feature.properties.cq1Sum}</div>
          </div>`,
        lngLat: {
          lng: feature.geometry.coordinates[0],
          lat: feature.geometry.coordinates[1],
        },
        anchor: 'center',
        offsets: [0, 90],
        autoClose: false,
      })
    );
  });
  //});
}
//地图渲染点位
const addWaterloggingLayer = (geojson, layerName) => {
  !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  !!!newfiberMapbox.map.getLayer(layerName) &&
    newfiberMapbox.map.addLayer({
      id: layerName,
      type: 'circle',
      source: layerName,
      paint: {
        'circle-color': ['get', 'color'],
        'circle-radius': 7,
      },
    });
};
onMounted(() => {
  getDatas(); //加载数据
  tableArea.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
  window.addEventListener('resize', resizeTheChart);
  setTimeout(() => {
    newfiberMapbox.map.on('click', e => {
      let clickfeature = newfiberMapbox.map
        .queryRenderedFeatures([
          [e.point.x - 10 / 2, e.point.y - 10 / 2],
          [e.point.x + 10 / 2, e.point.y + 10 / 2],
        ])
        .filter(i => i.layer.id == 'overflowBlack');
      console.log('clickfeature', '点击事件', clickfeature[0].properties);
      if (clickfeature[0].properties.overflowStCode) {
        checkDatas(clickfeature[0].properties.overflowStCode);
      }
    });
  }, 5000);
});
onBeforeUnmount(() => {
  if (!!!newfiberMapbox) return;
  !!newfiberMapbox.map.getLayer('overflowBlack') && newfiberMapbox.map.removeLayer('overflowBlack');
  !!newfiberMapbox.map.getSource('overflowBlack') && newfiberMapbox.map.removeSource('overflowBlack');
});
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.overBlackCX {
  width: 100%;
  height: 100%;
  position: relative;
  .longTermYear {
    position: absolute;
    z-index: 99;
    left: 30px;
    top: 20px;
    .el-select {
      width: 100px;
    }
  }
  .imgTL {
    position: absolute;
    z-index: 99;
    left: 30px;
    bottom: 20px;
  }
  .preContentRight {
    width: 500px;
    height: calc(100vh - 100px);
    border: 1px solid #1d8db4;
    background: $mainBg;
    border-radius: 8px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 90;
    padding: 15px;
    overflow: auto;
    .chartHeight {
      width: 100%;
      height: 230px !important;
    }
    .el-table__body tr {
      cursor: pointer;
    }
  }
  .tuli {
    left: 20px;
    bottom: 30px;
    padding: 10px;
    z-index: 111;
    position: absolute;
    background: $mainColor1;
    // display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    color: #fff;
    .tuli_img {
      display: flex;
      width: 150px;
      align-items: center;
      margin-top: 8px;
      img {
        margin-right: 10px;
        width: 25px;
      }
    }
  }
}
.errorPopup {
  border-radius: 8px;
  background-color: rgba(247, 189, 15, 0.5);
  border: 2px solid #f7bd0f;
  padding: 5px;
  // color: #000;
}
.successPopup {
  border-radius: 8px;
  background-color: rgba(129, 211, 248, 0.5);
  border: 2px solid #81d3f8;
  padding: 5px;
}
.l7-popup-tip {
  display: none;
}
.l7-popup .l7-popup-content {
  padding: 0px;
  background: none;
}
.l7-popup .l7-popup-content .l7-popup-close-button {
  display: none;
}
</style>