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

const {id} = defineProps({
    id: {
        type: Number,
        default: null,
    }
});
const emits = defineEmits(['success']);
const visible = ref(false);
const form = reactive({
    id: null,
    realname: null,
    account: null,
    id_card: null,
    ratio: null,
    mobile: null,
    type: null,
});

watch(
    () => visible.value,
    (val) => {
        if (val) Api.admin.getWithdrawalInfo(id).then(({data}) => {
            Object.assign(form, data);
            form.ratio = Number(data.ratio);
        });
    },
    {deep: true}
)

const success = async () => {
    const {msg} = await Api.admin.getWithdrawalSetRatio(form);
    Message.success(msg);
    visible.value = false;
    emits('success');
}
</script>

<template>
    <a-link :hover="false" @click="visible=true">编辑</a-link>

    <a-modal
        @ok="success"
        ok-text="确定修改"
        title-align="start"
        title="编辑"
        v-model:visible="visible">
        <a-form layout="vertical">
            <a-form-item label="提现方式">
                <XSelect
                    v-model:model-value="form.type"
                    :init="true"
                    :api="Api.admin.getWithdrawalPlatform2"
                    placeholder="请选择提现方式">
                </XSelect>
            </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.realname" 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="费率">
                <a-input-number v-model:model-value="form.ratio" placeholder="请输入费率" :precision="2" :max="100">
                    <template #suffix>%</template>
                </a-input-number>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<style scoped>

</style>
