<template>
  <el-drawer
    :visible.sync="visible"
    :title="title"
    :size="size"
    :direction="direction"
    destroy-on-close
  >
    <component
      v-if="dynamicComponent"
      :is="dynamicComponent"
      ref="dynamicComponentRef"
      v-bind="componentProps"
      @vue:mounted="handleComponentMount"
    />

    <template #footer>
      <div class="drawer-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { computed, ref, markRaw } from "vue";

const dynamicComponentRef = ref(null);
defineExpose({
  dynamicComponentRef,
});

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: "50%",
  },
  direction: {
    type: String,
    default: "rtl", // rtl/ltr/ttb/btt
    validator: (v) => ["rtl", "ltr", "ttb", "btt"].includes(v),
  },
  title: {
    type: String,
    default: "",
  },
  dynamicComponent: {
    type: [Object, Function],
    default: null,
  },
  componentProps: {
    type: Object,
    default: () => ({}),
  },
  onConfirm: {
    type: Function,
    default: () => {},
  },
  onCancel: {
    type: Function,
    default: () => {},
  },
});

const emit = defineEmits(["update:visible"]);

// 状态同步
const normalizedComponent = computed(() =>
  props.dynamicComponent ? markRaw(props.dynamicComponent) : null
);

// 关闭处理
const handleClose = () => {
  emit("update:visible", false);
};

// 确认/取消时自动关闭
const onConfirm = () => {
  props.onConfirm();
  handleClose();
};

const onCancel = () => {
  props.onCancel();
  handleClose();
};
</script>

<style scoped>
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
