import { defineComponent, inject, Ref, Transition } from 'vue';
import { CloseCircleOutlined } from '@ant-design/icons-vue';
import { drawerKey, updateDrawerKey } from '../utils/key';

const Drawer = defineComponent({
  props: {
    spin: {
      type: Object,
      default: () => ({ spinning: false })
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup(props, { slots, attrs }) {
    const drawer = inject<Ref<boolean>>(drawerKey)!;
    const updateDrawer = inject<(val: boolean) => void>(updateDrawerKey)!;

    const handleCLose = () => {
      updateDrawer(false);
    };

    return () => (
      <Transition name="drawer-fade">
        <div
          v-show={drawer.value}
          class={'table-layout__drawer'}
          // TODO: 这里的 flex 可以配置动态，或者用 width 的方式控制
          style={{ flex: 2, width: 0 }}
        >
          {/* delay={300} */}
          <a-spin {...props.spin}>
            <div class="table-layout__drawer-title-wrapper flex items-center">
              <div class="flex-1 flex items-center">
                {slots.title || props.title !== '' ? (
                  <div class="table-layout__drawer-title">
                    {slots.title ? slots.title() : props.title}
                  </div>
                ) : null}
                {slots.buttons ? slots.buttons() : null}
              </div>
              <div
                class="table-layout__drawer-close ml-[32px]"
                onClick={handleCLose}
              >
                <CloseCircleOutlined
                  class="cursor-pointer !text-[#BFC6D1]"
                  title="关闭"
                />
              </div>
            </div>
            <div class="table-layout__drawer-main flex-1 !w-full !h-0 overflow-auto">
              {slots.default?.()}
            </div>
          </a-spin>
        </div>
      </Transition>
    );
  }
});

export { Drawer };
