<template>
    <!-- 售后部修改设备位置信息-->
    <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="modName" name="姓名" label="姓名" placeholder="姓名" left-icon="smile-o"
                    :rules="[{ required: true, message: '请填写真实姓名' }]" />
                <van-field v-model="modPhone" name="电话" label="电话" placeholder="手机号码" left-icon="phone-o"
                    :rules="[{ required: true, message: '请填写联系电话' }]" />
                <van-field v-model="clientId" name="设备唯一码" label="设备唯一码" placeholder="设备唯一码" left-icon="setting-o"
                    :rules="[{ required: true, message: '设备唯一码不能为空' }]" />
                <van-field v-model="country" rows="1" autosize name="发往国家" label="发往国家" placeholder="发往国家" :formatter="formatter"
                left-icon="guide-o" :rules="[{ required: true, message: '请填写发往国家' }]" />

                <van-field v-model="message" rows="3" autosize label="修改原因" type="textarea" placeholder="修改原因"
                    left-icon="edit" maxlength="50" show-word-limit :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 { updateLocInfo } from "../../service/fife/modifyLoc";
import { ref } from "vue";
import { showToast, showFailToast } from "vant";
// import { computed } from "vue";

export default {
    components: { sHeader },
    setup: function () {

        const modPhone = ref('');
        const modName = ref('');
        const country = ref('');
        const clientId = ref('');
        // 过滤输入的字符
        const formatter = (value) => value.replace(/[^\u4e00-\u9fa5、]/g, '');

        const message = ref('');


        const locationCheck = ref({});
        const loginUser = localStorage.getItem('loginUser');
        const loginUserInfo = JSON.parse(loginUser);
        const modUsername = ref(loginUserInfo.username);
        // 提交表单
        const onSubmit = async () => {
            const locationCheck = {
                modName: modName.value,
                modPhone: modPhone.value,
                modUsername: modUsername.value,
                clientId: clientId.value,
                country: country.value,
                // location: location.value,
                message: message.value,
            }
            const { data } = await updateLocInfo(locationCheck);

            if (data.code === "00000") {
                // 成功
                // ElMessage.success("保存成功");
                showToast(data.data);
            } else {
                showFailToast(data.message);
            }
        }

        return {
            onSubmit,
            clientId,
            locationCheck,
            country,
            modName,
            modPhone,
            message,
            formatter,
        };
    }
}
</script>

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