<script setup>
import {reactive, ref, watch} from "vue";
import Api from "../../../api/index.js";
import {Message} from "@arco-design/web-vue";

const visible = ref(false);
const detail = reactive({});
const emits = defineEmits(['success']);
const {id, money} = defineProps({
    id: {
        type: Number,
        default: null,
    },
    money: {
        type: Number,
        default: null
    }
});

watch(
    () => visible.value,
    (val) => {
        if (val) Api.merchant.postWithdrawal({
            id: id,
            type: 0,
            money: money,
        }).then(({data}) => {
            Object.assign(detail, data);
        }).catch(() => {
            visible.value = false;
        });
    },
    {deep: true}
)

const success = async () => {
    const {msg} = await Api.merchant.postWithdrawal({
        id: id,
        type: 1,
        money: money,
    });
    Message.success(msg);
    emits('success');
}
</script>

<template>
    <a-button v-if="!$slots.default" @click="visible=true">立即提现</a-button>
    <div v-else @click="visible=true">
        <slot></slot>
    </div>

    <a-modal
        @ok="success"
        ok-text="确认提现"
        title-align="start"
        title="核对提现信息"
        v-model:visible="visible">
        <a-form label-align="left">
            <a-form-item label="姓名">
                {{ detail.name }}
            </a-form-item>
            <a-form-item label="支付宝账号">
                {{ detail.account }}
            </a-form-item>
            <a-form-item label="提现金额">
                {{ detail.money?.toFixed(2) }}
            </a-form-item>
            <a-form-item label="提现手续费">
                {{ detail.process?.toFixed(2) }}
            </a-form-item>
            <a-form-item label="到账金额">
                {{ detail.real_money }}
            </a-form-item>
        </a-form>
        <div class="info">手续费率为{{ detail.ratio }}%，由三方代账公司收取</div>
    </a-modal>
</template>

<style lang="scss" scoped>
.info {
    color: rgb(155, 159, 171);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
}
</style>
