<script setup>
import XModal from "./XModal.vue";
import {reactive, ref} from "vue";
import XSelect from "./XSelect.vue";
import Api from "../api";
import {debounce} from "lodash";
import {showToast} from "../utils/uils.js";

const emits = defineEmits(['success']);
const props = defineProps({
    id: {
        type: String,
        default: null,
    }
});
const show = ref(false);
const form = reactive({
    payType: null,
});

const getApi = async () => {
    const {data} = await Api.system.getWithdrawal();
    return {
        data: data.map(v => ({
            ...v,
            id: v.id,
            name: `(${v.type_text}) ${v.realname} ${v.account}`,
        })),
    }
}

const success = debounce(async () => {
    const {msg} = await Api.system.editWithdrawLog({
        id: props.id,
        wid: form.payType,
    });
    showToast(msg);
    show.value = false;
    emits('success')
}, 500);
</script>

<template>
    <Text @click="show=true">
        <slot></slot>
    </Text>

    <x-modal v-model:show="show">
        <view class="px-[16px] py-[20px] text-[#000]">
            <view class="text-[#000] text-center">提现失败</view>
            <view class="!my-2 text-black">请修改您的提现信息，确保所有信息都归属于用一个自然人。修改后，在下方选择正确的提现信息。
            </view>
            <x-select v-model:model-value="form.payType" :api="getApi"
                      placeholder="请选择提现方式"></x-select>
            <view class="!flex gap-3 !mt-3">
                <tui-button height="80rpx" type="gray" @click="show=false">取消</tui-button>
                <tui-button height="80rpx" @click="success">重新提现</tui-button>
            </view>
        </view>
    </x-modal>
</template>

<style scoped lang="scss">

</style>
