<template>
  <Dialog :open="isOpen" @update:open="setOpen">
    <DialogContent
      class="top-[94px] flex h-[calc(100vh-94px-50px)] w-[322px] translate-y-0 flex-col items-center justify-center border-none bg-transparent p-0 shadow-none outline-none focus:ring-0"
      :showCloseButton="false"
    >
      <div class="relative flex h-[678px] w-full flex-col rounded-[32px] bg-[#DDDDDD] px-4 py-6">
        <!-- Close Button -->
        <button
          @click="hide"
          class="absolute top-6 right-6 z-10 flex size-8 items-center justify-center rounded-lg transition-colors hover:bg-black/5"
        >
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="3"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-black"
          >
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>

        <h2 class="mb-2 px-4 pt-8 text-center text-[20px] font-bold text-black">订单详情</h2>

        <OrderList />
      </div>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import OrderList from './OrderList.vue'

const isOpen = ref(false)

const setOpen = (value: boolean) => {
  isOpen.value = value
}

const show = () => {
  isOpen.value = true
}

const hide = () => {
  isOpen.value = false
}

defineExpose({
  show,
  hide,
})
</script>
