<template>
    <u-popup
        v-model="showPopup"
        mode="bottom"
        :customStyle="{
            'background': `none`
        }"
        :closeable="true"
        :mask-close-able="false"
        @close="showPopup = false"
    >
        <view
            style="border-radius: 20rpx 20rpx 0 0;"
            class="append-popup bg-white p-[30rpx] text-center"
        >
            <view class="py-2 font-medium text-2xl text-black">
                {{ title }}
            </view>

            <view class="mt-3">

                <view
                    class="flex text-base bg-[#f6f7f8]"
                    style="border-radius: 20rpx; padding: 20rpx 24rpx;"
                >
                    <view class="flex-none text-base font-medium">
                        补差价金额
                    </view>
                    <view class="ml-2 flex-1 text-right">
                        <input type="number" v-model="orderAmount" placeholder="¥ 0.00">
                    </view>
                </view>

                <view
                    class="flex text-base bg-[#f6f7f8] mt-3"
                    style="border-radius: 20rpx; padding: 20rpx 24rpx;"
                >
                    <view class="flex-none text-base font-medium">
                        备注
                    </view>
                    <view class="ml-2 flex-1 text-right">
                        <input type="text" v-model="orderDesc" placeholder="请输入补差价原因">
                    </view>
                </view>

                <view class="mt-4 text-left">
                    <view class="text-xs font-medium text-muted">
                        *支付前需与服务人员协商一致，如有异议，请联系平台客服。
                    </view>
                    <view class="mt-1 text-xs font-medium text-muted">
                        系统只保障在线支付的项目，切勿线下支付。
                    </view>
                </view>
            </view>

            <view style="margin-top: 90rpx" class="footer flex-1 safe-area-inset-bottom">
                <u-button
                    type="primary"
                    @click="confirm"
                >
                    立即支付
                </u-button>
            </view>
        </view>
    </u-popup>
</template>

<script lang="ts" setup>
import {computed, ref} from 'vue'
import {apiOrderGap} from "@/api/order";
import {useRouter} from "uniapp-router-next";

const props = defineProps<{
    show: boolean
    title: string
    order_id: number
}>()

const emits = defineEmits<{
    (event: 'update:show', show: boolean): void
}>()

const showPopup = computed({
    get() {
        return props.show
    },
    set(val) {
        if (!val) {
            orderAmount.value = null
            orderDesc.value = ''
        }
        emits('update:show', val)
    }
})

const router = useRouter()
const orderAmount = ref<number | null>(null)
const orderDesc = ref<string>('')

const confirm = async () => {
    const { id , type } = await apiOrderGap({
        order_id: props.order_id,
        order_amount: orderAmount.value,
        remark: orderDesc.value
    })
    router.navigateTo({
        url: '/bundle/pages/order_pay/order_pay',
        query: {
            order_id: id,
            from: type,
            order_amount: orderAmount.value
        }
    })
    showPopup.value = false
}
</script>