<template>
    <view>
        <view class="bg-white rounded-lg flex items-center mt-4 py-[20rpx] px-[32rpx]">
            <text class="text-[40rpx] font-bold">¥</text>
            <u-input placeholder="请输入自定义金额" class="ml-2" v-model="money"></u-input>
        </view>
        <view class="mt-[50rpx]">
            <view class="flex items-center">
                <view class="block"></view>
                <view class="text-lg font-medium ml-2">支付方式</view>
            </view>
            <view class="mt-[28rpx]" v-for="item in payWayList" :key="item.pay_way" @click="choosePayWay = item.pay_way">
                <view class="bg-white rounded-lg py-[26rpx] px-[32rpx] flex items-center">
                    <u-image width="50" height="50" :src="item.image"></u-image>
                    <view class="ml-2 font-semibold">{{ item.extra }}</view>
                    <checkboxMark background="#7E5008" class="ml-auto" :select="choosePayWay == item.pay_way"></checkboxMark>
                </view>
            </view>
        </view>
        <view class="mt-[50rpx]">
            <view class="flex items-center">
                <view class="block"></view>
                <view class="text-lg font-medium ml-2">保证金套餐</view>
            </view>
            <view class="grid grid-cols-3 gap-2 mt-[28rpx]">
                <view
                    v-for="(item, index) in listData"
                    :key="index"
                    class="relative bg-white p-[50rpx] flex flex-col items-center rounded-lg"
                    style="overflow: hidden;"
                    @click="money = item.money"
                >
                    <view class="text-[28rpx] mb-[6rpx]">{{ item.name }}</view>
                    <view class="mb-[40rpx] text-center">
                        <price
                            fontWeight="900"
                            :content="item.money"
                            color="#7E5008"
                            main-size="48rpx"
                            minor-size="28rpx"
                        ></price>
                    </view>
                    <view class="absolute bottom-0 bg-[#F9F1E6] w-full text-center text-[#7E5008] text-[24rpx] py-[6rpx]">
                        日限{{ item.order_limit }}单
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import checkboxMark from '@/components/checkbox-mark/index.vue'
import { getPayWay } from '@/api/pay'
import { ref, watch } from 'vue'

const payWayList = ref<any>([])
const choosePayWay = ref(0)
const money = ref()

const emit = defineEmits(['change'])

const getPayWayList = async () => {
    const data = await getPayWay()
    choosePayWay.value = data.lists.find(element => element.is_default == 1)?.pay_way || 0
    payWayList.value = data.lists
}

const prop = defineProps({
    listData: {
        type: Array,
        default: () => [] as any
    }
})

getPayWayList()

watch(
    () => [money.value,choosePayWay.value],
    ([value1,value2]) => {
        emit('change',{pay_way:choosePayWay.value,money:money.value})
    },
    {
        immediate: true,
    }
)
</script>

<style lang="scss" scoped>
.block {
    width: 4px;
    height: 36rpx;
    background-color: #7e5008;
}
</style>
