<!--
 * @Description: 表单项属性，控件属性面板
-->
<template>
  <div class="properties-content">
    <div class="properties-body" v-if="formConfig.currentItem?.itemProps">
      <Empty class="hint-box" v-if="!formConfig.currentItem.key" description="未选择控件" />
      <Form
        v-else-if="formConfig.currentItem.field == 'MapGeom'"
        label-align="left"
        layout="vertical"
        description="图斑控件"
      >
        <FormItem label="图斑宽度">
          <a-input-number
            v-model:value="formConfig.currentItem.mapSetData.width"
            placeholder="请输入图斑宽度"
            :min="1"
            :max="100"
          >
            <template #addonAfter><PercentageOutlined /></template>
          </a-input-number>
        </FormItem>
        <FormItem label="选择图层">
          <a-select
            v-model:value="formConfig.currentItem.mapSetData.chooseLayer"
            :options="shpLayerSourceOptions"
            size="middle"
            placeholder="请选择图层"
            @change="handleChangeDataTable"
          />
        </FormItem>
        <FormItem label="图层字段解析">
          <FormItem label="图层数据表">
            <a-input
              v-model:value="formConfig.currentItem.mapSetData.layerFields.dataTable"
              placeholder="请输入图层数据表"
              disabled="false"
            />
          </FormItem>
          <FormItem label="GID字段">
            <a-select
              v-model:value="formConfig.currentItem.mapSetData.layerFields.gidField"
              :options="formConfig.currentItem.mapSetData.layerFields.labelFieldOptions"
              size="middle"
              placeholder="请选择GID字段"
            />
          </FormItem>
          <FormItem label="名称字段标注">
            <a-select
              v-model:value="formConfig.currentItem.mapSetData.layerFields.labelField"
              :options="formConfig.currentItem.mapSetData.layerFields.labelFieldOptions"
              size="middle"
              placeholder="请选择名称字段标注"
            />
          </FormItem>
          <FormItem label="Geom字段">
            <a-select
              v-model:value="formConfig.currentItem.mapSetData.layerFields.geomField"
              :options="formConfig.currentItem.mapSetData.layerFields.labelFieldOptions"
              size="middle"
              placeholder="请选择Geom字段"
            />
          </FormItem>
        </FormItem>
        <FormItem label="是否允许添加图斑">
          <Switch v-model:checked="formConfig.currentItem.mapSetData.isAllowAddPolygon" />
        </FormItem>
        <FormItem label="是否允许编辑图斑">
          <Switch v-model:checked="formConfig.currentItem.mapSetData.isAllowEditPolygon" />
        </FormItem>
        <FormItem label="是否开启位置跳转">
          <Switch v-model:checked="formConfig.currentItem.mapSetData.isEnablePostionJump" />
        </FormItem>
      </Form>
      <Form
        label-align="left"
        layout="vertical"
        v-else-if="
          formConfig.currentItem.component == 'Grid' && formConfig.currentItem.type == 'subTable'
        "
      >
        <FormItem label="标签">
          <a-input v-model:value="formConfig.currentItem.label" placeholder="请输入" />
        </FormItem>
        <FormItem label="字段标识">
          <a-input v-model:value="formConfig.currentItem.field" placeholder="请输入" />
        </FormItem>
      </Form>
      <Form v-else label-align="left" layout="vertical">
        <div v-for="item of baseFormItemProps" :key="item.name">
          <FormItem :label="item.label" v-if="showProps(item.exclude)">
            <component
              v-if="item.component"
              class="component-props"
              v-bind="item.componentProps"
              :is="item.component"
              v-model:value="formConfig.currentItem[item.name]"
              :key="formConfig.currentItem.component + '===' + formConfig.currentItem.label"
            />
          </FormItem>
        </div>
        <div v-for="item of advanceFormItemProps" :key="item.name">
          <FormItem :label="item.label" v-if="showProps(item.exclude)">
            <component
              v-if="item.component"
              class="component-props"
              v-bind="item.componentProps"
              :is="item.component"
              v-model:value="formConfig.currentItem.itemProps[item.name]"
            />
          </FormItem> </div
        ><div v-for="item of advanceFormItemColProps" :key="item.name">
          <FormItem :label="item.label" v-if="showProps(item.exclude)">
            <component
              v-if="item.component"
              class="component-props"
              v-bind="item.componentProps"
              :is="item.component"
              v-model:value="formConfig.currentItem.itemProps[item.name]['span']"
            />
          </FormItem>
        </div>
        <FormItem label="控制属性" v-if="controlPropsList.length">
          <Col v-for="item of controlPropsList" :key="item.name">
            <Checkbox v-model:checked="formConfig.currentItem.itemProps[item.name]">
              {{ item.label }}
            </Checkbox>
          </Col>
        </FormItem>
        <FormItem label="是否必选" v-if="!['Grid'].includes(formConfig.currentItem.component)">
          <Switch v-model:checked="formConfig.currentItem.itemProps['required']" />
          <Input
            v-if="formConfig.currentItem.itemProps['required']"
            v-model:value="formConfig.currentItem.itemProps['message']"
            placeholder="请输入必选提示"
          />
        </FormItem>
        <FormItem
          v-if="!['Grid'].includes(formConfig.currentItem.component)"
          label="校验规则"
          :class="{ 'form-rule-props': !!formConfig.currentItem.itemProps['rules'] }"
        >
          <RuleProps />
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script lang="ts" setup name="FormItemProps">
  import { ref, computed, watch, inject } from 'vue';
  import { Empty, Input, Form, FormItem, Switch, Checkbox, Col } from 'ant-design-vue';
  import {
    baseFormItemControlAttrs,
    baseFormItemProps,
    advanceFormItemProps,
    advanceFormItemColProps,
  } from '../../VFormDesign/config/formItemPropsConfig';

  import { PercentageOutlined } from '@ant-design/icons-vue';
  import RuleProps from './RuleProps.vue';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { isArray } from 'lodash-es';
  import { ShpLayerSourceLoadPage, GetTableAndViewColumnList } from '@/api/demo/formScheme';

  const { formConfig } = useFormDesignState();

  let shpLayerSourceOptions: any = ref([]);
  let dbcode = ref();
  const handleNextStepsData = inject('handleNextStepsData');

  watch(
    () => handleNextStepsData,
    (newVal: any) => {
      dbcode.value = newVal?.value?.info?.DbCode;
    },
    { deep: true, immediate: true },
  );

  watch(
    () => formConfig.value,
    () => {
      if (formConfig.value.currentItem) {
        formConfig.value.currentItem.itemProps = formConfig.value.currentItem.itemProps || {};
        formConfig.value.currentItem.itemProps.labelCol =
          formConfig.value.currentItem.itemProps.labelCol || {};
        formConfig.value.currentItem.itemProps.wrapperCol =
          formConfig.value.currentItem.itemProps.wrapperCol || {};
        if (formConfig.value.currentItem.field === 'MapGeom') {
          // 图斑组件
          formConfig.value.currentItem.mapSetData = formConfig.value.currentItem.mapSetData || {
            width: 100,
            chooseLayer: '',
            layerFields: {},
            isAllowAddPolygon: false,
            isAllowEditPolygon: false,
            isEnablePostionJump: false,
          };
          // 选择图层
          if (shpLayerSourceOptions.value.length == 0) {
            getShpLayerSourceOptions();
          }
        }
      }
    },
    { deep: true, immediate: true },
  );

  const showProps = (exclude: string[] | undefined) => {
    if (!exclude) {
      return true;
    }
    return isArray(exclude) ? !exclude.includes(formConfig.value.currentItem!.component) : true;
  };

  const controlPropsList = computed(() => {
    return baseFormItemControlAttrs.filter((item) => {
      return showProps(item.exclude);
    });
  });

  // 选择图层
  async function getShpLayerSourceOptions() {
    let options: any = await ShpLayerSourceLoadPage();
    shpLayerSourceOptions.value = [];
    options.items.forEach((e) => {
      shpLayerSourceOptions.value.push({ label: e.name, value: e.relationTable });
    });
  }
  // 选择图层-图层数据表
  function handleChangeDataTable(table) {
    formConfig.value.currentItem.mapSetData.layerFields.dataTable = table;
    if (table) {
      getShpLayerSource(table);
    }
  }
  // 图层数据表-GID字段/名称字段标注/Geom字段
  async function getShpLayerSource(table) {
    if (formConfig.value.currentItem.field === 'MapGeom') {
      let querys: any = {
        dbCode: dbcode.value,
        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字段 下拉选项
        formConfig.value.currentItem.mapSetData.layerFields.labelFieldOptions = labelFieldOptions;
        // GID字段
        formConfig.value.currentItem.mapSetData.layerFields.gidField = obj[0].column_name;
        // Geom字段
        formConfig.value.currentItem.mapSetData.layerFields.geomField = obj[1].column_name;
        // 名称字段标注
        formConfig.value.currentItem.mapSetData.layerFields.labelField = obj[2].column_name;
      } else {
        // GID字段/名称字段标注/Geom字段 下拉选项
        formConfig.value.currentItem.mapSetData.layerFields.labelFieldOptions = [];
        // GID字段
        formConfig.value.currentItem.mapSetData.layerFields.gidField = '';
        // Geom字段
        formConfig.value.currentItem.mapSetData.layerFields.geomField = '';
        // 名称字段标注
        formConfig.value.currentItem.mapSetData.layerFields.labelField = '';
      }
    }
  }
</script>
