<script setup>
import {reactive, ref} from 'vue';
import XForm from "../../../components/XForm.vue";
import XFormItem from "../../../components/XFormItem.vue";
import XInput from "../../../components/XInput.vue";
import {backPage, showToast, toPage} from "../../../utils/uils.js";
import Api from "../../../api/index.js";
import XTY from "../../../components/XTY.vue";

const {id} = defineProps({
    id: {
        type: Number,
        default: null,
    }
});
const formRef = ref();
const TY = ref(false);
const rules = {
    realname: {
        reg: /^[\u4e00-\u9fa5]{1}(?:·?[\u4e00-\u9fa5]){1,24}$|^[\u4e00-\u9fa5]{2,25}$/,
        msg: '姓名不符合规则',
    },
    id_card: {
        reg: /^[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]$/,
        msg: '身份证号错误',
    },
    account: {
        reg: /^(?!\s*$).+/,
        msg: '支付宝不符合规则',
    },
    mobile: {
        reg: /^1[3-9]\d{9}$/,
        msg: '手机号错误',
    },
};
const form = reactive({
    type: 2,
    realname: null,
    id_card: null,
    account: null,
    mobile: null,
});

if (id) {
    Api.system.getWithdrawalInfo(id).then(({data}) => {
        Object.assign(form, data);
    })
}

const success = async () => {
    if (!TY.value) {
        showToast({
            icon: 'error',
            mask: true,
            title: '请同意服务协议',
        });
        return;
    }
    formRef.value.verify();
    if (id) {
        const {msg} = await Api.system.editWithdrawal(form);
        showToast(msg);
    } else {
        const {msg} = await Api.system.addWithdrawal(form);
        showToast(msg);
    }
    setTimeout(() => {
        backPage();
    }, 2000)
}
</script>

<template>
    <view>
        <x-form :model="form" :rules="rules" ref="formRef">
            <x-form-item label="真实姓名">
                <x-input v-model:model-value="form.realname" height="96rpx" placeholder="请输入真实姓名"></x-input>
            </x-form-item>
            <x-form-item label="身份证号码">
                <x-input v-model:model-value="form.id_card" height="96rpx" placeholder="请输入身份证号码"></x-input>
            </x-form-item>
            <x-form-item label="银行卡号">
                <x-input v-model:model-value="form.account" height="96rpx" placeholder="请输入银行卡号"></x-input>
            </x-form-item>
            <x-form-item label="手机号">
                <x-input v-model:model-value="form.mobile" height="96rpx" placeholder="请输入手机号"></x-input>
            </x-form-item>
            <x-form-item>
                <view class="items-center test-24r xy">
                    <x-t-y v-model:model-value="TY">
                        本人承诺已阅读并同意
                        <text class="text-[var(--primary-color)]" @click="toPage('/pages/richPage/index?id=4')">
                            《灵活用工平台综合服务协议》
                        </text>
                        ，本人按照协议内容向贵司提供相应的服务。
                    </x-t-y>
                </view>
            </x-form-item>
            <x-form-item>
                <view
                    @click="success"
                    class="bg-[var(--primary-color)] py-[26rpx] w-full text-[#fff] rounded-[12rpx] !flex justify-center items-center !mt-[40rpx]">
                    提交
                </view>
            </x-form-item>
        </x-form>
    </view>
</template>

<style scoped lang="scss">
.xy {
    :deep(.uni-radio-input) {
        width: 28rpx;
        height: 28rpx;
    }
}
</style>
