<template>
  <!-- 地表水体考核年度统计表 -->
  <div class="dbsWaterCount">
    <el-table :data="tableData" max-height="500" 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="actualPercent">
        <template #default="{ row }">
          <span style="color: lime">
            {{ row.actualPercent }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="目标达标率%" prop="targetPercent" />
      <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-column label="水体检测记录">
        <template #default="{ row }">
          <el-button link type="primary" icon="View" @click="onCheck(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { defineEmits, onBeforeUnmount } from 'vue';
import { preventionInfo } from '@/api/spongePerformance/prevention';
import bus from '@/bus';

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

//获取列表数据
const getDataList = async () => {
  let params = {
    examineType: 'water_quality',
  };
  const res = await preventionInfo(params);
  if (res && res.code == 200) {
    tableLoading.value = false;
    tableData.value = res.data;
    if (Boolean(tableData.value.length)) {
      tableData.value.forEach(item => {
        if (item.waterQualitySampleInfos) {
          item.waterQualitySampleInfos.forEach(element => {
            element.examineYear = item.examineYear;
          });
        }
      });
    }
    tableRef.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
    clickTableRow(tableData.value[0]); //默认渲染第一行gis地图
  }
};
//查看点击事件
const onCheck = row => {
  emits('searchClick', { ...row, type: 1 });
};
// 表格点击，查看对应的项目情况
function clickTableRow(row) {
  // console.log(row);
  row.waterQualitySampleInfos &&
    row.waterQualitySampleInfos.map(item => {
      if (row.reachStandard == 0) {
        item.type = 'error_zishui'; //未消除
      } else {
        item.type = 'success_zishui'; //已消除
      }
    });
  gisMapInit(row.waterQualitySampleInfos);
}

// 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);
    });
  });
  if (newfiberMapbox.map.getLayer('surfaceWater')) {
    newfiberMapbox.map.removeLayer('surfaceWater');
    newfiberMapbox.map.removeSource('surfaceWater');
  }
  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 ? '达标' : '不达标'}`,
          waterQualityName: `${item.waterQualityName}`,
          color: item.reachStandard == 1 ? '#70b603' : '#d9001b',
        });
        coverflowFeature.push(coverflowPoint);
      }
    });
    let geojson1 = turf.featureCollection(coverflowFeature);
    addWaterloggingLayer(geojson1, 'surfaceWater');
    // 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);
    //   },
    // });
    geojson1.features.forEach(feature => {
      return newfiberMapbox.addPopup(
        new mapboxL7.Popup({
          title: '',

          html: `
          <div class='popupMapPoint successPopup' style="background:rgba(129, 211, 248, 0.5); border: 2px solid #81d3f8;"><div class='titles' style="padding-left:10px">${feature.properties.riverName}</div>
          <div class='part'>水质类别：${feature.properties.waterQualityName}</div>
          <div class='part'>是否达标：${feature.properties.reachStandard}</div>
          </div>`,
          lngLat: {
            lng: feature.geometry.coordinates[0],
            lat: feature.geometry.coordinates[1],
          },
          anchor: 'center',
          offsets: [0, 90],
          autoClose: false,
        })
      );
    });
  });
  newfiberMapbox.map.on('click', 'surfaceWater', 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 == 'surfaceWater');
    console.log('clickfeature', '点击事件', clickfeature);
    emits('clicksurfaceWater', clickfeature[0].properties);
  });
}
//地图渲染点位
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(() => {
  getDataList();
});
onBeforeUnmount(() => {
  if (!newfiberMapbox) return;
  newfiberMapbox.popupService.popups.forEach(popup => {
    nextTick(() => {
      if (!newfiberMapbox) return;
      newfiberMapbox.removePopup(popup);
    });
  });
  if (newfiberMapbox.map.getLayer('surfaceWater')) {
    newfiberMapbox.map.removeLayer('surfaceWater');
    newfiberMapbox.map.removeSource('surfaceWater');
  }
});
</script>
<style lang="scss" scoped>
.dbsWaterCount {
  margin-top: 20px;
}
.l7-popup-tip {
  display: none !important;
}
.l7-popup .l7-popup-content {
  padding: 0px;
  background: rgba(3, 59, 79, 0) !important;
}
.l7-popup-content {
  padding: 0px;
  background: rgba(3, 59, 79, 0) !important;
}
.l7-popup .l7-popup-content .l7-popup-close-button {
  display: none !important;
}
.surfaceWatermaps #mapboxContainer {
  display: none !important;
}
.mapPage #mapboxContainer {
  display: none !important;
}
.successPopup {
  border-radius: 8px;
  background-color: rgba(129, 211, 248, 0.5);
  border: 2px solid #81d3f8;
  padding: 5px;
}
.titles {
  font-size: 16px;
  padding: 10px;
}
</style>