<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <LayerTree
      ref="treeRef"
      class="w-1/4 xl:w-1/5"
      @select="handleSelect"
      @flyToLayer="flyToLayer"
      @edit="editLayer"
      @add="addLayer"
      @checked="checkedLayer"
      @remove="tableVisible = false"
    />
    <div class="map-container w-3/4 xl:w-4/5">
      <Map @onLoad="onMapLoad" />
      <!-- 数据列表 -->
      <div class="table-constainer" v-show="tableVisible">
        <div class="drawer-title-box">
          <a-input
            v-model:value="keyWord"
            placeholder="字段"
            style="width: 200px; margin-right: 10px"
          />
          <a-input
            v-model:value="keyValue"
            placeholder="字段值"
            style="width: 200px; margin-right: 10px"
          />
          <a-button type="primary" @click="getList"> 查询 </a-button>

          <a-dropdown>
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="addData('point')">
                  <UserOutlined />
                  点数据
                </a-menu-item>
                <a-menu-item key="2" @click="addData('polyline')">
                  <UserOutlined />
                  线数据
                </a-menu-item>
                <a-menu-item key="3" @click="addData('polygon')">
                  <UserOutlined />
                  面数据
                </a-menu-item>
              </a-menu>
            </template>
            <a-button>
              添加
              <DownOutlined />
            </a-button>
          </a-dropdown>

          <a-button type="primary" @click="exportTemplate"> 导出模版 </a-button>
          <a-button type="primary" @click="changeBatchProcessingModal(true)"> 批量操作 </a-button>
          <a-button type="primary" @click="styleHandle"> 样式配置 </a-button>
        </div>
        <div class="close-icon" @click="tableVisible = false">
          <CloseOutlined />
        </div>
        <div class="table-content">
          <BasicTable @register="registerTable" @change="handleTableChange">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'action'">
                <TableAction
                  :actions="[
                    {
                      label: '定位',
                      onClick: posData.bind(null, record),
                    },
                    {
                      label: '编辑',
                      onClick: editData.bind(null, record),
                    },
                    {
                      label: '查看',
                      onClick: viewData.bind(null, record),
                    },
                    {
                      label: '删除',
                      color: 'error',
                      onClick: delData.bind(null, record),
                    },
                  ]"
                />
              </template>
            </template>
          </BasicTable>
        </div>
      </div>
      <!-- 详情 -->
      <div class="data-detail" v-if="showTable == 'detail'">
        <div class="detail-content">
          <a-descriptions title="详情" :column="columnVal">
            <a-descriptions-item
              v-for="(item, index) in detailData"
              :key="index"
              :label="item.label"
              >{{ item.value }}</a-descriptions-item
            >
          </a-descriptions>
        </div>
        <div class="detail-button">
          <a-button type="primary" @click="detailToEdit"> 编辑 </a-button>

          <a-button type="primary" @click="closeDetail" danger> 关闭 </a-button>

        </div>
      </div>
      <!-- 编辑 -->
      <div class="data-edit" v-if="showTable == 'edit' || showTable == 'add'">
        <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-item
            v-for="(item, index) in headData"
            :ref="item"
            :label="item.title"
            :name="item"
            :key="index"
          >
            <a-input v-model:value="formState[item.dataIndex]" />
          </a-form-item>
        </a-form>
        <div class="data-button">
          <a-button type="primary" @click="onSubmit">保存</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
        </div>
      </div>
      <!-- 样式配置 -->
      <div class="data-style" v-if="showTable == 'style'">
        <div class="img-box">
          <a-input v-model:value="styleName" placeholder="样式名称" style="margin-bottom: 10px" />
          <p style="color: #ed6f6f" v-if="styleName == ''">请输入样式名称</p>
          <a-upload-dragger
            v-model:fileList="fileList"
            name="file"
            @change="handleChange"
            :multiple="false"
            :maxCount="1"
            :customRequest="handleCustomRequest"
          >
            <p class="ant-upload-drag-icon">
              <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">上传SLD文件</p>
          </a-upload-dragger>
          <div v-if="fileUrl">
            <p>{{ fileUrlView.name }}</p>
            <a-button type="primary" @click="editorHandle">在编辑器中打开</a-button>
          </div>
        </div>
        <div class="data-button">
          <a-button type="primary" @click="showTable = ''" danger> 关闭 </a-button>
          <a-button @click="styleCancel"> 取消 </a-button>
          <a-button type="primary" @click="styleSubmit"> 提交 </a-button>
        </div>
      </div>
    </div>
    <AddModel @register="registerAddModal" :treeData="treeData" @success="handleSuccess" />
    <EditorModel @register="registerEditorModal" @editorCancel="editorCancel" />
    <a-modal
      :keyboard="false"
      :maskClosable="false"
      wrapClassName="batch-modal-wrap"
      class="BatchProcessingModal"
      width="1660px"
      v-model:open="batchProcessingModalOpen"
      :footer="null"
      :closable="false"
      :destroyOnClose="true"
      style="top: 50px"
    >
      <BatchProcessingModal
        :applicationName="applicationName"
        :tableName="tableName"
        @changeBatchProcessingModal="changeBatchProcessingModal"
      />
    </a-modal>
    <TempeleteModel @register="registerTempeleteModel" :tableName="tableName" />
  </PageWrapper>
