import { defineComponent, inject, Ref } 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 () => (
      <div
        v-show={drawer.value}
        class={`table-layout__drawer`}
        style={drawer.value ? { flex: 2, width: 0 } : {}}
      >
        <a-spin delay={300} {...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>
    );
  }
});

export { Drawer };
