<script setup lang="ts">
import { Button } from 'ant-design-vue';
import { ShoppingCartOutlined } from '@ant-design/icons-vue';
import PatientOrderListModal from './PatientOrderListModal.vue';
import { useVbenDrawer } from '@vben/common-ui';

const props = defineProps<{
  registerId?: number | null;
}>();

const [OrderListDrawer, orderListDrawerApi] = useVbenDrawer({
  connectedComponent: PatientOrderListModal,
});

const handleClick = () => {
  if (!props.registerId) {
    return;
  }
  orderListDrawerApi.setData({
    registerId: props.registerId,
  });
  orderListDrawerApi.open();
};
</script>

<template>
  <div v-if="registerId" class="order-list-float-button">
    <Button
      type="primary"
      shape="circle"
      size="large"
      @click="handleClick"
      class="float-btn"
      style="width: 56px; height: 56px; padding: 0; display: flex; align-items: center; justify-content: center;"
    >
      <template #icon>
        <ShoppingCartOutlined :style="{ fontSize: '20px' }" />
      </template>
    </Button>
    <OrderListDrawer />
  </div>
</template>

<style scoped>
.order-list-float-button {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.float-btn {
  width: 56px;
  height: 56px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s;
}

.float-btn:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
</style>
