<template>
  <a-form ref="schemaFormRef" v-bind="pick(getFormProps, aFormPropKeys)" :model="formModel" :id="formID"
    @validate="handleValiddate" :class="props.isOutline == true ? 'ltaui-form' : ''">
    <a-row v-bind="getRowConfig">
      <slot name="formHeader"></slot>
      <slot>
        <template v-for="schemaItem in formSchemasRef" :key="schemaItem.field">
          <schema-form-item v-model:form-model="formModel" :schema="schemaItem" :table-instance="tableInstance">
            <template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
              <slot :name="item" v-bind="data || {}"></slot>
            </template>
          </schema-form-item>
        </template>
        <form-action v-if="showActionButtonGroup" v-bind="getFormActionBindProps" @toggle-advanced="handleToggleAdvanced">
          <template v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']" #[item]="data">
            <slot :name="item" v-bind="data || {}"></slot>
          </template>
        </form-action>
      </slot>
      <slot name="formFooter"></slot>
    </a-row>
  </a-form>
</template>

<script lang="ts" >
import { useAttrs, onMounted, nextTick, onUpdated, onUnmounted, defineComponent } from 'vue';
import { pick } from 'lodash-es';
import SchemaFormItem from './schema-form-item.vue';
import FormAction from './components/form-action.vue';
import { watch } from "vue"
import { GuidID } from "../../lt-a-table/src/hooks/commonMethods"
import { setLabelStyle, createValidateToolTip, clearValidateToolTip } from "./hooks/commonFormMethods"
import {
  createFormContext,
  useFormState,
  useFormEvents,
  useFormMethods,
  useAdvanced,
  type SchemaFormType,
} from './hooks';
import { schemaFormProps, aFormPropKeys } from './schema-form';

export default defineComponent({
  name: 'ltAForm',
  components:{
    SchemaFormItem,
    FormAction
  },
  props: {
    ...schemaFormProps
  },
  // emits:[schemaFormEmits]
  setup(props, { emit }) {
    const attrs = useAttrs();
    const formID = "form-" + GuidID()

    // 表单内部状态
    const formState = useFormState({ props, attrs });

    const {
      formModel,
      getRowConfig,
      schemaFormRef,
      getFormProps,
      getFormActionBindProps,
      formSchemasRef,
    } = formState;

    // 表单内部方法
    const formMethods = useFormMethods({ ...formState });
    const { initFormValues, handleFormValues, setSchemaFormProps } = formMethods;

    // 初始化表单默认值
    initFormValues();

    // a-form表单事件二次封装和扩展
    const formEvents = useFormEvents({ ...formState, emit, handleFormValues });

    // 同步外部对props的修改
    watch(props, () => {
      setSchemaFormProps(props)
    }, {
      deep: true,
      immediate: true,
    });

    // 当前组件所有的状态和方法
    const instance = {
      ...formState,
      ...formEvents,
      ...formMethods,
    } as SchemaFormType;

    // 搜索表单 展开/收起 表单项hooks
    const { handleToggleAdvanced } = useAdvanced({
      instance,
      emit,
    });

    const handleValiddate = function (name, status, errorMsgs) {
      emit("validate", name, status, errorMsgs) //无论验证的信息是否正确，都将原始验证信息推送出去
      nextTick(() => {
        //如果校验不通过，则需要对界面生成的校验信息进行处理
        if (!status) {
          let targetTable = $("#" + formID)
          let targetInput = targetTable.find("#" + "form_item_" + name)
          if (targetInput.length) {
            //生成自定义提示信息
            createValidateToolTip(targetInput, errorMsgs)
          }
        }
      })

    }

    emit('register', instance);
    createFormContext(instance);

    // defineExpose(instance);
    onMounted(() => {
      if (props.isOutline) {
        setLabelStyle(formSchemasRef, formID)
      }
    })
    onUpdated(() => {
      //数据变化的时候，主动调用验证规则
      schemaFormRef.value?.validate()
    })
    onUnmounted(() => {
      //销毁的时候，要去掉生成的tooltips 并且去掉所有的监听事件
      clearValidateToolTip(formID)
    })

    return{
      formModel,
      getRowConfig,
      schemaFormRef,
      getFormProps,
      getFormActionBindProps,
      formSchemasRef,
      props,
      aFormPropKeys,
      formID,
      handleToggleAdvanced,
      handleValiddate,
      setSchemaFormProps,
      pick
    }

  }

})






</script>

<style>
.ltaui-form .ant-col.ant-form-item-label {
  font-size: 12px;
  background: none repeat scroll 0% 0% aliceblue;
  line-height: 23px;
  border-right: 1px solid #d1dbe5;
  border-bottom: 1px solid #d1dbe5;
  border-left: 1px solid #d1dbe5;
  padding: 5px 0px;
  margin-bottom: 0px;
  font-weight: bold;
  color: #333;
}

.ltaui-form .ant-col.ant-form-item-control {
  padding: 5px;
  border-right: 0px solid #d1dbe5;
  border-bottom: 1px solid #d1dbe5;
}

.ltaui-form .ant-row:nth-last-of-type(2)>div[class="ant-col"] .ant-col.ant-form-item-control {
  border-right: 1px solid #d1dbe5 !important;
  border-bottom: 0px solid #d1dbe5;
}

.ltaui-form>.ant-row {
  border-top: 1px solid #d1dbe5;
  border-right: 1px solid #d1dbe5;
  border-bottom: 1px solid #d1dbe5;
}

.ltaui-form>.ant-row {
  border-top: 1px solid #d1dbe5;
  border-right: 1px solid #d1dbe5;
  border-bottom: 1px solid #d1dbe5;
}

.ltaui-form .ltui-input_diseditable {
  border-width: 0px;
}

.ltaui-form .ant-form {
  border: 1px solid #d1dbe5;
}

.ltaui-form .ant-row.ant-form-item {
  margin-bottom: 0px;
}

/* 隐藏原本生成的验证信息，因为原始的验证信息，会在form中占位，需要重新生成 */
.ltaui-form .ant-form-item-explain.ant-form-item-explain-connected {
  display: none;
}

.table-search-form .ant-form-item-explain-error {
  display: none;
}

.ltui-tooltip {
  position: absolute;
  z-index: 9900000;
  outline: none;
  opacity: 1;
  filter: alpha(opacity=100);
  padding: 5px 5px;
  border-width: 1px;
  border-style: solid;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid rgb(204, 153, 51);
  background-color: rgb(255, 255, 204);
  font-size: 12px;
  top: 2px;
  left: 102%;
  display: inline-table;
}

.ltui-tooltip-arrow-outer,
.ltui-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border-style: solid;
  border-width: 6px;
  border-color: transparent;
}

.ltui-tooltip-right .ltui-tooltip-arrow-outer {
  width: 0 !important;
  height: 0 !important;
  left: 50% !important;
  border-style: solid;
  margin-top: -34px !important;
  z-index: 990000;
  border-bottom-color: rgb(204, 153, 51) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
}

.ltui-tooltip-right .ltui-tooltip-arrow {
  width: 0 !important;
  height: 0 !important;
  left: 50% !important;
  border-style: solid;
  margin-top: -33px !important;
  z-index: 9900000;
  border-bottom-color: rgb(255, 255, 204) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
}
</style>
