<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="addLayerShow">上传图层样式</a-button>
        <!-- <a-button type="success" @click="editLayer">编辑</a-button> -->
        <!-- <a-button type="error" @click="deleteLayer">删除</a-button> -->
      </template>
    </BasicTable>
    <a-modal title="上传图层样式" :open="addLayerOpen" @cancel="addLayerClose" @ok="addLayerOnOk">
      <AddLayer
        ref="addLayerRef"
        :layerStyleOptions="layerStyleOptions"
        @addLayerSubmitAfter="addLayerSubmitAfter"
      />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue';
  // vben
  import { useMessage } from '@/hooks/web/useMessage';
  import { BasicTable, useTable } from '@/components/Table';
  import { columns, searchFormSchema } from './util';
  // 组件
  import AddLayer from './addLayer.vue';
  // api
  import { GeoStylePage } from '@/api/demo/system';
  import proj4 from 'proj4';

  const { createMessage } = useMessage();

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

  // 图层样式按钮颜色---------------------------------------------------------
  const hover = ref(false);
  // 图层样式弹窗
  const addLayerOpen = ref(false);
  // 图层样式Ref
  const addLayerRef = ref();
  // 图层样式弹窗开启
  function addLayerShow() {
    getGeoStylePage();
    addLayerOpen.value = true;
  }
  // 图层样式弹窗关闭
  function addLayerClose() {
    addLayerRef.value.addLayerCancel();
    addLayerOpen.value = false;
  }
  // 图层样式弹窗提交
  function addLayerOnOk() {
    addLayerRef.value.addLayerSubmit();
  }

  // 图层样式
  const layerStyleOptions: any = ref();
  // 图层样式提交按钮
  function getGeoStylePage() {
    GeoStylePage({ limit: 10000, page: 1 }).then((res) => {
      layerStyleOptions.value = res.items;
    });
  }
  // 图层样式提交成功后
  function addLayerSubmitAfter(addlayer) {
    addLayerOpen.value = false;
    reload();
  }

  onMounted(() => {
    reload();
  });
</script>
