<template>
    <div>
        <!-- 触发抽屉的按钮，这里简单示例 -->
        <el-drawer v-model="show" :show-close="false" direction="rtl" size="60%">
            <div class="grid grid-cols-2 h-screen">
                <div class="border-r border-gray-100 mr-5 h-full flex flex-col">
                    <h3 class="p-3 text-2xl ">Confirmation</h3>
                    <order type="pay" class="h-[calc(100vh-60px)]" ></order>
                </div>
                <div class="bg-white rounded-lg pr-5 flex flex-col h-full">
                    <div class="flex-1">
                        <div class="mb-8">
                            <h1 class="text-2xl font-semibold mb-1">A1-Payment</h1>
                            <p class="text-gray-500 text-sm">3 Payment Methods Available</p>
                        </div>

                        <div class="space-y-4 mb-8">
                            <div class="flex justify-between items-center">
                                <span class="text-gray-600">Service Charge</span>
                                <span class="font-medium">$ 12.00</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-600">Sub Total</span>
                                <span class="font-medium">$ 100.00</span>
                            </div>
                        </div>

                        <div class="mb-8">
                            <p class="text-gray-600 mb-4">Payment Method</p>
                            <div class="grid grid-cols-3 gap-4">
                                <button v-for="method in paymentMethods" :key="method.id"
                                    @click="selectPaymentMethod(method.id)" :class="[
                                        'flex flex-col items-center justify-center p-4 rounded-lg border transition-all duration-200 !rounded-button whitespace-nowrap',
                                        selectedMethod === method.id ? 'border-orange-500 bg-orange-50' : 'border-gray-200 hover:border-orange-300'
                                    ]">
                                    <i
                                        :class="['text-xl mb-2', method.icon, selectedMethod === method.id ? 'text-orange-500' : 'text-gray-400']"></i>
                                    <span
                                        :class="['text-sm', selectedMethod === method.id ? 'text-orange-500' : 'text-gray-600']">{{
                                            method.name }}</span>
                                </button>
                            </div>
                        </div>

                        <div class="mb-12">
                            <p class="text-gray-600 mb-4">Tip</p>
                            <div class="flex items-center relative">
                                <span class="text-gray-400 mr-2 absolute top-1/2 right-0 -translate-y-1/2">$</span>
                                <input type="text" v-model="tipAmount"
                                    class="w-full p-3 rounded-lg border-gray-200 border focus:border-orange-500 focus:ring-0 text-gray-700"
                                    placeholder="Enter tip amount">
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-5 gap-3 mb-3 box-border ">
                        <button
                            class="col-span-2 px-6 py-3 border border-orange-500 text-orange-500 rounded-lg hover:bg-orange-50 transition-colors !rounded-button whitespace-nowrap">
                            Registration
                        </button>
                        <button
                            class="col-span-3 px-6 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors !rounded-button whitespace-nowrap">
                            Confirm Payment
                        </button>
                    </div>
                </div>
            </div>

        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElDrawer } from 'element-plus';
import order from './rightOrder/components/order.vue'

const show = defineModel("show")
const paymentMethods = [
    { id: 1, name: 'Credit Card', icon: 'fas fa-credit-card' },
    { id: 2, name: 'PayPal', icon: 'fab fa-paypal' },
    { id: 3, name: 'Cash', icon: 'fas fa-money-bill' }
];

const selectedMethod = ref(1);
const tipAmount = ref('');

const selectPaymentMethod = (id) => {
    selectedMethod.value = id;
};
</script>

<style scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

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

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