<template>
    <view>
        <view class="paddingT30">
            <div
                class="avatar-wrapper btn-clear"
                @click="onChooseAvatar"
            >
                <image v-if="avatar" class="avatar" :src="avatar"></image>
                <image v-else class="avatar" :src="resource.defaultAvatar"></image>
            </div>
            <view class="flex-align padding15 marginX35 radius10" style="border: 1px solid #eee">
                <view class="font5 color-white">昵称：</view>
                <view class="flex1">
                    <input
                        id="nickname-input"
                        type="nickname"
                        v-model="nickname"
                        class="weui-input color-white"
                        placeholder="请输入昵称"
                    />
                </view>
            </view>
        </view>
        <view class="padding35" :style="{ paddingTop: '100rpx' }">
            <cm-button @click="preComplete">确定</cm-button>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'

export default {
    data() {
        return {
            resource,
            nickname: '',
            avatar: ''
        }
    },
    mounted() {
        this.setUser(this.$store.getters.user)
    },
    methods: {
        setUser(value) {
            if (value == null) return
            !!value.avatar && (this.avatar = value.avatar)
            !!value.nickname && (this.nickname = value.nickname)
        },
        onChooseAvatar(e) {
            const { avatarUrl } = e.detail
            this.avatar = avatarUrl
        },
        async preComplete() {
            uni.createSelectorQuery()
                .in(this)
                .select('#nickname-input')
                .fields({
                    properties: ['value']
                })
                .exec((res) => {
                    const nickName = res?.[0]?.value
                    if (nickName) {
                        this.nickname = nickName
                    }
                    this.complete()
                })
        },
        async complete() {
            if (!this.nickname || !this.avatar) {
                this.$message.warn('请完善头像和昵称')
                return
            }
            if (
                this.avatar.startsWith('wxfile://tmp') ||
                this.avatar.startsWith('http://tmp') ||
                this.avatar.startsWith('https://tmp')
            ) {
                this.$message.showLoading()
                wx.uploadFile({
                    url: this.$service.base.apis.UPLOAD, //仅为示例，非真实的接口地址
                    filePath: this.avatar,
                    name: 'file',
                    header: {
                        Authentication: this.$store.getters.token
                    },
                    formData: {
                        appId: 'supermart',
                        folder: 'avatar'
                    },
                    success: (res) => {
                        this.$message.hideLoading()
                        if (res.statusCode == 200) {
                            const result = JSON.parse(res.data)
                            if (result.code == 0) {
                                this.apiComplete(result.data.url || resource.defaultAvatar)
                            }
                        }
                    },
                    error: (res) => {
                        this.$message.hideLoading()
                        this.$message.error('上传图片失败')
                    }
                })
            } else {
                this.apiComplete(this.avatar)
            }
        },
        async apiComplete(avatar) {
            const res = await this.$service.user.updateInfo(this.nickname, avatar)
            if (res) {
                this.initUser()
                this.$router.back()
            }
        },
        async initUser() {
            this.$service.user.info()
        }
    }
}
</script>
<style lang="scss" scoped>
.avatar-wrapper {
    padding: 0;
    width: 70px !important;
    height: 70px !important;
    border-radius: 35px;
    margin-top: 40px;
    margin-bottom: 40px;
    border: 1px solid #ddd;
}

.avatar {
    display: block;
    width: 70px !important;
    height: 70px !important;
    border-radius: 35px;
}

.container {
    display: flex;
}
.line {
    border: 2rpx solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.btn {
    height: 100rpx;
    line-height: 100rpx;
    background: linear-gradient(270deg, #d070ff 0%, #8b3dff 100%);
    border-radius: 50rpx;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
}
</style>