<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <LayerTree
      ref="treeRef"
      class="w-1/4 xl:w-1/5"
      @select="handleSelect"
      @edit="editLayer"
      @add="addLayer"
      @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-button type="primary" @click="exportTemplate"> 导出模版 </a-button>
          <a-upload
            :accept="'.xlsx,.csv,.xls,.zip'"
            :showUploadList="false"
            :custom-request="customRequest"
            style="margin-right: 0px;"
          >
            <a-button type="primary"> 数据导入 </a-button>
          </a-upload>
          <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'">
        <a-descriptions title="详情" :column="columnVal">
          <a-descriptions-item v-for="(val, key) in selectVal" :key="key" :label="key">{{
            val
          }}</a-descriptions-item>
        </a-descriptions>
        <div class="detail-button">
          <a-button type="primary" @click="showTable = 'edit'"> 编辑 </a-button>
          <a-button type="primary" @click="showTable = ''" danger> 关闭 </a-button>
        </div>
      </div>
      <!-- 编辑 -->
      <div class="data-edit" v-if="showTable == 'edit'">
        <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"
            :name="item"
            :key="index"
          >
            <a-input v-model:value="formState[item]" />
          </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"
            v-if="!fileUrl"
          >
            <p class="ant-upload-drag-icon">
              <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">上传SLD文件</p>
          </a-upload-dragger>
          <div v-else>
            <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" />
    <a-modal
      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, uploadSldStyle } 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,DrawingEnd} from "./geometryHandler.ts"
  import * as mars3d from 'mars3d';

  let globalMap: mars3d.Map; 

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

  EventBus.on("editLayerEnd",function(e){

    formState.value.geom = e;

    console.log("formState",formState.value);
  })

  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 }] =
    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],
          });
        }
        updateTableData(params).then((res) => {
          console.log('res', res);
          if (res) {
            createMessage.success('编辑成功!');
            DrawingEnd();
            showTable.value = '';
          } else {
            createMessage.error('编辑失败!');
          }
        });
      })
      .catch((error: ValidateErrorEntity<FormState>) => {
        console.log('error', error);
      });
  };
  const resetForm = () => {
    showTable.value = '';
    DrawingEnd();
  };

  const handleSelect = (record) => {
    tableName.value = record.serverId;
    applicationName.value = record.applicationName;
    tableVisible.value = true;
    keyWord.value = null;
    keyValue.value = null;
    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 handleSuccess = () => {
    treeRef.value.fetch();
  };
  const editData = (record) => {
    selectVal.value = record;
    formState.value = record;
    showTable.value = 'edit';

    EditDrawingGeometry(globalMap,record.geom)
  };
  const viewData = (record) => {
    console.log('record', record);
    selectVal.value = record;
    formState.value = record;
    showTable.value = 'detail';
  };
  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 = () => {
    fileUrl.value = '';
    fileUrlView.value = {};
    styleName.value = '';
    showTable.value = 'style';
  };
  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,
    };
    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) => {
    console.log(values);
    searchData.page = values.current;
    searchData.limit = values.pageSize;
    getList();
  };
  const getList = () => {
    const querys = {
      ...searchData,
      tablename: tableName.value,
      keyword: keyWord.value,
      keyvalue: keyValue.value,
    };
    tableDataByTableName(querys).then((res) => {
      setTableData(res.data);
      headData.value = res.head;
      let arr: any = [];
      res.head.forEach((element) => {
        arr.push({
          title: element,
          dataIndex: element,
        });
      });
      setColumns(arr);
    });
  };
  const exportTemplate = () => {
    openTempeleteModel(true);
  };
  onMounted(() => {});
const customRequest = (file) => {
  console.log('handleCustomRequest',file)
  const name = file.file.name.toLowerCase();
  if (name.endsWith('.zip')){
    const formData = new FormData()
    formData.append('files', file.file)
    Upload(formData).then(res => {
      console.log(res)
      const filePath = res[0].filePath
      let params = {
        tableName: tableName.value,
        zipFilePath: filePath
      }
      UploadShape(params).then(result => {
          message.success('导入成功')
          reload()
      })
    })
  }else{
    const formData = new FormData()
    formData.append('file', file.file)
    UploadExcelAll({File: formData, tableName: tableName.value}).then(res => {
      message.success('导入成功')
      reload()
    })
  }
  // procedure.value ++
  return false
}
</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;
      button {
        margin-left: 10px;
      }
    }
  }
  .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>
