<template>
  <div>
    <el-drawer
      v-model="visible"
      :title="title"
      :size="size"
      :direction="direction"
      :close-on-click-modal="closeOnClickModel"
      :destroy-on-close="destroyOnClose"
      :before-close="koiClose"
      :loading="loading"
      :footerHidden="footerHidden"
    >
      <div class="formDrawer">
        <div class="body">
          <slot name="content"></slot>
        </div>
        <div class="footer" v-if="!footerHidden">
          <el-button type="primary" loading-icon="Eleme" :loading="confirmLoading" v-throttle="koiConfirm">{{
            confirmText
          }}</el-button>
          <el-button type="danger" @click="koiCancel">{{ cancelText }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from "vue";
// @ts-ignore
import { koiMsgWarning, koiMsgBox } from "@/utils/koi.ts";

// 定义参数的类型
interface IDrawerProps {
  title?: string;
  visible?: boolean;
  size?: string;
  destroyOnClose?: boolean;
  closeOnClickModel?: boolean;
  confirmText?: string;
  cancelText?: string;
  direction?: any;
  loading?: boolean;
  footerHidden?: boolean; // 是否隐藏确认和取消按钮部分
}

// 子组件接收父组件的值
// withDefaults：设置默认值  defineProps：接收父组件的参数
const props = withDefaults(defineProps<IDrawerProps>(), {
  title: "朕很中意你KoiDrawer",
  visible: false,
  size: "450",
  closeOnClickModel: false,
  destroyOnClose: false,
  confirmText: "确定",
  cancelText: "取消",
  direction: "rtl",
  loading: false,
  footerHidden: false
});

// 开关变量
const visible = ref(false);
// 确定按钮Loading，此处必须用toRefs，否则将失去响应式
const { loading } = toRefs(props);
const confirmLoading = ref(loading);

/** 打开抽屉 */
const koiOpen = () => {
  visible.value = true;
};

/** 关闭抽屉 */
const koiClose = () => {
  visible.value = false;
};

/** 确认提交后关闭抽屉 */
const koiQuickClose = () => {
  visible.value = false;
  koiMsgWarning("已提交");
};

/** 确认 */
const koiConfirm = () => {
  emits("koiConfirm");
};

// 关闭抽屉
const koiCancel = () => {
  emits("koiCancel");
};

// 当前组件获取父组件传递的事件方法，然后点击确认和提交是触发父组件传递过来的事件
const emits = defineEmits(["koiConfirm", "koiCancel"]);

// defineExpose是vue3新增的一个api，放在<script setup>下使用的，
// 目的是把属性和方法暴露出去，可以用于父子组件通信，子组件把属性暴露出去，
// 父组件用ref获取子组件DOM，子组件暴露的方法或属性可以用dom获取。
defineExpose({
  koiOpen,
  koiClose,
  koiQuickClose
});
</script>

<style lang="scss" scoped>
.formDrawer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .body {
    bottom: 50px;
    flex: 1;
    overflow-y: auto; // 超出部分则滚动
    @apply text-14px text-#303133 dark:text-#E5EAF3;
  }
  .footer {
    display: flex;
    align-items: center;
    height: 50px;
    margin-top: auto;
    // justify-content: center;
  }
}
:deep(.el-drawer__title) {
  @apply text-#5f5f5f dark:text-#CFD3DC;
}

:deep(.el-drawer__body) {
  padding-top: 0px;
}

:deep(.el-drawer__header) {
  margin-bottom: 18px;
}
</style>
