<template>
    <!-- 生产部录入信息Factory information -->
    <div class="fife" style="background-color:#ebedf0">
        <s-header :name="'设备出厂信息录入'" :noback="false"></s-header>
        <br>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="name" name="姓名" label="姓名" placeholder="姓名"
                    :rules="[{ required: true, message: '请填写真实姓名' }]" />
                <van-field v-model="phone" name="电话" label="电话" placeholder="手机号码"
                    :rules="[{ required: true, message: '请填写联系电话' }]" />
                <van-field v-model="username" name="账号名称" label="账号名称" placeholder="请先登录" readonly
                    :rules="[{ required: true, message: '请填写账号名' }]" />
                <van-field v-model="clientId" name="设备唯一码" label="设备唯一码" placeholder="设备唯一码" readonly
                    :rules="[{ required: true, message: '设备唯一码不能为空' }]" />

                <van-field v-model="country" rows="1" autosize name="发往国家" label="发往国家" placeholder="发往国家" :formatter="formatter"
                    :rules="[{ required: true, message: '请填写发往国家' }]" />
            </van-cell-group>
            <div style="margin: 16px; display: flex; justify-content: center; align-items: center;">
                <van-button round class="custom-button" type="primary" size="small" native-type="submit" block>
                    提交
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<script>
import sHeader from "@/components/SimpleHeader";
import { inputLocInfo } from "../../service/fife/index";
import { ref, onMounted } from "vue";
import { showFailToast, showToast } from "vant";
import {
    getLoginUser,
} from "@/common/js/utils";
import router from "../../router";

export default {
    components: { sHeader },
    setup: function () {
        const isLoginFunc = () => {
            const user = getLoginUser();
            if (!user) {
                router.push('/login');
            } else {
                username.value = user.username;
            }
        }
        const username = ref('');
        const phone = ref('');
        const name = ref('');
        const country = ref('');
        const clientId = ref('');
        // 过滤输入的字符
        const formatter = (value) => value.replace(/[^\u4e00-\u9fa5、]/g, '');

        const getClientId = () => {
            // const urlParams = new URLSearchParams(window.location.hash);
            const urlParams = new URLSearchParams(window.location.href.split('?')[1]);
            clientId.value = urlParams.get('clientId');
        }
        onMounted(() => {
            getClientId();
            isLoginFunc();
        })

        const locationCheck = ref({});

        const onSubmit = async () => {
            // 提交表单
            const locationCheck = {
                name: name.value,
                phone: phone.value,
                username: username.value,
                clientId: clientId.value,
                country: country.value,
            }
            const { data } = await inputLocInfo(locationCheck);

            if (data.code === "00000") {
                showToast(data.data);
            } else {
                showFailToast(data.message);
            }
        }

        return {
            onSubmit,
            clientId,
            locationCheck,
            country,
            name,
            username,
            phone,
            formatter,
        };
    }
}
</script>

<style>
.custom-button {
    width: 120px;
}
</style>