<template>
    <view class="setting">
        <!-- 更多管理 -->
        <view class="list">
            <view class="list-item" @click="updImgs">
                <view class="list-item-left"> <span>修改头像</span> </view>
                <view class="avatar">
                    <image :src="avatar.showPath || require('@/static/user/cover.png')" mode="aspectFill" />
                    <u-icon name="arrow-right" color="#999" size="20"></u-icon>
                </view>
            </view>
            <view class="list-item">
                <view class="list-item-left"> <span>修改昵称</span> </view>
                <view class="input">
                    <input type="text" :value="nickname" @blur='blur' placeholder="请输入用户的昵称" maxlength="12" />
                    <u-icon name="arrow-right" color="#999" size="20"></u-icon>
                </view>
            </view>
        </view>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
    import {
        getUserSettingInfo,
        resetUserInfo
    } from '@/apis/interfaces/setting.js'
    import {
        uploads
    } from '@/apis/interfaces/uploading'
    export default {
        data() {
            return {
                canLogin: true,
                nickname: '',
                avatar: {
                    path: '',
                    showPath: ''
                },
                is_bind: true
            }
        },
        onShow() {
            this.getUserInfo()
        },
        onPullDownRefresh() {
            this.getUserInfo()
        },
        methods: {
            // 获取当前用户得基本信息
            getUserInfo() {
                getUserSettingInfo().then(res => {
                    this.avatar.showPath = res.avatar
                    this.nickname = res.nickname
                    this.is_bind = res.is_bind
                    uni.stopPullDownRefresh()
                }).catch(err => {
                    this.$refs.uToast.show({
                        title: err.message,
                        type: 'primary',
                        duration: 3000
                    })
                })
            },
            // 上传头像
            updImgs(type) {
                uni.chooseImage({
                    crop: {
                        quality: 100,
                        width: 128,
                        height: 128,
                        resize: true
                    },
                    success: res => {
                        let path = res.tempFiles.map((val, index) => {
                            return {
                                name: 'uploads' + index,
                                uri: val.path
                            }
                        })
                        uploads(path).then(pathRes => {
                            this.avatar.path = pathRes.path[0]
                            this.avatar.showPath = pathRes.url[0]
                            this.resetUserInfo('avatar', pathRes.url[0])
                        }).catch(err => {
                            uni.showToast({
                                title: err.message,
                                icon: "none",
                                duration: 2000,
                                mask: true
                            })
                        })
                    }
                })
            },
            // 修改姓名
            blur(e) {
                let value = e.detail.value
                if (value !== this.nickname) {
                    this.resetUserInfo('nickname', value)
                }
            },
            // 修改头像或昵称
            resetUserInfo(key, value) {
                let data = {
                    key: key,
                    value: value
                }
                resetUserInfo(data).then(res => {
                    uni.showToast({
                        title: res,
                        icon: 'none'
                    })
                    this.getUserInfo()
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #F8F8F8;
    }

    .setting {
        position: relative;
        background-color: #fff;

        // 更多管理
        .list {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            box-sizing: border-box;
            position: relative;
            top: -10rpx;
            border-radius: 20rpx;
            margin: 0 $margin;
            padding: 30rpx 0;
            width: calc(100% - 80rpx);

            .list-item {
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 40rpx 0;
                border-bottom: solid 1rpx #f9f9f9;
                box-sizing: border-box;
                font-size: $title-size;

                .avatar {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;


                    image {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 50%;
                        margin-right: 20rpx;
                    }
                }

                .input {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                    text-align: right;
                    flex: 1;

                    input {
                        padding-right: $padding - 10;
                        width: 100%;
                    }
                }

                .list-item-left {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;
                    box-sizing: border-box;

                    image {
                        width: 40rpx;
                    }

                    span {
                        margin-left: 20rpx;
                    }
                }
            }
        }

    }
</style>
