<script setup>
import {ref} from "vue";
import XConfirmModal from "../../../components/XConfirmModal.vue";
import {showToast} from "../../../utils/uils.js";

const show = ref(false);
const open = () => {
    show.value = true;
}

const success = () => {
    showToast({
        icon: 'success',
        title: '发起提现成功，正在打款',
    });
}
</script>

<template>
    <view>
        <view @click="open">
            <slot></slot>
        </view>

        <x-confirm-modal
            @success="success"
            v-model:show="show"
            width="540rpx"
            confirm-text="我已确认"
            :cancel="false">
            <template v-slot:context>
                <view class="w-full">
                    <view class="title">
                        请核对提现信息
                    </view>
                    <view class="info">
                        姓名：李晓<br/>
                        支付宝号：13566890241<br/>
                        提现金额：36.78<br/>
                        提现手续费：3.678<br/>
                        到账金额：33.10
                    </view>
                    <view class="exp">
                        手续费率为6%，由三方代账公司收取
                    </view>
                </view>
            </template>
        </x-confirm-modal>
    </view>
</template>

<style scoped lang="scss">
.title {
    color: rgb(29, 33, 41);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
}

.info {
    color: rgb(78, 89, 105);
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0;
    text-align: left;
}

.exp {
    color: rgb(155, 159, 171);
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
}
</style>
