<template>
	<KsDialog :title='title' :querykey="querykey" mode="destroy" nofooter>
		<Form class="w-form" ref="formRef" starOnRequired @submit="onSubmit">
			<div class="w-form-items1">
				<slot />
			</div>
			<!-- 非只读状态显示底部按钮 -->
			<div v-if="!has(route?.query, '_readonly', false)" 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>
	</KsDialog>
</template>

<script setup>
import { inject, ref,useSlots,onUnmounted } from 'vue';
import { Form, Button, Message } from '@king-design/vue';
import {  has } from 'lodash-es';
// import { KsDialog } from '@ksconsole/components'
import KsDialog from '../common-pages/dialog.vue'
import { QueryChange } from '@ksconsole/hooks';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const slot = useSlots();

const queryChange = new QueryChange(router, route);
const formRef = ref(null);
console.log("🚀 ~ formRef:", formRef)
const props = defineProps({
	querykey: {
		type: String,
		default: ''
	},
  queryKey: {
		type: String,
		default: ''
	},
	title: {
		type: String,
		default: '新增'
	},
	oktext: {
		type: String,
		default: '确定'
	},
	canceltext: {
		type: String,
		default: '取消'
	},
	hideline: {
		type: Boolean,
		default: false
	},
	submitloading: {
		type: Boolean,
		default: false
	},
});
// 接收父组件声明的方法
const emit = defineEmits(['mysubmit']);
const { formState } = inject('formInfo');

const readonly = ref(has(route?.query, '_readonly', false));

const onSubmit = () => {
	// 表单校验通过后，执行提交操作
	if(slot.footer){
		emit('mysubmit',formState);
	}
};
const handleSubmit = async () => {
	const bool = await formRef.value.validate()
	if(!bool) return
	emit('mysubmit',formState);

};
const onCancel = () => {
  const key = props.queryKey || props.querykey
	queryChange._backDetails(key);
};
</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>
