<template>
  <!-- 工程法 -->
  <div class="water-analysis-page">
    <el-table
      :key="isFlag"
      :data="tableData"
      max-height="500"
      v-loading="tableLoading"
      @row-click="clickModal"
      highlight-current-row
      ref="tableModalGC"
    >
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column :label="i.value" :prop="i.key" show-overflow-tooltip v-for="i in cloums">
        <template #default="{ row }" v-if="i.key == 'isStandard'">
          <el-tag round :type="row.isStandard === '' ? 'warning' : row.isStandard === '1' ? 'success' : 'error'">
            {{ row.isStandard === '' ? '未填报' : row.isStandard === '1' ? '达标' : '未达标' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <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 { waterLoggingCleanProject } from '@/api/spongePerformance/prevention';
const { proxy } = getCurrentInstance();
import { nextTick, reactive } from 'vue';
import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js';

let isFlag = ref(1);
const cloums = ref([
  { value: '考核年份', key: 'year' },
  { value: '消除个数', key: 'noFloodWaterLoggingPointNum' },
  { value: '总数', key: 'waterLoggingPointNum' },
  { value: '消除比例%', key: 'noFloodPercent' },
  { value: '目标%', key: 'targetPercent' },
  { value: '达标情况', key: 'isStandard' },
]);

const { params } = defineProps(['params']);
const emits = defineEmits();
const tableModalGC = ref(null);
const floodPointList = ref([]);
const waterLoggingData = ref([]);
const waterLoggingDataByType = ref([]);
//动态组件
let dataForm = reactive({
  tableData: '',
  tableDateTwo: '',
  tableLoading: true,
});
let { date, tableData, tableDateTwo, tableLoading } = toRefs(dataForm);
//获取列表数据
//搜索
const search = p => {
  dynamic_page_data_typeM(p);
  isFlag.value++;
};
defineExpose({ search });
// 查看上报数据
const onCheck = (row, ty, t) => {
  console.log('row', row, waterLoggingData.value);
  emits('searchClick', {
    data: row,
    type: 1,
    list: waterLoggingData.value,
  });
};
const dynamic_page_data_typeM = async id => {
  let res = await waterLoggingCleanProject(id);
  if (res && res.code == 200) {
    tableData.value = res.data;
    tableModalGC.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
    tableLoading.value = false;
    console.log('tableData.value', tableData.value);
    addWaterLoggingByType(tableData.value[0].floodPointList);
  }
};
//地图添加消除与未消除内涝点
const addWaterLoggingByType = data => {
  let success_zishuiDate = [];
  let error_zishuiDate = [];
  if (data.length) {
    data.map(item => {
      item.color = '#d9001b';
      item.isClear = false;
    });
    error_zishuiDate = data;
    waterLoggingData.value.forEach(element => {
      data.forEach(item => {
        if (item.name != element.name) {
          success_zishuiDate.push(element);
        }
      });
    });
    waterLoggingDataByType.value = success_zishuiDate.concat(error_zishuiDate);
  } else waterLoggingDataByType.value = waterLoggingData.value;
  let waterLogjson = getWaterloggingGeojson(waterLoggingDataByType.value);
  if (!newfiberMapbox.map.getLayer('waterLoging')) {
    addWaterloggingLayer(waterLogjson, 'waterLoging');
  } else {
    newfiberMapbox.map.getSource('waterLoging').setData(waterLogjson);
  }
  addwaterlogingPopup(waterLogjson);
};
// 工程法表格点击
function clickModal(row) {
  floodPointList.value = row.floodPointList;
  // gis渲染点位
  addWaterLoggingByType(floodPointList.value);
}
//获取25个内涝点
const getWaterlogging = async () => {
  let res = await waterloggingPointList();
  if (res && res.code == 200) {
    waterLoggingData.value = res.data;
    waterLoggingData.value.forEach(element => {
      element.color = '#70b603';
      element.isClear = true;
    });
  }
};
//内涝点geojson
const getWaterloggingGeojson = data => {
  let features = [];
  data.forEach(element => {
    let feature = {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [Number(element.longitude), Number(element.latitude)],
      },
      properties: element,
    };
    features.push(feature);
  });
  return {
    type: 'FeatureCollection',
    features: features,
  };
};
//地图渲染内涝点
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 addwaterlogingPopup = geojson => {
  newfiberMapbox.popupService.popups.forEach(popup => {
    nextTick(() => {
      newfiberMapbox.removePopup(popup);
    });
  });
  geojson.features.forEach(feature => {
    let popupClass;
    !!feature.properties.isClear ? (popupClass = 'successPopup') : (popupClass = 'errorPopup');
    !!feature.properties.isClear ? (feature.properties.isClear = '已消除') : (feature.properties.isClear = '未消除');
    return newfiberMapbox.addPopup(
      new mapboxL7.Popup({
        title: '',
        html: `
          <div class=${popupClass}><div class='title'>${feature.properties.name}</div>
          <div class='part'>${feature.properties.isClear}</div>
          </div>`,
        lngLat: {
          lng: feature.geometry.coordinates[0],
          lat: feature.geometry.coordinates[1],
        },
        anchor: 'center',
        offsets: [0, 60],
        autoClose: false,
      })
    );
  });
};
onMounted(() => {
  dynamic_page_data_typeM(params);
  getWaterlogging();
  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);
    });
  });
});
</script>
<style lang="scss">
.l7-popup-tip {
  display: none;
}
.l7-popup .l7-popup-content {
  padding: 0px;
  background: #033b4f;
  border-radius: 8px;
}
.l7-popup .l7-popup-content .l7-popup-close-button {
  display: none;
}
.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;
}
.title {
  font-size: 16px;
}
</style>