<!--完善信息-->
<template>
    <div id="perfect">
        <Nav :title="$t('perfect.title')"></Nav>
        <div class="content">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" :name="$t('perfect.username')" :label="$t('perfect.username')" :placeholder="$t('perfect.username')" :rules="[{ required: true, message: $t('perfect.usernameMessage') }]" />
                    <van-field v-model="nickName" :name="$t('perfect.nickName')" :label="$t('perfect.nickName')" :placeholder="$t('perfect.nickName')" :rules="[{ required: true, message: $t('perfect.nickNameMessage') }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        {{$t('perfect.submit')}}
                    </van-button>
                </div>
            </van-form>
        </div>
        <van-overlay :show="loading" @click="loading = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading color="#1989fa" size="50" />
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Nav from "@/components/pages/nav";
import { updateCustomer } from "@/api/comp/personal.js";
export default {
    data() {
        return {
            loading: false,
            username:'',
            nickName:'',
        };
    },
    mounted(){
        //获取用户信息
        let userInfo = this.$store.state.user.userInfo;
        //写入用户信息
        this.username=userInfo.name;
        this.nickName=userInfo.nickName;
    },
    methods:{
        onSubmit(){
            this.loading = true;
            require={
                name:this.username,
                nickName:this.nickName,
            }
            updateCustomer(require).then(res=>{
                if(res.code==200){
                    this.$toast({ type: "success", message: this.$t('perfect.submitSuccess') });
                    this.$store.commit('user/SET_NAME', require.name);//用户名
                    this.$store.commit('user/SET_NICK_NAME', require.nickName);//用户昵称
                    let userInfo = Object.assign({},this.$store.state.user.userInfo);
                    //写入用户信息
                    userInfo.name=require.name;
                    userInfo.nickName=require.nickName;
                    this.$store.commit('user/SET_USERINFO', userInfo);//用户基本信息
                    this.$router.push({path:'/personal'});
                    this.loading = false;
                }
            })
        }
    },
    components: {
        Nav,
    },
};
</script>

<style lang="scss" scoped>
#perfect {
    .content{
        padding: .2rem /* 20/100 */ 0;
    }
}
</style>