</template>
<script setup lang="ts">
  import { LayerTree, AddModel, Map, EditorModel, TempeleteModel } from './page';
  import { ref, UnwrapRef, reactive, onMounted } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import { useModal } from '@/components/Modal';
  import { CloseOutlined, InboxOutlined } from '@ant-design/icons-vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { columns } from './data';
  import {
    tableDataByTableName,
    updateTableData,
    addTableData,
    uploadSldStyle,
    getSldFilePath,
  } from '@/api/application/layer';
  import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
  import { useMessage } from '@/hooks/web/useMessage';
  import { uploadFile, fun_Delete } from '@/api/demo/files';
  import { getAppEnvConfig } from '@/utils/env';
  import BatchProcessingModal from './BatchProcessingModal/index.vue';
  import { Upload, UploadShape, UploadExcelAll } from '@/api/demo/BatchProcessingModal';
  import { message } from 'ant-design-vue';

  import { EventBus } from '@/utils/eventBus';

  import {
    GetGeometryCenter,
    EditDrawingGeometry,
    AddDrawingGeometry,
    PreviewDrawingGeometry,
    DrawingEnd,
    GeojsonToWkt,
  } from './geometryHandler.ts';

  import * as mars3d from 'mars3d';

  const { VITE_GLOB_GEOSERVER_BASE_URL } = getAppEnvConfig();

  let globalMap: mars3d.Map;

  const onMapLoad = (map) => {
    globalMap = map;
  };

  EventBus.on('editLayerEnd', function (e) {
    formState.value.geom = e;
  });

  // 图层目录树控制逻辑
  const handlerLoadLayer = (node) => {

    if(node.node.tableName){ // 图层节点
      handlerToggleLayer(node.node);
    }else{ // 分类节点
      node.node.child?.forEach((item,index)=>{
        if(!node.node.checked){
          item.checked = node.node.checked;
          handlerToggleLayer(item);
        }
      })
    }
  };

  const handlerToggleLayer = (node)=>{
    if(!node.checked){
        let layer = globalMap.getLayerById(node.id);
        if(layer){
            layer.show = true
        }else{
          let  tileLayer = new mars3d.layer.WmsLayer({
              name: node.applicationName,
              id:node.id,
              url: VITE_GLOB_GEOSERVER_BASE_URL+"/geoserver/my_workspace/wms",
              layers: "my_workspace:"+node.tableName,
              parameters: {
                transparent: true,
                format: 'image/png',
              },
              crs: "EPSG:4326",
              getFeatureInfoParameters: {
                feature_count: 10
              },
              // 单击高亮及其样式
              highlight: {
                type: "wallP",
                diffHeight: 100,
                materialType: mars3d.MaterialType.LineFlow,
                materialOptions: {
                  image: "https://data.mars3d.cn/img/textures/fence.png",
                  color: "#ffff00",
                  speed: 10, // 速度，建议取值范围1-100
                  axisY: true
                }
              },
              popup: "all",
              flyTo: false,
              featureToGraphic:function(e){   // 获取点击查询到的数据
                  let wkt = GeojsonToWkt(e.data.geometry);
                  let editData = {...e.data.properties}
                  editData.geom = wkt;
                  viewData(editData)
              }
          })
          globalMap.addLayer(tileLayer);
        }
      }else{
        let layer = globalMap.getLayerById(node.id);
        if(layer){
            layer.show = false;
        }
      }
  }

  const { VITE_GLOB_API_URL } = getAppEnvConfig();
  const { createConfirm, createMessage } = useMessage();
  const showTable = ref('');
  const tableVisible = ref(false);
  const selectVal = ref();
  const columnVal = ref(1);
  const fileList = ref([]);
  const batchProcessingModalOpen = ref(false);
  const [registerAddModal, { openModal: openAddModal }] = useModal();
  const [registerEditorModal, { openModal: openEditorModal }] = useModal();
  const [registerTempeleteModel, { openModal: openTempeleteModel }] = useModal();

  const labelCol = { span: 6 };
  const wrapperCol = { span: 18 };
  const keyWord = ref(null);
  const keyValue = ref(null);
  const headData = ref();
  const [
    registerTable,
    { reload, getSelectRows, clearSelectedRowKeys, setTableData, setColumns, setPagination, getColumns },
  ] = useTable({
    // 表格名称
    title: '数据列表',
    // 获取数据的接口
    dataSource: [],
    // 表单列信息 BasicColumn[]
    columns,
    rowKey: 'id',
    // 使用搜索表单
    useSearchForm: false,
    // 显示表格设置工具
    showTableSetting: true,
    // 是否显示表格边框
    bordered: true,
    // 序号列
    showIndexColumn: false,
    // 搜索
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  const treeRef = ref();
  const treeData = ref();
  const formRef = ref();

  const formState = ref({});
  const tableName = ref();
  const applicationName = ref();
  const styleName = ref();
  const rules = {
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
    date1: [{ required: true, message: 'Please pick a date', trigger: 'change', type: 'object' }],
    type: [
      {
        type: 'array',
        required: true,
        message: 'Please select at least one activity type',
        trigger: 'change',
      },
    ],
    resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
    desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
  };
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        const params = {
          tableName: tableName.value,
          list: [],
        };

        for (const key in formState.value) {
          params.list.push({
            name: key,
            value: formState.value[key],
          });
        }

        if (showTable.value == 'edit') {
          updateTableData(params).then((res) => {
            console.log('res', res);
            if (res) {
              createMessage.success('编辑成功!');
              DrawingEnd();
              showTable.value = '';
            } else {
              createMessage.error('编辑失败!');
            }
          });
        } else if (showTable.value == 'add') {
          params.list = [];

          headData.value?.forEach((item, index) => {
            params.list.push({
              name: item.dataIndex,
              value: formState.value[item] ? formState.value[item] : null,
            });
          });
          console.log('params', params.list);

          addTableData(params).then((res) => {
            console.log('res', res);
            if (res) {
              createMessage.success('添加成功!');
              DrawingEnd();
              showTable.value = '';
            } else {
              createMessage.error('添加失败!');
            }
          });
        }
        //清空图层
        DrawingEnd();
      })
      .catch((error: ValidateErrorEntity<FormState>) => {
        console.log('error', error);
      });
  };
  const resetForm = () => {
    showTable.value = '';
    DrawingEnd();
  };

  const handleSelect = (record) => {
    tableName.value = record.tableName;
    applicationName.value = record.applicationName;
    tableVisible.value = true;
    keyWord.value = null;
    keyValue.value = null;
    showTable.value = '';
    getList();
  };
  const editLayer = (node) => {
    treeData.value = treeRef.value.treeData;
    openAddModal(true, {
      node,
      isUpdate: true,
    });
  };
  const addLayer = () => {
    treeData.value = treeRef.value.treeData;
    openAddModal(true, {
      isUpdate: false,
    });
  };


  const checkedLayer = (node) => {
    handlerLoadLayer(node);
  }

  const flyToLayer = (id) => {
    let layer = globalMap.getLayerById(id);
      if(layer){
          layer.flyTo();
      }
  }



  const hanlerLoadLayer = () => {};
  const handleSuccess = () => {
    treeRef.value.fetch();
  };
  const addData = (type) => {
    AddDrawingGeometry(globalMap, type);
    showTable.value = 'add';
  };
  const detailData = ref([]);
  const editData = (record) => {
    selectVal.value = record;
    formState.value = record;
    showTable.value = 'edit';

    EditDrawingGeometry(globalMap, record.geom);
  };

  const viewData = (record) => {
    PreviewDrawingGeometry(globalMap, record.geom);
    selectVal.value = record;
    formState.value = record;
    showTable.value = 'detail';
    detailData.value = [];
    for (const key in record) {
      for (var i = 0; i < headData.value.length; i++) {
        if (headData.value[i].dataIndex == key) {
          detailData.value.push({
            label: headData.value[i].title,
            value: record[key],
          });
        }
      }
    }
  };

  const detailToEdit = () => {
    editData(formState.value);
    showTable.value = 'edit';
  };

  const detailClose = ()=>{
    showTable.value = '' 
    DrawingEnd();
  }

  const delData = (record) => {
    createConfirm({
      iconType: 'info',
      title: '删除',
      content: '确定要删除当前数据吗？',
      onOk: async () => {
        // let result = await functionDeleteForm(query);
        // if (result) {
        //   createMessage.success('数据成功!');
        // } else {
        //   createMessage.error('数据失败!');
        // }
        reload();
      },
    });
  };
  const fileUrl = ref('');
  const fileUrlView: any = ref({});

  const posData = (record) => {
    let centerLngLat = GetGeometryCenter(record.geom);
    globalMap.flyToPoint(centerLngLat, { radius: 500 });
  };

  const styleHandle = () => {
    showTable.value = 'style';
    getSldFilePath({ tablename: tableName.value }).then((res) => {
      if (res) {
        fileUrlView.value.name = res.filepath;
        fileUrl.value = res.filepath;
        fileUrlView.value.url = res.filepath;
        fileUrlView.value.id = res.fileid;
        styleName.value = res.stylename;
      } else {
        fileUrl.value = '';
        fileUrlView.value = {};
        styleName.value = '';
      }
    });
  };
  const handleChange = (info) => {
    fileList.value = info.fileList;
  };

  // 上传文件接口
  const handleCustomRequest = (options) => {
    fileList.value = [];
    const formData = new FormData();
    formData.append('files', options.file);
    fileUrlView.value.name = options.file.name;
    uploadFile(formData)
      .then((res: any) => {
        fileUrl.value = res[0].filePath;
        fileUrlView.value.url = res[0].filePath;
        fileUrlView.value.id = res[0].id;
        createMessage.success('上传成功!');
      })
      .catch((err) => {
        options.onError(err);
      });
  };
  const styleSubmit = () => {
    if (!styleName.value) {
      return createMessage.warning('样式名称不能为空!');
    }
    const params = {
      filepath: fileUrl.value,
      styleName: styleName.value,
      tablename: tableName.value,
      id: fileUrlView.value.id,
    };
    uploadSldStyle(params).then((res) => {
      console.log(res);
      if (res) {
        showTable.value = '';
        createMessage.success('提交成功!');
      } else {
        createMessage.error('提交失败!');
      }
    });
  };
  const styleCancel = () => {
    if (fileUrlView.value.id) {
      const params = [fileUrlView.value.id];
      createConfirm({
        iconType: 'info',
        title: '取消',
        content: '取消会删除当前文件',
        onOk: async () => {
          fun_Delete(params).then((res) => {
            createMessage.success('删除成功!');
            showTable.value = '';
          });
        },
      });
    } else {
      showTable.value = '';
    }
  };
  const editorHandle = () => {
    if (!styleName.value) {
      return createMessage.warning('样式名称不能为空!');
    }
    openEditorModal(true, {
      urlData: fileUrlView.value,
      styleName: styleName.value,
      tableName: tableName.value,
    });
  };
  const changeBatchProcessingModal = (type: boolean) => {
    batchProcessingModalOpen.value = type;
  };
  const searchData = reactive({
    page: 1,
    limit: 10,
  });
  const handleTableChange = (values: any) => {
    searchData.page = values.current;
    searchData.limit = values.pageSize;
    getList();
  };
  const getList = () => {
    if (!tableName.value) {
      tableVisible.value = false;
      message.warning('当前图层没有关联空间数据表');
      return;
    }
    let realUseKeyWord = getColumns().find(item => item.dataIndex == keyWord.value || item.title == keyWord.value)
    const querys = {
      ...searchData,
      tablename: tableName.value,
      keyword: realUseKeyWord? realUseKeyWord.dataIndex: '',
      keyvalue: keyValue.value,
    };
    tableDataByTableName(querys).then((res) => {
      setTableData(res.data);
      let arr: any = [];
      res.headName.forEach((element, index) => {
        arr.push({
          title: element.comment ? element.comment : element.columnName,
          dataIndex: element.columnName,
        });
      });
      headData.value = arr;
      setPagination({ total: res.total });
      setColumns(arr);
    });
  };
  const exportTemplate = () => {
    openTempeleteModel(true);
  };
  onMounted(() => {});
  const editorCancel = () => {
    fileList.value = [];
    fileUrlView.value = {};
    fileUrl.value = '';
  };
  const closeDetail = () => {
    showTable.value = ''
    DrawingEnd()
  }
