<template>
    <page :title="title" ref="pageRef"  nav-color="#fff" custom-class="paddingB25">

        <view class="flex-align-between padding15 marginT30 cell">
            <view class="font5">昵称：</view>
            <view class="flex1">
                <input v-model.trim="value" placeholder="请输入昵称" />
            </view>
        </view>
        <view class="paddingX30 paddingY50">
            <cm-button @click="save">保存</cm-button>
        </view>
    </page>
</template>
<script>
export default {
    data() {
        return {
            title: '',
            value: ''
        }
    },
    onLoad(options) {
        this.key = options.key
        this.value = decodeURIComponent(options.value)
        this.title = decodeURIComponent(options.title)
    },
    methods: {
        save() {
            if (!this.value) {
                return
            }
            if (this.key === 'nickname') {
                this.updateNickname()
            }
        },
        async updateNickname() {
            const res = await this.$service.user.updateNickname(this.value)
            if (res) {
                this.$service.user.info()
                this.$router.back()
            }
        }
    }
}
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
.bg {
    position: fixed;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}
.cell {
    border-top: 1px solid rgba($color: #fff, $alpha: 0.3);
    border-bottom: 1px solid rgba($color: #fff, $alpha: 0.3);
}
</style>