<template>
    <van-dialog v-model:show="show" class="max-w-xl pb-5" :show-confirm-button="false">
        <div class="flex flex-row items-center justify-between mx-4 py-4">
            <span>{{ t('start.order_details.title') }}</span>
            <SvgIcon name="close" class="text-base w-6 h-6" @click="show = false" />
        </div>
        <div class="flex flex-row items-center justify-start my-4 px-4">
            <div class="w-[50px] h-[50px] mr-4"><img :src="item.picUrl" alt=""></div>
            <div class="flex flex-col h-[60px] w-[280px]  text-black font-bold text-sm">
                <span class="line-clamp-2 mt-2">{{ item.productName }}</span>
            </div>
        </div>
        <div class="px-4">
            <div>
                <div class="flex flex-row items-center justify-between mr-3 mt-2">
                    <div class="text-[#575555] text-st">{{ t('start.order_details.u_p') }}</div>
                    <div class="text-[#575555] font-bold text-base">USDT {{ item.unitPrice }}</div>
                </div>
            </div>
            <div>
                <div class="flex flex-row items-center justify-between mr-3 mt-2">
                    <div class="text-[#575555] text-st">{{ t('start.order_details.o_q') }}</div>
                    <div class="text-[#575555] font-bold text-base">{{ item.quantity }}</div>
                </div>
            </div>
            <div>
                <div class="flex flex-row items-center justify-between mr-3 mt-2">
                    <div class="text-[#575555] text-st">{{ t('start.order_details.total') }}</div>
                    <div class="text-[#575555] font-bold text-base">${{ item.totalPrice }}</div>
                </div>
            </div>
            <div>
                <div class="flex flex-row items-center justify-between mr-3 mt-2">
                    <div class="text-[#DF4418] text-st">{{ t('start.order_details.o_c') }}</div>
                    <div class="text-[#DF4418] font-bold text-base">{{ item.commission }}</div>
                </div>
            </div>
        </div>
        <div class="bg-[#f8f9fb] max-w-[420px] mx-5 mt-4 rounded-md">
            <div class="py-4 px-4">
                <div class="flex flex-row items-center justify-between">
                    <span>{{ t('start.order_details.o_r') }}</span>
                    <van-rate v-model="rating" allow-half :size="20" color="#DF4418" void-icon="star" void-color="#eee" readonly/>
                </div>
                <div class="flex mt-3" @click="showOptions">
                    <div
                        class="border-grey-400  w-full rounded-md p-2 border text-ellipsis overflow-hidden h-12 text-start text-ss 
                        flex flex-row items-center  justify-between">
                        <span class="line-clamp-2  text-center ">{{ comment }}</span>
                        <SvgIcon name="allow-down" class="text-st w-12 h-12" />
                    </div>
                </div> 
                <div class="h-32 overflow-scroll mt-4 " v-if="showPopup">
                        <div v-for="option in options" class="bg-white z-20 min-h-4 text-ss p-2.5 " @click="selectOption(option)">
                            <span class="hover:text-st text-ss">{{ option }}</span>
                            <div class="h-[1px] bg-gray-200 my-2"></div>
                        </div>
                </div>
    
            </div>

        </div>
        <div class="mt-4 mx-4">
            <van-button block color="linear-gradient(90deg, #F70 0%, #FF4900 100%)"
                class="font-semibold btn px-4 rounded-md" @click="handleSubmitOrder" :disabled="disabled">Confirm</van-button>
        </div>
    </van-dialog>
    <Dialog ref="dialogRef" @confirm="confirm" />
    
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon.vue';
import { ref } from 'vue';
import { type OrderItem } from '../types'
import { submitOrder } from '@/api/order';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()

const showPopup = ref(false)
const dialogRef = ref()
const disabled = ref(false)

const emits = defineEmits(['success'])

const showOptions = () => {
    showPopup.value = !showPopup.value
}

const comment = ref(t('start.order_details.c_1'))
const options = [
    t('start.order_details.c_1'),
    t('start.order_details.c_2'),
    t('start.order_details.c_3'),
    t('start.order_details.c_4'),
    t('start.order_details.c_5'),
    t('start.order_details.c_6'),

]
const selectOption = (option: string) => {
    comment.value = option
    showPopup.value = false
}

const show = ref(false)
const rating = ref(5)
const toPath = ref('/order')
const item = ref<OrderItem>({
    id: undefined,
    productName: undefined,
    picUrl: undefined,
    unitPrice: undefined,
    quantity: undefined,
    totalPrice: undefined,
    commission: undefined,
    orderTime: '',
    combo: undefined,
})

const confirm = () => {
    show.value = false
}


const handleSubmitOrder = async () => {
    const data = {
        id: item.value.id,
    }
    disabled.value = true
    const res = await submitOrder(data) as any
    disabled.value = false
    if (res.code === 1004008003) {
        toPath.value = '/recharge'
        dialogRef.value.open({
            type: 'warning',
            content: t('start.order_details.balance_not_enough'),
            showConfirmButton: true,
            showCancelButton: false,
            confirmText: t('start.order_details.balance_not_enough_text'),
        })
    }
    if (res.code === 1004008004) {
        show.value = false
        dialogRef.value.open({
            type: 'warning',
            title: '',
            content: t('start.order_details.order_submitted'),
            showConfirmButton: true,
            showCancelButton: false,
            confirmText: 'Confirm',
        })
    }
    if (res.code === 0) {
        show.value = false
        emits('success',res.data)
    }
}

const open = (orderItem: OrderItem) => {
    item.value = orderItem
    show.value = true
}
defineExpose({
    open
})
</script>


<style> :root:root {
     --van-dialog-width: 450px;
 }

 .popup-modal {
     position: absolute;
     z-index: 2014;
     @apply px-4 py-4 bg-white rounded-lg max-h-10;
     max-width: var(--van-dialog-width);
     left: 50%;
     transform: translateX(-50%);
 }

 .btn {
     --van-button-radius: 8px;
     box-shadow: 0px 4px 12px 0px rgba(255, 119, 0, 0.25);
 }
</style>