<template>
	<view class="container">
		<view class="list">
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					头像
				</view>
				<view class="r" @click="upload">
					<image :src="$config.imageBaseUrl + userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
					<image src="@/static/images/mine/up.png" mode="aspectFill" v-else></image>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					昵称<text>*</text>
				</view>
				<view class="r">
					<input type="text" v-model="userInfo.nickName" placeholder="请输入">
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					性别<text>*</text>
				</view>
				<view class="r u-flex u-col-center u-row-right">
					<view class="i  u-flex u-col-center" @click="userInfo.sex=1">
						<image src="@/static/images/mine/c2.png" mode="aspectFill" v-if="userInfo.sex==1"></image>
						<image src="@/static/images/mine/c1.png" mode="aspectFill" v-else></image>
						<text :class="{on:userInfo.sex==1}">男</text>

					</view>
					<view class="i  u-flex u-col-center" @click="userInfo.sex=2">
						<image src="@/static/images/mine/c2.png" mode="aspectFill" v-if="userInfo.sex==2"></image>
						<image src="@/static/images/mine/c1.png" mode="aspectFill" v-else></image>
						<text :class="{on:userInfo.sex==2}">女</text>
					</view>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					手机号<text>*</text>
				</view>
				<view class="r">
					<input type="number" v-model="userInfo.phonenumber" placeholder="请输入">
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					邮箱<text>*</text>
				</view>
				<view class="r">
					<input type="text" v-model="userInfo.email" placeholder="请输入">
				</view>
			</view>

		</view>
		<view class="f-btn" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
	import {userInformation} from '@/api/mine/index.js'
	import {uploadAvatar, getUserProfile} from '@/api/system/user.js'
	export default {
		data() {
			return {
				http:this.$imgUrl,
				userId: "",
				userInfo: {
					userName: '',
					phonenumber: "",
					type: '',
					nickName: "",
					avatar: '',
					sex: "",
					email:"",
				},
			}
		},
		onLoad() {
			let user = uni.getStorageSync('user')
			this.userId = user.userId
			if (!user.userId) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				return
			}
			this.getUserInfo()
		},
		methods: {
			upload(){
				 uni.chooseImage({
					  count: 1, // 限制选择文件的数量，这里只选择1个文件
					  sizeType: ['compressed'], // 限制选择文件的类型，这里只选择压缩过的文件
					  success: (res) => {
              uploadAvatar({
                "filePath":res.tempFilePaths[0]
              }).then(res => {
				  console.log('res222',res)
                this.userInfo.avatar = res.imgUrl
              })
					  },
					  fail: (err) => {
              console.log(err)
					  }
				})
			
			},
			submit(){
				if(!this.userInfo.nickName){
					uni.showToast({
						title: '昵称不能为空',
						icon: "none",
						duration: 1500
					});
					return
				}
				if(!this.userInfo.sex){
					uni.showToast({
						title: '请选择性别',
						icon: "none",
						duration: 1500
					});
					return
				}
				if(!this.userInfo.phonenumber){
					uni.showToast({
						title: '手机号不能为空',
						icon: "none",
						duration: 1500
					});
					return
				}
				if(!this.userInfo.email){
					uni.showToast({
						title: '邮箱不能为空',
						icon: "none",
						duration: 1500
					});
					return
				}
				userInformation({
					userId:this.userId,
					email:this.userInfo.email,
					phonenumber:this.userInfo.phonenumber,
					nickName:this.userInfo.nickName,
					avatar:this.userInfo.avatar,
					sex:this.userInfo.sex,
				}).then(res => {
					if(res.code == 200){
						uni.showToast({
							title: '修改成功',
							icon: "none",
							duration: 1500
						});
						
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						}, 1500)
					}else{
						uni.showToast({
							title:res.msg,
							icon: "none",
							duration: 1500
						});
					}
					
				})
			},
			getUserInfo() {
        getUserProfile().then(res => {
          this.userInfo = res.data
        })
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color: #4892FD;

	.container {
		.f-btn {
			position: fixed;
			bottom: 60rpx;
			left: 30rpx;
			right: 30rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background-color: $color;
			color: #fff;
			font-size: 28rpx;
			border-radius: 20rpx;
		}

		padding:30rpx;

		.list {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 30rpx;
			width:100%;
			.item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: 0;
				}

				.l {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					line-height: 60rpx;
					height: 60rpx;
					width: 200rpx;

					text {
						color: #c33;
						margin-left: 6rpx;
					}
				}

				.r {
					flex: 1;
					width: 1rpx;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: right;

					input {
						width: 100%;
						height: 100%;
						font-size: 28rpx;
						color: #333333;
					}

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.i {
						margin-left: 30rpx;

						image {
							width: 35rpx;
							height: 35rpx;
						}

						text {
							font-size: 24rpx;
							color: #666;
							margin-left: 10rpx;
						}

						.on {
							color: $color;
						}
					}

				}
			}
		}

	}
</style>


<!-- <template>
  <view class="container">
    <uni-list>
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" title="昵称" :rightText="user.nickName" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'phone-filled' }" title="手机号码"
        :rightText="user.phonenumber" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'email-filled' }" title="邮箱" :rightText="user.email" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="岗位" :rightText="postGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'staff-filled' }" title="角色" :rightText="roleGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'calendar-filled' }" title="创建日期"
        :rightText="user.createTime" />
    </uni-list>
  </view>
</template>

<script>
import { getUserProfile } from "@/api/system/user"

export default {
  data() {
    return {
      user: {},
      roleGroup: "",
      postGroup: ""
    }
  },
  onLoad() {
    this.getUser()
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data
        this.roleGroup = response.roleGroup
        this.postGroup = response.postGroup
      })
    }
  },
  onUnload() {
    const that = this
    return that.$listenOB.goBack()
  },
}
</script>

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

.uni-list {
  width: 100vw;
}
</style> -->
