<template>
	<view class="content">
		<!-- 会员信息 -->
		<view class="user">
            <image class="user-cover" src="/static/imgs/default_myHead.png" mode="aspectFill"></image>
			<block v-if="userLogin">
                <image class="user-cover" @click="updImg('license')" :src="avatar" mode="aspectFill"></image>
                <view class="user-nickname" @click="nameClick">{{ nickName ? nickName : '请登录' }}<image v-if="nickName" src="/static/icons/useredit_icon.png" mode=""></image></view>
                <view class="user-tags" v-if="userData.hasCase">
                    <view class="user-tags-label" @click="$Router.push({name: 'Attestation', params: { hasCase: userData.hasCase }})">
                        用户档案<image src="/static/icons/userForm_icon.png"></image>
                    </view>
                    <view class="user-tags-label" @click="$Router.push({name: 'UserCase'})">
                        健康档案<image src="/static/icons/userForm_icon.png"></image>
                    </view>
                </view>
                <view v-else>
                    暂未添加档案
                </view>
            </block>
            <view v-else @click="$Router.push({name: 'Login'})">
                <view class="user-login">请先登录</view>
                <!-- <image class="user-login-img" src="@/static/icons/userLogin_icon.png" mode="widthFix"></image> -->
            </view>
		</view>
		<!-- 订单 -->
		<!-- <view class="orders">
			<view class="title">我的订单<text @click="$Router.push({name: 'OrderIndex', params: { listType: 'paid' }})">全部订单</text></view>
			<view class="orders-flex">
				<view class="order-item">
					<image src="@/static/icons/order_01.png" mode="widthFix"></image>
					<view class="text-text">待付款</view>
				</view>
				<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'paid' }})">
					<image src="@/static/icons/order_02.png" mode="widthFix"></image>
					<view class="text-text">待发货</view>
				</view>
				<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'delivered' }})">
					<image src="@/static/icons/order_03.png" mode="widthFix"></image>
					<view class="text-text">已发货</view>
				</view>
				<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'signed' }})">
					<image src="@/static/icons/order_04.png" mode="widthFix"></image>
					<view class="text-text">已签收</view>
				</view>
			</view>
		</view> -->
		<!-- 操作按钮 -->
		<view class="tools">
			<view class="tools-item" v-if="!userData.hasCase" @click="$Router.push({name: 'Attestation', params: { hasCase: userData.hasCase }})">添加档案<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
			<view class="tools-item" @click="$Router.push({name: 'Friend'})">邀请记录<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
			<view class="tools-item" @click="$Router.push({name: 'UserCode'})">邀请码<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
			<view class="tools-item" v-if="userLogin" @click="outLogin">退出登录<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
		</view>
        
        <view class="nameBack" v-if="nameState"></view>
        <view class="namePop" v-if="nameState">
            <input type="text" class="namePop-input" placeholder="请输入新名字" @input="nameInput" />
            <view class="namePop-btn" @click="nameSubmit">确定</view>
        </view>
         <image v-if="nameState" class="nameClose" @click="nameClick" src="/static/icons/nameClose_icon.png" mode=""></image>
	</view>
</template>

