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

const visible = ref(false);
const state = reactive({
    timer: null,
    sendTimeout: 0,
});
const form = reactive({
    type: null,
    mobile: null,
    captcha: null,
    realname: null,
    id_card: null,
    account: null,
});

const sendMessage = () => {
    state.sendTimeout = 10;
    state.timer = setInterval(() => {
        state.sendTimeout--;
        if (state.sendTimeout === 0) {
            state.sendTimeout = 0;
            clearInterval(state.timer);
        }
    }, 1000);
}

const success = async () => {
    const {msg} = await Api.merchant.addWithdrawal(form);
    Message.success(msg);
}
</script>

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

    <a-modal
        title-align="start"
        title="添加提现信息"
        @ok="success"
        v-model:visible="visible">
        <a-form>
            <a-tabs type="rounded">
                <a-tab-pane title="添加支付宝" key="1">
                    <a-form-item label="收款姓名">
                        <a-input v-model:model-value="form.realname" placeholder="请输入收款人的姓名"></a-input>
                    </a-form-item>
                    <a-form-item label="支付宝账号">
                        <a-input v-model:model-value="form.account" placeholder="请输入支付宝账号"></a-input>
                    </a-form-item>
                    <a-form-item label="身份证号">
                        <a-input v-model:model-value="form.id_card" placeholder="请输入身份证号"></a-input>
                    </a-form-item>
                    <a-form-item label="手机号">
                        <a-input v-model:model-value="form.mobile" placeholder="请输入手机号"></a-input>
                    </a-form-item>
                    <a-form-item label="验证码">
                        <VerificationCode
                            :type="6"
                            :api="Api.merchant.sendSms"
                            :mobile="form.mobile"
                            v-model:verification-code="form.captcha">
                        </VerificationCode>
                    </a-form-item>
                </a-tab-pane>
                <a-tab-pane title="添加银行卡" key="2">
                    <a-form-item label="真实姓名">
                        <a-input v-model:model-value="form.name" placeholder="请输入真实姓名"></a-input>
                    </a-form-item>
                    <a-form-item label="身份证号">
                        <a-input v-model:model-value="form.name" placeholder="请输入身份证号"></a-input>
                    </a-form-item>
                    <a-form-item label="银行卡号">
                        <a-input v-model:model-value="form.name" placeholder="请输入银行卡号"></a-input>
                    </a-form-item>
                    <a-form-item label="手机号">
                        <a-input v-model:model-value="form.name" placeholder="请输入手机号"></a-input>
                    </a-form-item>
                </a-tab-pane>
            </a-tabs>
        </a-form>
    </a-modal>
</template>

<style scoped>

</style>
