<template>
  <div>
    <a-row ::gutter="0">
      <a-col :span="12">
        <BasicTable @register="registerTable" @row-click="handRowClick">
          <template #toolbar>
            <a-button type="primary" @click="updateGeoTiff">更新最新影像</a-button>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'layerName'">
              <span class="content-full">{{ record.layerName }}</span>
            </template>
            <template v-if="column.key === 'dataTable'">
              <span class="content-full">{{ record.dataTable }}</span>
            </template>
            <template v-if="column.key === 'shpPath'">
              <span class="content-full">{{ record.shpPath }}</span>
            </template>
            <template v-if="column.key === 'tiffPath'">
              <span class="content-full">{{ record.tiffPath }}</span>
            </template>
            <template v-if="column.key === 'createTime'">
              <span class="content-full">{{ record.createTime }}</span>
            </template>
            <template v-if="column.key === 'updateTime'">
              <span class="content-full">{{ record.updateTime }}</span>
            </template>
            <template v-if="column.key === 'accessUrl'">
              <a-image
                :src="getUrl(record)"
                :style="{ marginRight: '10px' }"
                :width="100"
                :height="100"
                :preview="{
                  visible,
                  onVisibleChange: setVisible,
                }"
              />
            </template>
          </template>
        </BasicTable>
      </a-col>
      <a-col :span="12">
        <div>
          <MapComponent
            ref="mapboxComponentRef"
            style="
              position: absolute;
              top: 16px;
              left: 0px;
              height: calc(100vh - 112px);
              width: calc(85vh);
              z-index: 0;
            "
          />
        </div>
      </a-col>
    </a-row>

    <a-modal
      title="更新失败的影像"
      :open="failOpen"
      :maskClosable="false"
      :footer="null"
      :width="1000"
      @cancel="failOpenClose"
    >
      <FailYingxiang :failYingxiangData="failYingxiangData" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue';
  // vben
  import { useMessage } from '@/hooks/web/useMessage';
  import proj4 from 'proj4';
  import { getAppEnvConfig } from '@/utils/env';
  import { BasicTable, useTable } from '@/components/Table';
  import { columns, searchFormSchema } from './util';
  import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue';
  import FailYingxiang from './failYingxiang.vue';
  // api
  import {
    GeoTiffManagerUpdateGeoTiff,
    GeoTiffManagerLoadPage,
    GeoTiffManagerGet,
  } from '@/api/demo/system';

  // 图片路径拼接
  const { VITE_GLOB_API_URL } = getAppEnvConfig();
  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');

  const { createMessage } = useMessage();

  proj4.defs(
    'EPSG:4548',
    '+proj=tmerc +lat_0=37.56666666666666 +lon_0=126.93333333333333 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +towgs84=-119.819,-78.445,-112.283,0,0,0,0 +units=m +no_defs',
  );

  // 影像管理
  const [registerTable, { reload, getSelectRows }] = useTable({
    title: '影像管理',
    api: GeoTiffManagerLoadPage,
    columns: columns,
    useSearchForm: true,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    showIndexColumn: true,
    bordered: true,
    showTableSetting: true,
    handleSearchInfoFn(info) {
      return info;
    },
    immediate: false,
  });

  // 更新失败的影像
  const failOpen = ref(false);
  const failYingxiangData: any = ref();
  // 更新失败的影像弹窗关闭
  function failOpenClose() {
    failOpen.value = false;
  }

  // 更新tiff影像
  const updateGeoTiff = () => {
    GeoTiffManagerUpdateGeoTiff()
      .then((res) => {
        // console.log(res);
        if (res.lenght == 0) {
          reload();
        } else {
          failYingxiangData.value = getFailYingxiangData(res);
          console.log(failYingxiangData.value);
          failOpen.value = true;
          reload();
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // 切割路径
  function getFailYingxiangData(table) {
    let result: any = [];
    table.forEach((fullPath) => {
      const lastSlashIndex = fullPath.lastIndexOf('/');
      if (lastSlashIndex != -1) {
        result.push({
          fileName: fullPath.substring(lastSlashIndex + 1),
          filePath: fullPath.substring(0, lastSlashIndex + 1),
        });
      }
    });
    return result;
  }

  // 行选中
  const mapboxComponentRef = ref();
  function handRowClick(record) {
    allDataForClearMap.forEach((data) => {
      mapboxComponentRef.value.clearTaskLayer(data.layerName);
    });
    let bbox = getBboxFromUrl(record.accessUrl);
    let lngLat = getCenterPoint(bbox);
    // 检测坐标系
    const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1]));
    if (result) {
      lngLat[0] = result[0];
      lngLat[1] = result[1];
    }
    let chooseRows: any = [];
    chooseRows.push(record);
    mapboxComponentRef.value.GeoTiffManagerRaster(chooseRows, lngLat, 11, true);
  }

  function isProjectedCoordinates(x, y) {
    // 检查是否在地理坐标系的范围内
    const isGeoXInRange = -180 <= x && x <= 180;
    const isGeoYInRange = -90 <= y && y <= 90;
    // 定义坐标系
    const fromCrs1 = 'EPSG:3857'; // 假设输入坐标是 Web Mercator
    const fromCrs2 = 'EPSG:4548';
    const toCrs = 'EPSG:4326'; // 目标坐标系是地理坐标系
    // 如果不在地理坐标系范围内，则认为是投影坐标系
    if (!isGeoXInRange || !isGeoYInRange) {
      // 转换坐标
      // 根据输入坐标的范围来判断是哪个坐标系
      const fromCrs = isProjectedCoordinate(x, y) ? fromCrs2 : fromCrs1;
      return proj4(fromCrs, toCrs, [x, y]);
    } else {
      return false;
    }
  }

  const isProjectedCoordinate = (x, y) => {
    // 检查坐标是否符合 EPSG:4548 的大致范围
    const is4548XInRange = 0 <= x && x <= 1000000;
    const is4548YInRange = 0 <= y && y <= 6000000;
    return is4548XInRange && is4548YInRange;
  };

  // 从参数中获取 bbox 的值
  function getBboxFromUrl(url) {
    const urlObj = new URL(url);
    const params = new URLSearchParams(urlObj.search);
    const bbox = params.get('bbox');
    return bbox;
  }

  // 计算中心点
  function getCenterPoint(bbox) {
    const coords = bbox.split(',').map((coord) => parseFloat(coord));
    const [minLon, minLat, maxLon, maxLat] = coords;
    const centerLon = (minLon + maxLon) / 2;
    const centerLat = (minLat + maxLat) / 2;
    return [centerLon, centerLat];
  }

  // 用于去除分页后地图还有前一页的图层
  let allDataForClearMap: any = [];
  function forClearMap() {
    GeoTiffManagerLoadPage({
      page: 1,
      limit: 10000,
    }).then((res) => {
      allDataForClearMap = res.items;
    });
  }

  // 缩略图的预览不使用
  const visible = ref<boolean>(false);
  const setVisible = (value): void => {
    visible.value = false;
  };

  // 从geoserver获取缩略图
  function getUrl(record) {
    let bbox: any = getBboxFromUrl(record.accessUrl);
    const coords = bbox.split(',').map((coord) => parseFloat(coord));
    let r1 = proj4('EPSG:4326', 'EPSG:3857', [coords[0], coords[1]]);
    let r2 = proj4('EPSG:4326', 'EPSG:3857', [coords[2], coords[3]]);
    let titeUrl: any = null;
    if (new URL(VITE_GLOB_API_URL).hostname == 'localhost') {
      titeUrl =
        'http://localhost:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:';
    } else {
      titeUrl =
        'http://192.168.10.141:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:';
    }
    let url =
      titeUrl +
      record.layerName +
      '&styles=&bbox=' +
      r1[0] +
      ',' +
      r1[1] +
      ',' +
      r2[0] +
      ',' +
      r2[1] +
      '&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE';
    return url;
  }

  onMounted(() => {
    reload();
    // 用于去除分页后地图还有前一页的图层
    forClearMap();
  });
</script>
<style lang="less" scoped>
  .content-full {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%;
    display: block;
  }
  ::v-deep .ant-image-mask {
    display: none !important;
  }
</style>
