<script setup>
import {reactive, ref} from "vue";
import XInfoModal from "../../../components/XInfoModal.vue";
import XForm from "../../../components/XForm.vue";
import XFormItem from "../../../components/XFormItem.vue";
import XInput from "../../../components/XInput.vue";
import SendMsg from "../../../components/SendMsg.vue";
import {useUserStore} from "../../../pinia/UserStore/index.js";
import Api from "../../../api/index.js";
import {showToast} from "../../../utils/uils.js";

const XFormRef = ref();
const UserStore = useUserStore();
const show = defineModel('show');
const rules = {
    old_mobile: {
        reg: /^1[3-9]\d{9}$/,
        msg: '请输入正确的手机号',
    },
    old_captcha: {
        reg: /.+/,
        msg: '请输入正确验证码',
    },
    new_mobile: {
        reg: /^1[3-9]\d{9}$/,
        msg: '请输入正确的手机号',
    },
    new_captcha: {
        reg: /.+/,
        msg: '请输入正确验证码',
    },
};
const form = reactive({
    old_mobile: UserStore.userInfo.full_mobile,
    old_captcha: null,
    new_mobile: null,
    new_captcha: null,
});

const success = async () => {
    XFormRef.value.verify();
    const {msg} = await Api.system.saveMobile(form);
    showToast(msg);
    show.value = false;
    await UserStore.getUserInfo();
}
</script>

<template>
    <x-info-modal v-model:show="show" @success="success">
        <view class="title">更换手机号</view>

        <x-form ref="XFormRef" :model="form" :rules="rules">
            <x-form-item label="原手机号">
                <x-input height="72rpx" placeholder="原手机号" disabled
                         v-model:model-value="form.old_mobile"></x-input>
            </x-form-item>
            <x-form-item label="验证码">
                <send-msg
                    height="72rpx"
                    :mobile="form.old_mobile"
                    v-model:model-value="form.old_captcha"
                    :type="4">
                </send-msg>
            </x-form-item>
            <x-form-item label="新手机号">
                <x-input height="72rpx" placeholder="新手机号" v-model:model-value="form.new_mobile"></x-input>
            </x-form-item>
            <x-form-item label="验证码">
                <send-msg
                    height="72rpx"
                    :mobile="form.new_mobile"
                    v-model:model-value="form.new_captcha"
                    :type="5">
                </send-msg>
            </x-form-item>
        </x-form>
    </x-info-modal>
</template>

<style scoped lang="scss">
.title {
    color: rgb(29, 33, 41);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 20rpx;
}
</style>
