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

const emits = defineEmits(['success']);
const props = defineProps({
    id: {
        type: Number,
        default: null,
    }
});
const show = ref(false);
const getSelect = async () => {
    const {data} = await Api.merchant.getWithdrawalList();
    return {
        data: data.map(v => ({
            ...v,
            id: v.id,
            name: `(${v.type_text}) ${v.mobile}`
        }))
    }
}
const form = reactive({
    account_id: null,
});

const success = debounce(async () => {
    const {msg} = await Api.merchant.againWithdrawal({
        id: props.id,
        ...form,
    });
    Message.success(msg);
    emits('success');
})
</script>

<template>
    <div @click="show=true" class="cursor-pointer">
        <icon-question-circle style="color: rgb(var(--red-6));"/>
    </div>

    <a-modal
        simple
        :width="500"
        title="提现失败"
        title-align="center"
        v-model:visible="show">
        <div class="mb-4">
            请修改您的提现信息，确保所有信息都归属同一个自然人，修改完后，在下方选择正确的提现信息，点击下方按钮，重新发起提现
        </div>
        <x-select :api="getSelect" v-model:model-value="form.account_id"></x-select>
        <template v-slot:footer>
            <div class="flex gap-3 justify-center">
                <a-button @click="show=false">取消</a-button>
                <a-button type="primary" status="warning" @click="success">重新提现</a-button>
            </div>
        </template>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
