<!--
 * @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.component == 'MapGeom'"
        label-align="left"
        layout="vertical"
        description="图斑控件"
      >
        <FormItem label="选择空间数据表">
          <a-select
            v-model:value="formConfig.currentItem.mapSetData.chooseLayer"
            :options="shpLayerSourceOptions"
            size="middle"
            placeholder="请选择空间数据表"
          />
        </FormItem>
        <FormItem label="是否允许编辑图斑">
          <Switch v-model:checked="formConfig.currentItem.mapSetData.isAllowEditPolygon" />
        </FormItem>
        <FormItem label="是否开启位置跳转">
          <Switch v-model:checked="formConfig.currentItem.mapSetData.isEnablePostionJump" />
        </FormItem>
        <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>
      </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
        label-align="left"
        layout="vertical"
        v-else-if="formConfig.currentItem.component == 'Card'"
      >
        <FormItem label="标签">
          <a-input v-model:value="formConfig.currentItem.label" placeholder="请输入" />
        </FormItem>
        <FormItem label="字段标识">
          <a-input v-model:value="formConfig.currentItem.field" placeholder="请输入" />
        </FormItem>
        <FormItem label="显示阴影">
          <a-select ref="select" v-model:value="formConfig.currentItem.shadow" style="width: 100%">
            <a-select-option value="always">总是</a-select-option>
            <a-select-option value="hover">悬浮显示</a-select-option>
            <a-select-option value="never">不显示</a-select-option>
          </a-select>
        </FormItem>
        <FormItem label="自定义类">
          <a-input v-model:value="formConfig.currentItem.myclass" placeholder="请输入" />
        </FormItem>
      </Form>
      <Form
        label-align="left"
        layout="vertical"
        v-else-if="
          ['CreateUser', 'ModifyUser', 'CreateTime', 'ModifyTime'].includes(
            formConfig.currentItem.component,
          )
        "
      >
        <FormItem label="标签">
          <a-input v-model:value="formConfig.currentItem.label" placeholder="请输入" />
        </FormItem>
        <FormItem label="字段标识">
          <a-input v-model:value="formConfig.currentItem.field" placeholder="请输入" />
        </FormItem>
        <FormItem label="是否可见">
          <a-switch v-model:checked="formConfig.currentItem.display" />
        </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]"
            />
          </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', 'Tabs'].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', 'Tabs'].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';
  // api
  // import { loadTableRecordInfo } from '@/api/database/index';
  import { ShpLayerSourceLoadPage } 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,
    () => {
      // console.log('formConfig', 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.component === 'MapGeom') {
          // 图斑组件
          formConfig.value.currentItem.mapSetData = formConfig.value.currentItem.mapSetData
            ? formConfig.value.currentItem.mapSetData
            : {
                chooseLayer: '',
                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 loadTableRecordInfo({});
    let options: any = await ShpLayerSourceLoadPage();
    shpLayerSourceOptions.value = [];
    options.items.forEach((e) => {
      // shpLayerSourceOptions.value.push({ label: e.tableName, value: e.tableName });
      shpLayerSourceOptions.value.push({ label: e.name, value: e.relationTable });
    });
  }
</script>
