<template>
	<Form class="w-form" ref="formRef" starOnRequired @submit="submit" v-bind="$attrs">
    <Row>
      <slot />
		</Row>
    <!-- 只读状态显示底部按钮 -->
    <template v-if="nofooter" ></template>
    <!-- 非只读状态显示底部按钮 -->
    <div v-else-if="!isReadOnly" class="app-submit-btns">
      <template v-if="!$slots.footer">
        <div class="app-submit-line" v-if="!hideline"></div>
        <Button @click="onCancel">{{ canceltext }}</Button>
        <Button
          type="primary"
          htmlType="submit"
          :loading="submitloading"
          @click="handleSubmit"
        >
          {{ oktext }}
        </Button>
      </template>
      <template v-else>
        <slot name="footer" />
      </template>
    </div>
	</Form>
</template>

<script setup>
import { inject, provide,ref,useSlots,onUnmounted,computed,getCurrentInstance, onMounted } from 'vue';
import {  Button, Message,Row,Col } from '@king-design/vue';
import {  has } from 'lodash-es';
import { QueryChange } from '@ksconsole/hooks';
import { useRouter, useRoute } from 'vue-router';
import Form from './validates.js'
console.log("🚀 ~ Form:", Form.prototype)


const router = useRouter();
const route = useRoute();
const slot = useSlots();

const queryChange = new QueryChange(router, route);
const formRef = ref(null);
const props = defineProps({
	querykey: {
		type: String,
		default: ''
	},
  queryKey: {
		type: String,
		default: ''
	},
	oktext: {
		type: String,
		default: '确定'
	},
	canceltext: {
		type: String,
		default: '取消'
	},
	hideline: {
		type: Boolean,
		default: false
	},
	submitloading: {
		type: Boolean,
		default: false
	},
  nofooter: {
    type: Boolean,
    default: false,
  },
  gColSpan: {
    type: Number,
    default: 24
  },
  contWidth: {
    type: String,
    default: ''
  }
});
/** 告诉 field 使用 k-col */
provide('gColSpan', props.gColSpan);
/** 控制 field 全局宽度 */
provide('contWidth', props.contWidth);
const isReadOnly = computed(() => has(route?.query, '_readonly', false));
// 接收父组件声明的方法
const emit = defineEmits(['onSubmit']);
let { formState, PageEntity, pageEntity} = inject('formInfo');
PageEntity = PageEntity || pageEntity;
const submit = () => {
	// 表单校验通过后，执行提交操作
	if(slot.footer){
		emit('onSubmit',formState);
	}
};
const handleSubmit = async () => {
  const isValid = await formRef.value.validate();
  if (!isValid) return;
  // 过滤掉 ishide 为 true 的元素
  for (const [key, value] of Object.entries(PageEntity)) {
    if (value.ishide) {
      delete formState[key];
    }
  }
  emit('onSubmit', formState);
};
const onCancel = () => {
  const key = props.queryKey || props.querykey
	queryChange._backDetails(key);
};

const validate =  () => {
 return  formRef.value.validate();
};
const reset =  () => {
  formRef.value.reset();
};

const addMethod = (name, fn, message) => {
  Form.addMethod(name, fn, message);
};

defineExpose({
  validate,
  reset,
  addMethod,
});
// onMounted(()=>{
//   const instance = getCurrentInstance();
//   instance.prototype.$myMethod = Form.addMethod;
//   // instance.appContext.config.$myMethod = Form.addMethod;
// })
</script>
<style lang="less" scoped>
.app-submit-btns {
	margin-top: 16px;
	text-align: right;
	button {
		margin-left: 10px;
	}
}
.app-submit-line {
	height: 1px;
	background: #e2e5e8;
	margin: 16px 0;
}
</style>
