<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <Form
      label-align="left"
      layout="vertical"
      description="图斑控件"
      style="margin: 20px auto 0; width: 550px; padding-bottom: 20px"
    >
      <FormItem label="是否显示">
        <Switch v-model:checked="mapSetData.isShowMap" />
      </FormItem>
      <FormItem label="地图宽度">
        <a-input-number
          v-model:value="mapSetData.width"
          placeholder="请输入地图宽度"
          :min="1"
          :max="100"
        >
          <template #addonAfter><PercentageOutlined /></template>
        </a-input-number>
      </FormItem>
      <FormItem label="选择图层">
        <a-select
          v-model:value="mapSetData.chooseLayer"
          :options="shpLayerSourceOptions"
          size="middle"
          placeholder="请选择图层"
          @change="handleChangeDataTable"
        />
      </FormItem>
      <FormItem label="图层字段解析">
        <FormItem label="图层数据表">
          <a-input
            v-model:value="mapSetData.layerFields.dataTable"
            placeholder="请输入图层数据表"
            disabled="false"
          />
        </FormItem>
        <FormItem label="GID字段">
          <a-select
            v-model:value="mapSetData.layerFields.gidField"
            :options="mapSetData.layerFields.labelFieldOptions"
            size="middle"
            placeholder="请选择GID字段"
          />
        </FormItem>
        <FormItem label="名称字段标注">
          <a-select
            v-model:value="mapSetData.layerFields.labelField"
            :options="mapSetData.layerFields.labelFieldOptions"
            size="middle"
            placeholder="请选择名称字段标注"
          />
        </FormItem>
        <FormItem label="Geom字段">
          <a-select
            v-model:value="mapSetData.layerFields.geomField"
            :options="mapSetData.layerFields.labelFieldOptions"
            size="middle"
            placeholder="请选择Geom字段"
          />
        </FormItem>
      </FormItem>
      <FormItem label="是否允许添加图斑">
        <Switch v-model:checked="mapSetData.isAllowAddPolygon" />
      </FormItem>
      <FormItem label="是否允许编辑图斑">
        <Switch v-model:checked="mapSetData.isAllowEditPolygon" />
      </FormItem>
      <FormItem label="是否开启位置跳转">
        <Switch v-model:checked="mapSetData.isEnablePostionJump" />
      </FormItem>
    </Form>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, inject, watch, onMounted } from 'vue';
  import { Empty, Input, Form, FormItem, Switch, Checkbox, Col } from 'ant-design-vue';
  import { PageWrapper } from '@/components/Page';
  import { ShpLayerSourceLoadPage, GetTableAndViewColumnList } from '@/api/demo/formScheme';
  import { PercentageOutlined } from '@ant-design/icons-vue';

  // config
  const config: any = inject('formConfig');
  const mapSetData = ref(config.table.maps);
  watch(
    () => config.table.maps,
    () => {
      mapSetData.value = config.table.maps;
    },
  );
  const shpLayerSourceOptions: any = ref([]);

  // 选择图层
  async function getShpLayerSourceOptions() {
    let options: any = await ShpLayerSourceLoadPage();
    shpLayerSourceOptions.value = [];
    options.items.forEach((e) => {
      shpLayerSourceOptions.value.push({ label: e.name, value: e.relationTable, type: e.type });
    });
  }

  function handleChangeDataTable(table) {
    mapSetData.value.layerFields.dataTable = table;
    shpLayerSourceOptions.value.forEach((item) => {
      if (item.value == table) {
        mapSetData.value.layerFields.type = item.type;
      }
    });
    if (table) {
      getShpLayerSource(table);
    }
  }
  async function getShpLayerSource(table) {
    let querys: any = {
      dbCode: 'hcsystemdb',
      tableName: table,
    };
    const obj: any = await GetTableAndViewColumnList(querys);
    let labelFieldOptions: any = [];
    if (obj.length > 0) {
      obj.forEach((e) => {
        labelFieldOptions.push({ label: e.column_name, value: e.column_name });
      });
      // GID字段/名称字段标注/Geom字段 下拉选项
      mapSetData.value.layerFields.labelFieldOptions = labelFieldOptions;
      // GID字段
      mapSetData.value.layerFields.gidField = obj[0].column_name;
      // Geom字段
      mapSetData.value.layerFields.geomField = obj[1].column_name;
      // 名称字段标注
      mapSetData.value.layerFields.labelField = obj[2].column_name;
    } else {
      // GID字段/名称字段标注/Geom字段 下拉选项
      mapSetData.value.layerFields.labelFieldOptions = [];
      // GID字段
      mapSetData.value.layerFields.gidField = '';
      // Geom字段
      mapSetData.value.layerFields.geomField = '';
      // 名称字段标注
      mapSetData.value.layerFields.labelField = '';

      config.table.maps = mapSetData.value;
    }
  }
  onMounted(() => {
    getShpLayerSourceOptions();
  });
</script>
