<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <div class="change" v-if="type === 'nickname'">
                <van-field
                    label="昵称"
                    v-model="message"
                    type="text"
                    :maxlength="10"
                    :placeholder="'请输入昵称'"
                    clearable
                />
                <div class="btn">
                    <van-button type="primary" block radius="4" @click="save"> 确认修改 </van-button>
                </div>
            </div>
        </ion-content>
    </ion-page>
</template>

<script>
import { mapState } from 'pinia'
import { useUserStore } from '@/stores/user'
export default {
    computed: {
        ...mapState(useUserStore, ['user'])
    },
    data() {
        return {
            type: 'nickname',
            message: '',
            // briefIntroduction: '',
            // school: '',
            // occupation: "",
            // company: '',
            // mailbox: '',
            info: {}
        }
    },
    setup() {
        const userStore = useUserStore()
        return {
            userStore
        }
    },
    mounted() {
        this.type = this.$route.query.type
        this.message = this.user.nickname
    },
    methods: {
        updateUser(info, sucess = true) {
            return this.$http
                .post(
                    '/user/my/update',
                    {
                        ...this.user,
                        ...info
                    },
                    { body: 'json' }
                )
                .then(() => {
                    return this.userStore.get()
                })
                .then(() => {
                    if (sucess) {
                        this.$toast.success('更新成功')
                    }
                    return Promise.resolve()
                })
                .catch(e => {
                    if (e) {
                        this.$toast.error(e.error)
                    }
                    return Promise.reject()
                })
        },
        save() {
            let data = {
                userId: this.user.id,
                ...this.info,
                nickname: this.message
            }
            this.updateUser({ [this.type]: this.message }).then(() => {
                this.$router.back()
            })
            // /userDetail/save
            // if (this.message) {
            //     this.updateUser({ [this.type]: this.message }).then(() => {
            //         setTimeout(() => {
            //             this.$router.back();
            //         }, 1500);
            //     });
            // }
        }
    }
}
</script>

<style lang="less" scoped>
.title {
    padding: 23px 16px;
}

:deep(.van-cell) {
    --van-field-label-color: var(--ion-color-light-contrast);
    --van-cell-value-color: var(--ion-color-light-contrast);
    --van-field-label-width: 50px;
    --van-cell-vertical-padding: 18px;
    --van-cell-horizontal-padding: 15px;
    .van-field__label {
        font-weight: bold;
    }

    .van-field__value {
        font-size: 16px;
    }
}

.change {
    padding: 16px;
}
.btn {
    padding: 40px 12px;
}
</style>
