<template>
  <div class="water-analysis-page">
    <el-table :data="tableData" ref="tableRef" v-loading="tableLoading" @row-click="clickTableRow" highlight-current-row>
      <el-table-column label="年度" prop="examineYear" />
      <el-table-column label="黑臭水体/个" prop="unRemoveNum" />
      <el-table-column label="考核水体数/个" prop="totalNum" />
      <el-table-column label="目标消除比%" prop="targetPercent" />
      <el-table-column label="实际消除比%" prop="actualPercent">
        <template #default="{ row }">
          <span style="color: lime">
            {{ row.actualPercent }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="达标情况" prop="reachStandard">
        <template #default="scope">
          <span
            :style="{
              color: scope.row.reachStandard == 0 ? 'red' : 'lime',
            }"
          >
            <el-tag v-if="scope.row.reachStandard === ''" type="warning">未评价</el-tag>
            <el-tag v-else :type="scope.row.reachStandard == 0 ? 'error' : scope.row.reachStandard == 1 ? 'success' : ''">
              {{ scope.row.reachStandard == 0 ? '不达标' : '达标' }}
            </el-tag>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { preventionInfo, blackWaterInfoList } from '@/api/spongePerformance/prevention';
import bus from '@/bus';
import { riverInfoWater } from '@/api/spongePerformance/surfaceWater';

const { proxy } = getCurrentInstance();
const tableData = ref([]);
const tableLoading = ref(true);
const tableRef = ref(null);

const emits = defineEmits(['clicksWaterBodies']);
//获取列表数据
const getDataList = async () => {
  let params = {
    examineType: 'black_odor',
  };
  const res = await preventionInfo(params);
  if (res && res.code == 200) {
    tableLoading.value = false;
    tableData.value = res.data;
    tableRef.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
    clickTableRow(tableData.value[0]); //默认渲染第一行gis地图
  }
};

// 表格点击，查看对应的项目情况
function clickTableRow(row) {
  row.blackOdorSampleInfos &&
    row.blackOdorSampleInfos.map(item => {
      if (row.reachStandard == 0) {
        item.type = 'error_zishui'; //未消除
      } else {
        item.type = 'success_zishui'; //已消除
      }
    });
  gisMapInit(row.blackOdorSampleInfos);
}

// gis地图渲染
function gisMapInit(data) {
  // console.log('gis地图渲染数据--', data);
  if (!!!data) return;
  let keys = ['error_zishui', 'success_zishui'];
  newfiberMapbox.popupService.popups.forEach(popup => {
    nextTick(() => {
      newfiberMapbox.removePopup(popup);
    });
  });
  !!newfiberMapbox.map.getLayer('odorousWaterBodies') && newfiberMapbox.map.removeLayer('odorousWaterBodies');
  !!newfiberMapbox.map.getSource('odorousWaterBodies') && newfiberMapbox.map.removeSource('odorousWaterBodies');
  keys.forEach(key => {
    let coverflowFeature = [];
    let selectData = data.filter(i => i.type == key);
    selectData.forEach(item => {
      if (!!!item.riverInfo.lonLat) {
        return;
      } else {
        let coverflowPoint = turf.point(item.riverInfo.lonLat.split(',').map(Number), {
          ...item,
          riverName: `${item.riverName}`,
          reachStandard: `${item.reachStandard == 1 ? '达标' : '不达标'}`,
          blackOdorName: `${item.blackOdorName}`,
          color: item.reachStandard == 1 ? '#70b603' : '#d9001b',
        });
        coverflowFeature.push(coverflowPoint);
      }
    });
    let geojson1 = turf.featureCollection(coverflowFeature);
    addWaterloggingLayer(geojson1, 'odorousWaterBodies');
  });
}
//地图渲染内涝点
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,
      },
    });
};
//地图渲染黑臭水体
const addOdorousWaterBodies = async () => {
  const res = await blackWaterInfoList();
  if (res && res.code == 200) {
    let black_odor = [],
      black_odor_label = [];
    res.data.forEach(data => {
      data.fillcolor = '#d9001b';
      let waterLine = turf.feature(Terraformer.WKT.parse(data.geometrys), data);
      let waterLabel = turf.center(waterLine, {
        properties: data,
      });
      black_odor.push(waterLine);
      black_odor_label.push(waterLabel);
    });
    let waterLineGeojson = turf.featureCollection(black_odor);
    let waterLabelGeojson = turf.featureCollection(black_odor_label);
    console.log('blackWaterGeojson---', waterLineGeojson);
    console.log('waterLabelGeojson---', waterLabelGeojson);

    !newfiberMapbox.map.getSource('waterLine') && newfiberMapbox.map.addSource('waterLine', { type: 'geojson', data: waterLineGeojson });
    !newfiberMapbox.map.getSource('waterLabel') && newfiberMapbox.map.addSource('waterLabel', { type: 'geojson', data: waterLabelGeojson });
    !newfiberMapbox.map.getLayer('waterLine') &&
      newfiberMapbox.map.addLayer({
        id: 'waterLine',
        type: 'line',
        source: 'waterLine',
        paint: {
          'line-color': ['get', 'fillcolor'],
          'line-width': 5,
        },
      });
    !newfiberMapbox.map.getLayer('waterLabel') &&
      newfiberMapbox.map.addLayer({
        id: 'waterLabel',
        type: 'symbol',
        source: 'waterLabel',
        layout: {
          'text-field': ['get', 'blackWaterName'],
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-offset': [0, 2],
        },
        paint: {
          'text-halo-color': 'rgba(238, 251, 255,1)',
          'text-color': ['get', 'fillcolor'],
          'icon-opacity': 1,
          'text-halo-width': 1,
        },
      });

    //newfiberMapbox.map.moveLayer('waterLine', 'odorousWaterBodies');
  }
};

onMounted(() => {
  getDataList();
  setTimeout(() => {
    addOdorousWaterBodies();
  }, 2000);

  setTimeout(() => {
    //newfiberMapbox.map.moveLayer('xiaoganWater', 'waterLine');
    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 == 'odorousWaterBodies' || i.layer.id == 'waterLine');
      console.log('clickfeature', '点击事件', clickfeature);
      emits('clicksWaterBodies', clickfeature[0].properties);
    });
  }, 5000);
});
onBeforeUnmount(() => {
  if (!!!newfiberMapbox) return;
  !!newfiberMapbox.map.getLayer('waterLine') && newfiberMapbox.map.removeLayer('waterLine');
  !!newfiberMapbox.map.getSource('waterLine') && newfiberMapbox.map.removeSource('waterLine');
  !!newfiberMapbox.map.getLayer('odorousWaterBodies') && newfiberMapbox.map.removeLayer('odorousWaterBodies');
  !!newfiberMapbox.map.getSource('odorousWaterBodies') && newfiberMapbox.map.removeSource('odorousWaterBodies');
  !!newfiberMapbox.map.getLayer('waterLabel') && newfiberMapbox.map.removeLayer('waterLabel');
  !!newfiberMapbox.map.getSource('waterLabel') && newfiberMapbox.map.removeSource('waterLabel');
  newfiberMapbox.popupService.popups.forEach(popup => {
    nextTick(() => {
      if (!!!newfiberMapbox) return;
      newfiberMapbox.removePopup(popup);
    });
  });
});
</script>
<style lang="scss">
.l7-popup-tip {
  display: none;
}
.l7-popup .l7-popup-content {
  padding: 0px;
  background: rgba(3, 59, 79, 0);
}
.l7-popup .l7-popup-content .l7-popup-close-button {
  display: none;
}
</style>