<template>
  <el-drawer v-model="drawer" v-bind="{ ...drawerDefineProp, ...$attrs }" :key="drawerKey">
    <template v-for="slotKey in Object.keys($slots)" #[slotKey]="scope">
      <slot :name="slotKey" v-bind="scope"></slot>
    </template>
    <!-- <template #header v-if="slots.header">
      <slot name="header" />
    </template> -->
    <template #default>
      <slot :breakPoint="breakPoint" />
    </template>
    <!-- <template #footer v-if="slots.footer">
      <slot name="footer"></slot>
    </template> -->
  </el-drawer>
</template>

<script setup lang="ts" name="LjDrawer">
import { ref, useSlots, nextTick, onMounted, onActivated, onUnmounted, onDeactivated } from "vue";
import type { BreakPoint } from "@/components/Grid/interface/index";

// // 抽屉数据模型
// interface LjDrawerData {
//   test?: any;
// }

// 接收父组件参数并设置默认值
interface LjDrawerProps {
  /**
   * @description 布局参数
   */
  layout?: any;
  // /**
  //  * @description 抽屉数据
  //  */
  // data?: LjDrawerData;
  /**
   * @description 保持组件状态
   */
  keepAlive?: boolean;
}
const props = withDefaults(defineProps<LjDrawerProps>(), {
  keepAlive: false
});

/**
 * @description 抽屉默认属性
 */
const drawerDefineProp: any = {
  size: "50%",
  direction: "rtl",
  appendToBody: true
};

const drawer = ref(false);
const drawerKey = ref(0);
const show = (refresh = false) => {
  refresh && drawerKey.value++;
  drawer.value = true;
};
const hide = () => {
  drawer.value = false;
};
// 注入响应式断点
const breakPoint = ref<BreakPoint>("xl");
// 监听屏幕变化
const resize = (e: UIEvent, callback?: any) => {
  nextTick(() => {
    let width = (e.target as Window).innerWidth;
    switch (!!width) {
      case width < 768:
        breakPoint.value = "xs";
        break;
      case width >= 768 && width < 992:
        breakPoint.value = "sm";
        break;
      case width >= 992 && width < 1380:
        breakPoint.value = "md";
        break;
      case width >= 1380 && width < 1920:
        breakPoint.value = "lg";
        break;
      case width >= 1920:
        breakPoint.value = "xl";
        break;
    }
    callback && callback();
  });
};

onMounted(() => {
  // onBeforeMount(() => {
  // props.collapsed && findIndex();
  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
  window.addEventListener("resize", resize);
});
onActivated(() => {
  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
  window.addEventListener("resize", resize);
});
onUnmounted(() => {
  window.removeEventListener("resize", resize);
});
onDeactivated(() => {
  window.removeEventListener("resize", resize);
});

defineExpose({ breakPoint, show, hide });
</script>

<style lang="scss"></style>