<script>
    import { userIndex, setting } from '@/apis/interfaces/user'
    import { uploads } from '@/apis/interfaces/uploading'
	export default {
		data() {
			return {
				userData : '',   //用户信息
                userLogin: '',   //登录状态
                avatar   : '',   //头像
                nickName : '',   //昵称
                nameState: false
			};
		},
        onShow() {
            if(this.$store.getters.getToken) {
                this.userLogin = true
                // 获取用户信息
                this.userInfo();
            }
        },
        
		methods:{
			// 退出登录
			outLogin(){
				this.$store.commit('setToken', '')
				this.$Router.replaceAll({name: 'Index'})
			},
            
            // 用户信息
            userInfo() {
                userIndex().then(res => {
                    this.userData = res
                    this.avatar = res.avatar
                    this.nickName = res.nickname
                }).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 上传图片
            updImg(type){
            	uni.chooseImage({
            		count	: 1,
            		success	: path => {
            			uploads([{
            				uri : path.tempFilePaths[0]
            			}]).then(res => {
                            this.avatar = res.url[0]
                            // 上传头像
                            this.settingInfo('avatar', res.path[0]);
            			}).catch(err => {
            				uni.showToast({
            					title: err.message,
            					icon : 'none'
            				})
            			})
            		}
            	})
            },
            
            // 修改昵称弹出
            nameClick() {
                this.nameState = !this.nameState
            },
            
            // 输入昵称
            nameInput(val) {
                this.nickName = val.detail.value
            },
            
            // 修改提交
            nameSubmit() {
                // 上传头像
                this.settingInfo('nickname', this.nickName);
            },
            
            // 上传用户信息
            settingInfo(key, value) {
                setting(key, {
                    value: value
                }).then(res => {
                    this.nameState = false
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon : 'none'
                	})
                })
            },
            
            // 退出登录
            outLogin() {
            	this.$store.commit('setToken', '')
            	this.$Router.push({name: 'Index'})
                this.userLogin = false
            }
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 80vh;
		background: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .2), white);
		overflow: hidden;
	}
	// 用户信息
	.user{
		position: relative;
		margin: $margin + 20 $margin $margin + 20;
		padding-left: 140rpx;
		min-height: 118rpx;
        .user-nickname {
            font-size: 36rpx;
            margin-bottom: 15rpx;
            display: flex;
            image {
                width: 28rpx;
                height: 28rpx;
                margin: 10rpx 15rpx;
            }
        }
        .user-tags {
            display: flex;
            color: #FFFFFF;
            font-size: 26rpx;
            .user-tags-label {
                background-color: $mian-color;
                border-radius: 30rpx;
                padding-left: 20rpx;
                line-height: 48rpx;
                margin-right: 20rpx;
                display: flex;
                image{
                    width: 44rpx;
                    height: 44rpx;
                    margin-top: 3rpx;
                }
            }
        }
		.user-cover{
			position: absolute;
			left: 0;
			top: 0;
			width: 118rpx;
			height: 118rpx;
			border-radius: 50%;
			border:solid 5rpx white;
			box-sizing: border-box;
		}
        .user-login {
            line-height: 118rpx;
            font-size: 36rpx;
        }
        .user-login-img {
            position: absolute !important;
            right: 0;
            top: 35rpx;
            width: 42rpx;
            height: 42rpx;
        }
	}
	// 订单
	.orders{
		background: white;
		margin: $margin;
		border-radius: $radius;
		.title{
			font-weight: bold;
			color: $text-color;
			line-height: 90rpx;
			padding: 0 $padding;
			display: flex;
			justify-content: space-between;
			text{
				font-size: $title-size-m;
				color: $text-gray;
				font-weight: normal;
			}
		}
		.orders-flex{
			display: flex;
			padding: ($padding/2) ($padding/2) $padding;
			.order-item{
				width: 33.33%;
				text-align: center;
				image{
					width: 48rpx;
					height: 48rpx;
				}
				.text-text{
					font-size: $title-size-sm;
					color: $text-color;
				}
			}
		}
	}
	// 操作按钮
	.tools{
		background: white;
		margin: $margin;
		border-radius: $radius;
		overflow: hidden;
		.tools-item{
			line-height: 90rpx;
			padding: 0 $padding;
			border-bottom: solid 1rpx $border-color;
			font-size: $title-size-lg;
			color: $text-color;
			display: flex;
			justify-content: space-between;
			&:last-child{
				border: none;
			}
		}
	}
    
    // 弹出
    .nameBack {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: .4);
        left: 0;
        top: 0;
        z-index: 99;
    }
    
    .namePop {
        position: fixed;
        left: 100rpx;
        right: 100rpx;
        top: 40%;
        background-color: #FFFFFF;
        z-index: 100;
        height: 100rpx;
        line-height: 100rpx;
        padding: 0 30rpx;
        border-radius: 100rpx;
        box-sizing: border-box;
        display: flex;
        .namePop-input {
            flex: 1;
            height: 100rpx;
            line-height: 100rpx;
            margin-right: 30rpx;
        }
        .namePop-btn {
            color: $mian-color;
            font-weight: 600;
        }
    }
    
    .nameClose {
        width: 54rpx;
        height: 54rpx;
        position: fixed;
        left: calc(50% - 27rpx);
        top: calc(40% + 140rpx);
        z-index: 101;
    }
</style>
