<!--
 * @Descripttion: 
 * @version: 
 * @Author: ysh
 * @Date: 2023-05-12 11:39:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-06-20 14:38:47
-->
<template>
  <div class="table-box">
    <div style="text-align: center;margin-bottom: 5px;">图层名：{{ props.tableName }}</div>
    <a-table bordered :data-source="data" :columns="columns" :scroll="{ y: 110 }" :customRow="onClick">
      <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span style="color: #1890ff">Name</span>
      </template>
    </template>
    <template
      #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
    >
      <div style="padding: 8px">
        <a-input
          ref="searchInput"
          :placeholder="`Search ${column.dataIndex}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          <template #icon><SearchOutlined /></template>
          Search
        </a-button>
        <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
          Reset
        </a-button>
      </div>
    </template>
    <template #customFilterIcon="{ filtered }">
      <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
    </template>
    <template #bodyCell="{ text, column }">
      <span v-if="state.searchText && state.searchedColumn === column.dataIndex">
        <template
          v-for="(fragment, i) in text
            .toString()
            .split(new RegExp(`(?<=${state.searchText})|(?=${state.searchText})`, 'i'))"
        >
          <mark
            v-if="fragment.toLowerCase() === state.searchText.toLowerCase()"
            :key="i"
            class="highlight"
          >
            {{ fragment }}
          </mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
    </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/maps';
import { SearchOutlined } from '@ant-design/icons-vue';
import { Circle, Fill, Stroke, Style, Text } from 'ol/style';
import { reactive, ref } from 'vue';
const props = defineProps({
  tableData: Object,
  tableName: String
})
const state = reactive({
  searchText: '',
  searchedColumn: '',
});

const searchInput = ref();
const handleSearch = (selectedKeys, confirm, dataIndex) => {
  confirm();
  state.searchText = selectedKeys[0];
  state.searchedColumn = dataIndex;
};

const handleReset = clearFilters => {
  clearFilters({ confirm: true });
  state.searchText = '';
};
const maps = useMapStore().$state.olmap;
var selectedFeature;
var lastselectedFeature;
var data = [];
var tableData = Object.values(props.tableData.getSource().uidIndex_)
for (let td of tableData) {
  data.push(td.getProperties())
}

let columns = [];
let data0Value = Object.keys(tableData[0].getProperties())
for (let d of data0Value) {
  if (d != "geometry" && !d.includes("ID") && !d.includes("id") && !d.includes("color")) {
    let column = { title: "", dataIndex: "", key: "",customFilterDropdown:true,onFilter:{}, onFilterDropdownOpenChange:{}};
    column.title = d
    column.dataIndex = d
    column.key = d
    column.customFilterDropdown = true,
    column.onFilter = (value, record) => record.name.toString().toLowerCase().includes(value.toLowerCase()),
    column.onFilterDropdownOpenChange = visible => {
      if (visible) {
        setTimeout(() => {
          searchInput.value.focus();
        }, 100);
      }
    },
    columns.push(column)
  }
}
function onClick(record, index) {
  return {
    onclick: (event) => {
      let style = new Style({
        fill: new Fill({
          color: [75, 126, 255, 0.6]
        }),
        stroke: new Stroke({
          width: 2,
          color: '#FFFF00',
          lineDash: [8, 4],
          lineCap: 'butt'
        }),
        image: new Circle({
          fill: new Fill({
            color: 'rgba(255,255,255,0.8)'
          }),
          stroke: new Stroke({
            color: '#EE0000',
            width: 2,
          }),
          radius: 7,
        }),
      })
      let laststyle = new Style({
        stroke: new Stroke({
          color: getColor(record.geometry.getProperties().Layer),
          width: 2
        }),
        text: new Text({
          text: record.geometry.getProperties().Text,
          font: '10px sans-serif',
          textAlign: "left",
          textBaseline: "middle",
          fill: new Fill({
            color: getColor(record.geometry.getProperties().Layer)
          }),
          placement: "point",
          overflow: false
        })
      })
      let features = props.tableData.getSource().getFeatures()
      lastselectedFeature = selectedFeature
      for (var i = 0; i < features.length; i++) {
        if (features[i].getProperties().EntityHandle == record.EntityHandle) {
          selectedFeature = features[i];
          break;
        }
      }
      lastselectedFeature.setStyle(laststyle)
      selectedFeature.setStyle(style);

      maps?.getView().fit(record.geometry, maps.getSize(), { padding: [300, 300, 300, 150], constrainResolution: false })
    },
  }
}


function getColor(layer) {
  let color = "#FF0000";
  if (!isNaN(parseInt(layer))) {
    let layerNum = parseInt(layer);
    if (layerNum < 4000)
      color = "#FF0000"; //1
    else if (layerNum < 5000)
      color = "#00FFFF"; //4
    else if (layerNum < 5300)
      color = "#FF0000"; //1
    else if (layerNum < 5500)
      color = "#0000FF"; //5
    else if (layerNum < 6000)
      color = "#FF0000"; //1
    else if (layerNum < 6400)
      color = "#0000FF"; //5
    else if (layerNum < 6740)
      color = "#FF0000"; //1
    else if (layerNum < 6742)
      color = "#FFFFFF"; //7
    else if (layerNum < 6743)
      color = "#FFFF00"; //2
    else if (layerNum < 6752)
      color = "#FFFFFF"; //7
    else if (layerNum < 6753)
      color = "#FFFF00"; //2
    else if (layerNum < 8000)
      color = "#FF0000"; //1
    else if (layerNum < 8111)
      color = "#FFFFFF"; //7
    else if (layerNum < 8121)
      color = "#FFFF00"; //2
    else if (layerNum < 8122)
      color = "#FF0000"; //1
    else if (layerNum < 8131)
      color = "#FFFFFF"; //7
    else if (layerNum < 8300)
      color = "#FFFF00"; //2
    else if (layerNum < 8700)
      color = "#FF0000"; //1
    else if (layerNum < 9612)
      color = "#00FF00"; //3
    else if (layerNum < 9613)
      color = "#00FFFF"; //4
    else if (layerNum < 9614)
      color = "#00FF00"; //3
    else if (layerNum < 9801)
      color = "#FF0000"; //1
    else if (layerNum < 10000)
      color = "#00FF00"; //3
  }
  return color;
}
</script>

<style scoped lang="scss">
.close {
  position: absolute;
  right: 10px;
  top: -5px;
  font-size: 25px;
  color: #fff;
  cursor: pointer;
}

.close:hover {
  color: #ff9a00;
}

.table-box {
  padding: 5px;

}
.highlight {
  background-color: rgb(255, 192, 105);
  padding: 0px;
}
</style>