<template>
    <div class="desk-drawer">
        <el-drawer v-model="show" :show-close="false" direction="rtl" size="80%">
            <template #header style="margin-bottom: 0;">
                <div class="mb-0">
                    <div class="flex items-center justify-between">
                        <h1 class="text-2xl font-semibold text-gray-900">List of Pending Orders</h1>
                        <button @click="show = false"
                            class="!rounded-button bg-orange-500 px-6 py-2 text-white hover:bg-orange-600 whitespace-nowrap">
                            <i class="fas fa-arrow-left mr-2"></i>Back Home
                        </button>
                    </div>
                    <!-- <el-divider /> -->
                </div>
            </template>
            <div class="h-full bg-gray-50">
                <div class="mx-auto w-full px-4">
                    <!-- Header -->
                    <!-- Tip Message -->
                    <div class="mb-6 rounded-lg bg-orange-50 p-4 text-orange-700">
                        <p>Tip: Please select a blank space to place an order and click on the table where the order has
                            already
                            been placed to proceed with checkout</p>
                    </div>

                    <!-- Table Filter -->
                    <div class="mb-8 space-x-4">
                        <button class="!rounded-button whitespace-nowrap bg-orange-500 px-6 py-2 text-white">All
                            Tables</button>
                        <button
                            class="!rounded-button whitespace-nowrap bg-gray-100 px-6 py-2 text-gray-600 hover:bg-gray-200">A
                            Tables</button>
                        <button
                            class="!rounded-button whitespace-nowrap bg-gray-100 px-6 py-2 text-gray-600 hover:bg-gray-200">B
                            Tables</button>
                    </div>

                    <!-- Table Grid -->
                    <div class="grid grid-cols-5 gap-6 pb-8">
                        <template v-for="table in tables" :key="table.id">
                            <div class="relative cursor-pointer" 
                            @click="selectTable(table)"
                            >
                                <img class="w-full h-full"
                                    :src="table.isActive ? '/src/assets/img/desk/座位_active.svg' : '/src/assets/img/desk/座位.svg'"
                                    alt="">
                                <div class="absolute top-0 py-2 left-5 flex flex-col justify-around h-full">
                                    <div class=" text-sm font-medium"
                                        :class="table.isActive ? 'text-orange-500' : 'text-gray-400'">
                                        {{ table.name }}
                                    </div>
                                    <div :class="table.isActive ? 'text-gray-900' : 'text-gray-400'">
                                        {{ table.status }}
                                    </div>
                                </div>
                            </div>
                            <!-- <div :class="[
                                'relative rounded-lg border p-4 transition-all duration-200',
                                table.isActive ? 'border-orange-500 bg-white shadow-lg' : 'border-gray-200 bg-gray-50'
                            ]" @click="selectTable(table)">
                                <div class="mb-2 text-lg font-medium"
                                    :class="table.isActive ? 'text-orange-500' : 'text-gray-400'">
                                    {{ table.name }}
                                </div>
                                <div :class="table.isActive ? 'text-gray-900' : 'text-gray-400'">
                                    {{ table.status }}
                                </div>
                                <div v-if="table.isActive" class="mt-2 text-sm text-gray-500">
                                    {{ table.orderInfo }}
                                    <div class="mt-1">{{ table.date }}</div>
                                </div>

                                <div class="absolute -bottom-2 left-1/2 flex -translate-x-1/2 space-x-1">
                                    <div v-for="i in 2" :key="i" :class="[
                                        'h-2 w-2 rounded-full',
                                        table.isActive ? 'bg-orange-500' : 'bg-gray-300'
                                    ]"></div>
                                </div>
                            </div> -->
                        </template>
                    </div>
                </div>
            </div>
            <!-- <template #footer>
      <div style="flex: auto">
        <el-button type="primary" @click="" plain>close window</el-button>
        <el-button type="primary" @click="">Join the checkout counter</el-button>
      </div>
    </template> -->
        </el-drawer>
    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Table {
    id: number;
    name: string;
    status: string;
    isActive: boolean;
    orderInfo?: string;
    date?: string;
}
const show = defineModel('show')
const showInput = defineModel('showInput')
const tables = ref<Table[]>([
    {
        id: 1,
        name: 'A1',
        status: 'Registration',
        isActive: true,
        orderInfo: 'QTY:10',
        date: 'February 26, 2018'
    },
    {
        id: 2,
        name: 'A2',
        status: 'Free',
        isActive: false
    },
    {
        id: 3,
        name: 'A3',
        status: 'Free',
        isActive: false
    },
    {
        id: 4,
        name: 'A4',
        status: 'Free',
        isActive: false
    },
    {
        id: 5,
        name: 'A5',
        status: 'Free',
        isActive: false
    },
    {
        id: 6,
        name: 'B1',
        status: 'Free',
        isActive: false
    },
    {
        id: 7,
        name: 'B2',
        status: 'Free',
        isActive: false
    },
    {
        id: 8,
        name: 'B3',
        status: 'Registration',
        isActive: true,
        orderInfo: 'QTY:8',
        date: 'February 26, 2018'
    },
    {
        id: 9,
        name: 'B4',
        status: 'Free',
        isActive: false
    },
    {
        id: 10,
        name: 'B5',
        status: 'Free',
        isActive: false
    }
]);

const selectTable = (table: Table) => {
    table.isActive = !table.isActive;
    console.log(table.isActive,'table.isActive')
    if (table.isActive) {
        table.status = 'Registration';
        table.orderInfo = 'QTY:10';
        table.date = 'February 26, 2018';
    } else {
        table.status = 'Free';
        table.orderInfo = undefined;
        table.date = undefined;
    }
};
console.log(show)
console.log(show)

</script>

<style scoped lang="scss">
.grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* :global(.el-drawer__header) {
    margin:0;
    } */
// .desk-drawer .el-drawer__header {
//     margin: 0;
// }

.desk-drawer {
    :deep(.el-drawer__header) {
        margin: 0;
    }
}

/* 
:deep(.el-drawer__header) {
    margin: 0;
}
 */
</style>