<!-- 添加维度弹窗 -->
<template>
	<Dialog
		v-if="dialogType === 'dialog'"
		v-model="show"
		:title="_title"
		:width="width"
		@close="closeDialog"
		v-bind="$attrs"
    :class="{'ks-mydialog-noheader':noheader}"
	>
    <template v-if="!noheader" v-slot:header>
     	 <slot name="header"></slot>
    </template>
    <slot />
    <template v-if="nofooter" v-slot:footer-wrapper>
     	 <div class="ks-mydialog-nofooter"></div>
    </template>
    <template v-else-if="$slots['myfooter']" v-slot:footer>
      	<slot name="myfooter"></slot>
    </template>
    <template v-else v-slot:footer>
      	<Button @click="closeDialog">{{ cancelText }}</Button>
      	<Button
			type="primary"
			@click="onSubmit"
			:loading="loading"
			:disabled="disabledOk"
        >
		{{ okText }}
		</Button>
    </template>
  </Dialog>
  <Drawer
    v-else
    v-model="show"
    :title="_title"
    :width="width"
    ref="__demoOne"
    @close="closeDialog"
    v-bind="$attrs"
     :class="{'ks-mydialog-noheader':noheader}"
  >
     <template v-if="!noheader" v-slot:header>
     	 <slot name="header"></slot>
    </template>
    <slot />
    <template v-if="nofooter" v-slot:footer-wrapper>
      <div class="ks-mydialog-nofooter"></div>
    </template>
    <template v-else-if="$slots['myfooter']" v-slot:footer>
      <div class="ks-mydialog-footer">
        <slot name="myfooter"></slot>
      </div>
    </template>
    <template v-else v-slot:footer>
      <div class="ks-mydialog-footer">
        <Button
			type="primary"
			@click="onSubmit"
			:loading="loading"
			:disabled="disabledOk"
        >
			{{ okText }}
		</Button>
        <Button @click="closeDialog">{{ cancelText }}</Button>
      </div>
    </template>
  </Drawer>
</template>

<script setup>
import { ref, onMounted, computed, watchEffect, watch, inject } from "vue";

import { Dialog, Drawer, Button, Spin } from "@king-design/vue";
import { useRouter, useRoute } from "vue-router";
import { get, find, has, omit, assign, concat } from "lodash-es";
// const globalData = inject('globalData')
const route = useRoute();
const router = useRouter();

// 接收父组件传参
const props = defineProps({
  title: String,
  dialogType: {
    type: String,
    default: "dialog",
  },
  querykey: {
    type: String,
    default: "detail",
  },
  width: {
    type: String,
    default: "600px",
  },
  onSubmit: Function,
  submitloading: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  disabledOk: {
    type: Boolean,
    default: false,
  },
  okText: {
	type: String,
	default: "确定",
  }, 
  cancelText: {
	type: String,
	default: "取消",
  },
  nofooter: {
    type: Boolean,
    default: false,
  },
  noheader: {
    type: Boolean,
    default: false,
  },
});
const _title = computed(() =>
  has(route?.query, "_readonly", false) ? "详情" : props.title || "新增"
);
const loading = computed(() => props.submitloading || props.loading);
// 接收父组件声明的方法
const emit = defineEmits(["onSubmit"]);

const show = ref(has(route?.query, props.querykey));
watch(
  () => route?.query,
  (newVal, oldVal) => {
    show.value = has(newVal, props.querykey);
  }
);

const onSubmit = (v) => {
  // props.onSubmit()
  emit("onSubmit", v);
  // 提交后不关闭弹框，由父组件调用接口成功与否来判断是否关闭
};
const closeDialog = () => {
  // globalData._backDetails(props.querykey,router,route)
  _backDetails(props.querykey, router, route);
};

/**
 * 详情返回
 * 去除当前页面的 query 中 detailsVisible 触发隐藏
 */
const _backDetails = (queryKey, router, route) => {
  const query = omit(
    assign({}, route.query),
    concat(["details", "_readonly", queryKey])
  );
  router.replace({ query });
};
</script>

<style lang="less" scoped>
.ks-mydialog-footer {
  text-align: left;
  margin-left: -8px;
}
.ks-mydialog-cancel {
  margin-left: 8px;
}
.ks-mydialog-nofooter {
  display: none;
}
</style>
<style lang="less">
.ks-mydialog-noheader .k-dialog-header{
  display: none;
}
</style>
