<!-- @format -->

<template>
  <a-drawer v-bind="getBindValue">
    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>
    <template #footer>
      <a-space>
        <a-button v-if="cancel" @click="cancel">取消</a-button>
        <a-button type="primary" @click="ok">确定</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts">
  import { computed, defineComponent, getCurrentInstance, toRefs } from 'vue';
  import { drawerProps } from 'ant-design-vue/es/drawer';

  export default defineComponent({
    name: 'NsDrawer',
    props: {
      ...drawerProps(),
      ok: Function,
      cancel: Function,
    },
    setup(props, { attrs, emit, slots }) {
      console.log(props, getCurrentInstance());

      const getBindValue = computed(() => ({
        getContainer: (triggerNode: any) => triggerNode.parentNode,
        ...attrs,
        ...props,
        footerStyle: { textAlign: 'right' },
      }));
      return { getBindValue };
    },
  });
</script>
<style lang="less" scoped></style>