</script>

<style lang="less" scoped>
  .map-container {
    position: relative;
  }
  .table-constainer {
    padding: 20px;
    width: 99%;
    height: 40vh;
    position: absolute;
    bottom: 0;
    left: 5px;
    z-index: 2;
    background-color: @component-background;
    border-radius: 4px;
  }
  .drawer-title-box {
    span {
      margin-right: 100px;
    }
    button {
      margin-right: 10px;
    }
  }
  .close-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }
  .data-detail {
    position: absolute;
    top: 0;
    right: 0;
    background-color: @component-background;
    z-index: 3;
    width: 30%;
    height: 100%;
    padding: 20px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    .detail-button {
      position: absolute;
      bottom: 30px;
      right: 40px;
      background-color: @component-background;

      button {
        margin-left: 10px;
      }
    }
    .detail-content {
      overflow-y: scroll;
      height: 80vh;
    }
  }
  .data-edit {
    position: absolute;
    top: 0;
    right: 0;
    background-color: @component-background;
    z-index: 3;
    width: 40%;
    height: 100%;
    padding: 20px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    .data-button {
      position: absolute;
      width: 90%;
      bottom: 30px;
      display: flex;
      justify-content: flex-end;
      button {
        margin-left: 10px;
      }
    }
  }
  .data-style {
    position: absolute;
    top: 0;
    right: 0;
    background-color: @component-background;
    z-index: 3;
    width: 30%;
    height: 100%;
    padding: 20px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    .img-box {
      height: 200px;
    }
    .data-button {
      position: absolute;
      width: 100%;
      bottom: 30px;
      button {
        margin-left: 10px;
      }
    }
  }
</style>
<style>
  .batch-modal-wrap .ant-modal {
    transform: scale(0.75) !important;
    transform-origin: center !important;
  }
</style>
