<!--
 * @Descripttion: 
 * @version: 
 * @Author: ysh
 * @Date: 2023-05-12 11:39:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-06-08 13:43:29
-->
<template>
  <div>
    <a-descriptions bordered title="元素信息" size="small" :column="1">
      <a-descriptions-item label="名称" :labelStyle="{ width: '120px', backgroundColor: '#EAEAEA' }">{{ selectObj.name == ""
        || selectObj.name == undefined
        ? '暂无' : selectObj.name
      }}</a-descriptions-item>
      <a-descriptions-item label="类型" :labelStyle="{ width: '120px', backgroundColor: '#EAEAEA' }">{{ selectObj.type
      }}</a-descriptions-item>
      <a-descriptions-item label="面积" :labelStyle="{ width: '120px', backgroundColor: '#EAEAEA' }" v-if="areaShow">{{
        selectObj.area }}</a-descriptions-item>
      <a-descriptions-item label="总长" :labelStyle="{ width: '120px', backgroundColor: '#EAEAEA' }" v-if="lengthShow">{{
        selectObj.length }}</a-descriptions-item>
    </a-descriptions>
    <a-descriptions v-for="item in arr" bordered size="small" :column="1">
      <a-descriptions-item :label="item.key" :labelStyle="{ width: '120px', backgroundColor: '#EAEAEA' }">{{ item.value }}
      </a-descriptions-item>
    </a-descriptions>
    <a-button @click="exportData()">导出数据</a-button>
  </div>
</template>

<script setup lang="ts">
import { Polygon, Point, GeometryCollection, LineString, Circle, LinearRing, MultiPoint, MultiPolygon, MultiLineString, SimpleGeometry } from 'ol/geom';
import Feature from 'ol/Feature.js';
import { watch, ref, reactive } from 'vue';
import * as turf from '@turf/turf';
interface featuresObj {
  name: String,
  geometry: Polygon | Point | Circle | GeometryCollection | LineString | LinearRing | MultiPoint | MultiPolygon | MultiLineString | SimpleGeometry,
  type: String,
  area: String | Number,
  length: String | Number,
}
const props = defineProps(['selectFeatures']);
const selectObj = reactive<featuresObj>({
  name: '',
  geometry: new SimpleGeometry(),
  type: '',
  area: 0,
  length: 0
});
const arr = ref([]);
const areaShow = ref(false);
const lengthShow = ref(false);
watch(
  () => props.selectFeatures, (newValue) => {
    initPopup(newValue);
  }
)
function exportData() {
  let pointArray = [];
  if (props.selectFeatures.getGeometry().flatCoordinates[2] == 0)
    for (let i = 0; i < props.selectFeatures.getGeometry().flatCoordinates.length; i = i + 3) {
      let point = [];
      point[0] = props.selectFeatures.getGeometry().flatCoordinates[i];
      point[1] = props.selectFeatures.getGeometry().flatCoordinates[i + 1];
      pointArray.push(point)
    }
  else
    for (let i = 0; i < props.selectFeatures.getGeometry().flatCoordinates.length; i = i + 2) {
      let point = [];
      point[0] = props.selectFeatures.getGeometry().flatCoordinates[i];
      point[1] = props.selectFeatures.getGeometry().flatCoordinates[i + 1];
      pointArray.push(point)
    }
  let geojson = {};
  geojson["type"] = "FeatureCollection";
  let arr = [];
  let features = {};
  features["type"] = "Feature"
  let geometry = {};
  if (props.selectFeatures.getGeometry() instanceof Point)
    geometry["type"] = "Point"
  else if (props.selectFeatures.getGeometry() instanceof LineString)
    geometry["type"] = "LineString"
  else if (props.selectFeatures.getGeometry() instanceof Polygon)
    geometry["type"] = "Polygon"
  geometry["coordinates"] = pointArray
  features["geometry"] = geometry
  arr.push(features)
  geojson["features"] = arr;
  const str = JSON.stringify(geojson);
  const blob = new Blob([str], { type: "application/json" });
  const tmpLink = document.createElement("a");
  const objectUrl = URL.createObjectURL(blob);
  tmpLink.href = objectUrl;
  tmpLink.download = "feature";
  document.body.appendChild(tmpLink);
  tmpLink.click();
  document.body.removeChild(tmpLink);
  URL.revokeObjectURL(objectUrl);
}

function initPopup(features: Feature) {
  if (features != undefined && features != null) {
    let geometry = features.getGeometry();
    let properties = features.getProperties();
    let name = properties.name;
    if (name == undefined || name == "" || name == null) {
      name = properties.NAME;
    }
    selectObj.name = name;
    areaShow.value = false;
    lengthShow.value = false;
    if (geometry instanceof Polygon) {
      let polygon = turf.polygon([geometry.getLinearRing().getCoordinates()]);
      let area = turf.area(polygon);
      let unit = 'm²'
      if (area > 1000000) {
        area = (area / 1000000);
        unit = 'km²'
      }
      areaShow.value = true;
      selectObj.type = '面';
      selectObj.area = area.toFixed(4) + unit;
      selectObj.geometry = geometry;
    } else if (geometry instanceof Point) {
      selectObj.type = '点';
    } else if (geometry instanceof GeometryCollection) {
      let geometries = geometry.getGeometries();
      for (let g of geometries) {
        if (g instanceof LineString) {
          selectObj.type = '线';
        }
      }
    } else if (geometry instanceof LineString) {
      let poyline = turf.lineString(geometry.getCoordinates());
      let length = turf.length(poyline);
      selectObj.type = '线';
      lengthShow.value = true;
      selectObj.length = length.toFixed(4) + 'km';
    } else if (geometry instanceof LinearRing) {
      selectObj.type = '线';
    } else if (geometry instanceof MultiPoint) {
      selectObj.type = '点集合';
    } else if (geometry instanceof MultiPolygon) {
      selectObj.type = '面集合';
    } else if (geometry instanceof MultiLineString) {
      selectObj.type = '线集合';
    }
    let keyList = Object.keys(properties)
    let valueList = Object.values(properties)
    arr.value.length = 0
    for (let i = 0; i < keyList.length; i++) {
      if (keyList[i] != "geometry" && !keyList[i].includes("ID") && !keyList[i].includes("id") && !keyList[i].includes("color")) {
        let o = { key: '', value: '' };
        o['key'] = keyList[i]
        o['value'] = valueList[i]
        arr.value.push(o)
      }
    }

  } else {

  }
}
initPopup(props.selectFeatures);
</script>

<style scoped></style>