<script setup lang="ts">
import {ref} from "vue";
import Alipay from "./Alipay.vue";

const visible = ref(false);
const money = ref(null);
</script>

<template>
    <div @click="visible=true">
        <slot></slot>
    </div>

    <a-modal
        title="充值"
        :width="600"
        title-align="start"
        id="GoTask-Modal"
        v-model:visible="visible">
        <a-alert>平台提示：该款项不会直接打给达人，只有您对子任务确认结算后，才会打款给达人</a-alert>
        <div class="p-[24px] h-[370px]">
            <a-form layout="vertical">
                <a-form-item label="支付方式">
                    <a-radio :default-checked="true">支付宝</a-radio>
                </a-form-item>
                <a-form-item label="充值金额">
                    <a-input-number :min="0" :precision="2" v-model:model-value="money"
                                    placeholder="请输入充值金额"></a-input-number>
                </a-form-item>
            </a-form>
        </div>
        <template v-slot:footer>
            <div class="flex gap-[24px] justify-end">
                <a-button @click="visible=false">取消</a-button>
                <Alipay :money="money">
                    <a-button type="primary" @click="visible=false">下一步</a-button>
                </Alipay>
            </div>
        </template>
    </a-modal>
</template>

<style lang="scss">
#GoTask-Modal {
    .arco-modal-body {
        padding: 0;
    }
}
</style>

<style scoped lang="scss">

</style>
