<script setup>
import {ref} from "vue";
import ZY_ICON from "../../../static/icons/注意.png";
import XConfirmModal from "../../../components/XConfirmModal.vue";
import {showToast} from "../../../utils/uils.js";
import {useUserStore} from "../../../pinia/UserStore/index.js";
import dayjs from "dayjs";
import Api from "../../../api/index.js";
import {debounce} from "lodash";

const UserStore = useUserStore();
const emits = defineEmits(['success']);
const show = ref(false);
const defaultDrawal = ref();
const toast = ref();
const open = debounce(async () => {
    const {data} = await Api.system.getDefaultWithdrawalInfo();
    if (!data) {
        toast.value.show({
            title: "未添加收款信息",
            content: "添加后重新发起打款",
            imgUrl: ZY_ICON,
            icon: true
        });
        return;
    }
    if (UserStore.userInfo.money < 1) {
        showToast({
            icon: 'error',
            title: '平台最低提现金额为1.00元',
        });
        return;
    }
    defaultDrawal.value = data;
    show.value = true;
}, 500);

const success = debounce(async () => {
    const {msg} = await Api.system.postWithdrawal({
        id: defaultDrawal.value.id,
        money: UserStore.userInfo.money,
    });
    showToast({
        icon: 'success',
        title: msg,
    });
    emits('success');
}, 500);
</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" v-if="defaultDrawal">
                    <view class="title">
                        请核对提现信息
                    </view>
                    <view class="info">
                        姓名：{{ defaultDrawal.realname }}<br/>
                        {{ defaultDrawal.type_text }}号：{{ defaultDrawal.account }}<br/>
                        提现金额：{{ UserStore.userInfo.money.toFixed(2) }}<br/>
                        提现手续费：{{
                            (UserStore.userInfo.money * (Number(defaultDrawal.ratio) / 100)).toFixed(2)
                        }}<br/>
                        到账金额：{{
                            (UserStore.userInfo.money - (UserStore.userInfo.money * (Number(defaultDrawal.ratio) / 100))).toFixed(2)
                        }}
                    </view>
                    <view class="exp">
                        手续费率为{{ defaultDrawal.ratio }}%，由三方代账公司收取
                    </view>
                </view>
            </template>
        </x-confirm-modal>
    </view>

    <tui-toast ref="toast"></tui-toast>
</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>
