<script setup>
import TS_ICON1 from "../../../assets/images/ts1.png";
import TS_ICON2 from "../../../assets/images/ts2.png";
import TS_ICON3 from "../../../assets/images/ts3.png";
import TS_ICON4 from "../../../assets/images/ts4.png";
import {reactive, ref, useTemplateRef, watch} from 'vue';
import Api from "../../../api/index.js";
import VerificationCode from "../../../components/VerificationCode/index.vue";
import {Message} from "@arco-design/web-vue";
import {useUserStore} from "../../../pinia/UserStore/index.js";

const {id} = defineProps({
    id: {
        type: Number,
        default: null,
    }
});
const UserStore = useUserStore();
const showPreview = ref(false);
const visible = ref(false);
const emits = defineEmits(['success']);
const formRef = useTemplateRef('formRef');
const state = reactive({
    timer: null,
    sendTimeout: 0,
});
const form = reactive({
    type: 1,
    id: null,
    mobile: UserStore.userInfo.mobile,
    captcha: null,
    realname: null,
    id_card: null,
    account: null,
});
const rules = {
    realname: [
        {
            required: true,
            message: '姓名不能为空',
        },
        {
            match: /^[\u4e00-\u9fa5]{1}(?:·?[\u4e00-\u9fa5]){1,24}$|^[\u4e00-\u9fa5]{2,25}$/,
            message: '姓名错误',
        }
    ],
    account: [{
        required: true,
        message: '账号不能为空',
    }],
    id_card: [
        {
            required: true,
            message: '身份证不能为空',
        },
        {
            match: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/,
            message: '身份证号错误',
        }
    ],
    mobile: [
        {
            required: true,
            message: '手机号不能为空',
        },
        {
            match: /^1[3-9]\d{9}$/,
            message: '手机号错误',
        }
    ],
    captcha: [{
        required: true,
        message: '验证码不能为空',
    },]
};

watch(
    () => visible.value,
    (val) => {
        if (val && id) Api.merchant.getWithdrawalInfo(id).then(({data}) => {
            Object.assign(form, data);
        });
    }
)

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

const success = () => {
    if (!form.id) {
        formRef.value.validate().then(async (res) => {
            if (res) {
                const firstKey = Object.keys(res)[0];
                Message.warning(res[firstKey].message);
            } else {
                const {msg} = await Api.merchant.addWithdrawal(form);
                Message.success(msg);
                visible.value = false;
                emits('success');
            }
        });
    } else {
        formRef.value.validate().then(async (res) => {
            if (res) {
                const firstKey = Object.keys(res)[0];
                Message.warning(res[firstKey].message);
            } else {
                const {msg} = await Api.merchant.editWithdrawal(form);
                Message.success(msg);
                visible.value = false;
                emits('success');
            }
        });
    }
}
</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"
        :ok-text="`确定${id?'修改':'添加'}`"
        :title="`${id?'修改':'添加'}提现信息`"
        @ok="success"
        @cancel="visible = false"
        :visible="visible">
        <a-form
            layout="vertical"
            ref="formRef"
            :model="form"
            :rules="rules">
            <a-tabs type="rounded" destroy-on-hide v-model:active-key="form.type">
                <a-tab-pane title="添加支付宝" :key="1">
                    <a-form-item label="收款姓名" field="realname">
                        <a-input v-model:model-value="form.realname" placeholder="请输入收款人的姓名"></a-input>
                    </a-form-item>
                    <a-form-item field="account">
                        <template v-slot:label>
                            <div class="flex justify-between items-center flex-grow">
                                <div>支付宝账号</div>
                                <a-link :hoverable="false" @click="showPreview=true">
                                    <icon-question-circle/>
                                    提示
                                </a-link>
                            </div>
                        </template>
                        <a-input v-model:model-value="form.account" placeholder="请输入支付宝账号"></a-input>
                    </a-form-item>
                    <a-form-item label="身份证号" field="id_card">
                        <a-input v-model:model-value="form.id_card" placeholder="请输入身份证号"></a-input>
                    </a-form-item>
                    <a-form-item label="手机号" field="mobile">
                        <a-input v-model:model-value="form.mobile" disabled placeholder="请输入手机号"></a-input>
                    </a-form-item>
                    <a-form-item label="验证码" field="captcha">
                        <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="真实姓名" field="realname">
                        <a-input v-model:model-value="form.realname" placeholder="请输入真实姓名"></a-input>
                    </a-form-item>
                    <a-form-item label="身份证号" field="id_card">
                        <a-input v-model:model-value="form.id_card" placeholder="请输入身份证号"></a-input>
                    </a-form-item>
                    <a-form-item label="银行卡号" field="account">
                        <a-input v-model:model-value="form.account" placeholder="请输入银行卡号"></a-input>
                    </a-form-item>
                    <a-form-item label="手机号" field="mobile">
                        <a-input v-model:model-value="form.mobile" placeholder="请输入手机号"></a-input>
                    </a-form-item>
                </a-tab-pane>
            </a-tabs>
        </a-form>
    </a-modal>

    <a-image-preview-group
        infinite
        :srcList="[TS_ICON1, TS_ICON2, TS_ICON3, TS_ICON4]"
        v-model:visible="showPreview"/>
</template>

<style lang="scss">
.arco-form-item-label {
    display: flex;
    flex-grow: 1;
}
</style>
