<template>
  <!-- 长效考核-可渗透水地面面积 -->
  <div class="pergroundCX">
    <!-- gis地图 -->
    <MapBox :initJson="`/static/libs/mapbox/style/preventionSFQ.json`" l7=""></MapBox>

    <!-- <img src="@/assets/images/longTerm/kssdm.png" class="imgTL" /> -->
    <!-- 右侧内容 -->
    <div :class="['videoImgRCX', ifExpand ? 'rightZkCX' : 'rightSqCX']" @click="ifExpand = !ifExpand"></div>
    <div :class="['preContentRight', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
      <div class="selectTitle">
        <div class="name">年度可渗透地面变化情况</div>
        <!-- <el-select v-model="currentYear" @change="changeMonitorYear" style="width: 100px" size="small">
          <el-option label="2023年" value="2023"></el-option>
          <el-option label="2024年" value="2024"></el-option>
          <el-option label="2025年" value="2025"></el-option>
        </el-select> -->
        <div class="titleEnd">建成区面积：{{ areaData }}k㎡</div>
      </div>
      <div id="chartAreaST" class="chartHeight"></div>

      <div class="selectTitle">
        <div class="name">年度项目可渗透地面面积比情况</div>
      </div>
      <el-table ref="tableArea" :data="tableData" height="500" v-loading="tableLoading" @row-click="checkProject" highlight-current-row>
        <el-table-column label="项目名称" prop="projectName" />
        <el-table-column label="完工年度" prop="year" width="80" />
        <el-table-column label="可渗透面积比(%)" prop="permeableFloorAreaPercent" width="130" />
      </el-table>
    </div>
  </div>
</template>
<script setup>
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import bus from '@/bus';
import optionChart from './chartOption.js';
import { getConfigKey } from '@/api/system/config'; //获取参数值
import { permeableFloorAreaChart } from '@/api/longTerm/index.js';

const { proxy } = getCurrentInstance();
const ifExpand = ref(true);
const chartKst = shallowRef(null);
const tableData = ref([]);
const tableLoading = ref(false);
const tableArea = ref(null);
const areaData = ref('');
const timerTS = ref(null);
const dataLists = ref([]);
// const currentYear = ref('2024');
// 可渗透地面变化echarts
function kstChart() {
  //先销毁实例
  chartKst.value && chartKst.value.dispose();
  chartKst.value = proxy.echarts.init(document.getElementById('chartAreaST'));
  permeableFloorAreaChart().then(res => {
    let datas = res.data;
    optionChart.option1.xAxis.data = datas.years;
    optionChart.option1.series[0].data = datas.permeableFloorAreaTotals;
    optionChart.option1.series[1].data = datas.permeableFloorAreaPercents;
    dataLists.value = datas.projectCompletionAcceptanceList;
    if (datas.years.length == 0) {
      optionChart.option1.graphic.invisible = false; // 暂无数据
    } else {
      optionChart.option1.graphic.invisible = true; // 暂无数据
    }
    chartKst.value.clear();
    chartKst.value.setOption(optionChart.option1);
    // 默认加载第一个年份的表格数据
    tableData.value = datas.projectCompletionAcceptanceList[0];
    // gis地图渲染
    tableData.value &&
      tableData.value.map(item => {
        item.type = 'error_zishui';
      });
    intiMapDataPoint(tableData.value);
    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;
      console.log(handleIndex);
      // gis地图渲染
      let dataArr = dataLists.value[handleIndex];
      dataArr &&
        dataArr.map(item => {
          item.type = 'error_zishui';
        });
      tableData.value = dataArr;
      intiMapDataPoint(dataArr);
    }
  });
}
// 表格项目点击在地图定位
function checkProject(row) {
  let lonlat = row.projectLocation.split(',');
  newfiberMapbox.map.easeTo({
    center: [Number(lonlat[0]), Number(lonlat[1])],
  });
}

// 获取建成区面积
function getAreaData() {
  getConfigKey('jcq_area').then(res => {
    areaData.value = res.data || '0';
  });
}

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

// 地图渲染点位
function intiMapDataPoint(data) {
  newfiberMapbox.popupService.popups.forEach((popup, index) => {
    nextTick(() => {
      newfiberMapbox.removePopup(popup);
    });
  });
  let geojson1 = turf.featureCollection(
    data.map(item =>
      turf.point(item.projectLocation.split(','), {
        ...item,
        projectName: `${item.projectName}`,
        permeableFloorArea: `${item.permeableFloorArea} k㎡`,
        permeableFloorAreaPercent: `${item.permeableFloorAreaPercent} %`,
        color: '#d9001b',
      })
    )
  );
  let key = 'error_zishui';
  // bus.emit('getGeojsonByType', {
  //   type: 'error_zishui',
  //   callback: geojson => {
  //     setTimeout(() => {
  //       bus.emit('removeMapDatas', ['error_zishui']);
  //       if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: geojson1, key });
  //       bus.emit('setLayerVisible', { layername: key, isCheck: true });
  //     }, 2000);
  //   },
  // });
  addWaterloggingLayer(geojson1, 'waterLoging');
  geojson1.features.forEach(feature => {
    console.log(feature.properties, 99999);
    let popupClass;
    !!feature.properties.isFlood ? (popupClass = 'successPopup') : (popupClass = 'errorPopup');
    !!feature.properties.isFlood ? (feature.properties.isFlood = '0') : (feature.properties.isFlood = '1');
    return newfiberMapbox.addPopup(
      new mapboxL7.Popup({
        title: '',
        html: `
        <div class='popupMapPoint successPopup'  style=" background-color: rgba(247, 189, 15, 0.5); border: 2px solid #f7bd0f;"><div class='titles' style="padding-left:10px">${feature.properties.projectName}</div>
          <div class='part'>可渗透地面面积：${feature.properties.permeableFloorArea}</div>
          <div class='part'>可渗透地面面积比例：${feature.properties.permeableFloorAreaPercent}</div>
          </div>`,
        lngLat: {
          lng: feature.geometry.coordinates[0],
          lat: feature.geometry.coordinates[1],
        },
        anchor: 'center',
        offsets: [20, 60],
        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(() => {
  kstChart();
  window.addEventListener('resize', resizeTheChart);
  getAreaData();
  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 == 'waterLoging');
      console.log('clickfeature', '点击事件', clickfeature);
    });
  }, 5000);
});
onBeforeUnmount(() => {
  if (!!!newfiberMapbox) return;
  !!newfiberMapbox.map.getLayer('waterLoging') && newfiberMapbox.map.removeLayer('waterLoging');
  !!newfiberMapbox.map.getSource('waterLoging') && newfiberMapbox.map.removeSource('waterLoging');
  newfiberMapbox.popupService.popups.forEach(popup => {
    nextTick(() => {
      newfiberMapbox.removePopup(popup);
    });
  });
  if (timerTS.value) {
    clearInterval(timerTS.value);
  }
});
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.l7-popup-tip {
  display: none;
}
.l7-popup .l7-popup-content {
  padding: 0px;
  background: #033b4f;
}
.l7-popup .l7-popup-content .l7-popup-close-button {
  display: none;
}
.pergroundCX {
  width: 100%;
  height: 100%;
  position: relative;
  .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: 260px;
    }
    .el-table__body tr {
      cursor: pointer;
    }
  }
}
</style>