<template>
	<view class="page">
		<u-navbar :is-back="false" title="我的" :border-bottom="false" :background="bgc" title-color='#3D3D3D '
			title-size='36' height='45' id="navbar">
		</u-navbar>
		<view class="sblr" @click="btnluru" v-if="deviceAdmin">
			设备录入
		</view>
		<view class="atv">
			<button 
			   v-if="imglist == ''" style="border: 0;outline: none;width: 220rpx;padding-left: 0rpx;height: 220rpx;border-radius: 50%;background: #D8D8D8;"
				type="primary reverse" open-type="chooseAvatar" @chooseavatar="getImage">
			</button>
			<button
				v-else style="border: 0;outline: none;width: 220rpx;padding-left: 0rpx;height: 220rpx;border-radius: 50%;"
				type="primary reverse" open-type="chooseAvatar" @chooseavatar="getImage">
				<image :src="imglist" mode=""></image>
			</button>
		</view>
		<view class="change">
			<!-- 身份切换 -->
		</view>
		<!-- 认养 --><!-- 认养 --><!-- 认养 --><!-- 认养 --><!-- 认养 -->
		<!-- <view class="btn_li" @click="btnpage(4)">
			收货地址 <view class="iconfont icon-xiangyou1"></view>
		</view>
		<view class="btn_li" @click="btnpage(5)">
			历史物流 <view class="iconfont icon-xiangyou1"></view>
		</view> -->
		<!-- 认养 --><!-- 认养 --><!-- 认养 --><!-- 认养 --><!-- 认养 -->
		<view class="btn_li" @click="btnpage(1)">
			隐私政策 <view class="iconfont icon-xiangyou1"></view>
		</view>
		<view class="btn_li" @click="btnpage(2)">
			用户协议 <view class="iconfont icon-xiangyou1"></view>
		</view>
		<view class="btn_li" @click="btnpage(3)">
			关于我们 <view class="iconfont icon-xiangyou1"></view>
		</view>
		<view class="btn_li" @click="btnsz">
			设置 <view class="iconfont icon-xiangyou1"></view>
		</view>
		<!-- <input type="text" style="margin-left: 50rpx;border: 1px solid #ccc;width: 500rpx;margin-top: 30rpx;" placeholder="aaaaa" :placeholder-style="{}"/> -->
		<tab-bar :indexs='4' style=""></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " #F4FAF8",
				},
				title: "我的",
                userobj:{},
				imglist:'',
				token:'',
				deviceAdmin:false
			}
		},
		onLoad() {
			
		},
		onShow() {
           this.getyh()
		},
		methods: {
			// 点击跳转到录入设备页面
			btnluru(){
				uni.reLaunch({
					url:'/page_user/luru'
				})
			},
			// 跳转到隐私政策，用户协议等页面
			btnpage(num){
				if(num == 1){
					uni.navigateTo({
						url:'/page_user/about?tit=' + '隐私政策' + '&type=' + 1
					})
				}else if(num == 2){
					uni.navigateTo({
						url:'/page_user/about?tit=' + '用户协议' + '&type=' + 2
					})
				}else if(num == 3){
					uni.navigateTo({
						url:'/page_user/about?tit=' + '关于我们' + '&type=' + 3
					})
				}
			},
			// 请求用户个人信息
			getyh() {
				this.$u.get(`app/user/userInfo`).then(res => {
					if (res.code == 200) {
						this.userobj = res.data
						this.imglist = res.data.avatar
						this.deviceAdmin = res.data.deviceAdmin
					}
				})
			},
			// 跳转到设置页面
			btnsz(){
				uni.navigateTo({
					url:'/page_user/user_set'
				})
			},
			// 点击进行更换头像
			getImage(e) {
				this.getQiniuToken(e)
			},
			// 更换头像功能
			getQiniuToken(e) {
				let _this = this
				this.$u.get("/common/qiniu/uploadInfo").then((res) => {
					if (res.code == 200) {
						_this.token = res.token
						let math = 'static/' + _this.$u.guid(20)
						const tempFilePaths = e.detail.avatarUrl
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths,
							formData: {
								token: _this.token,
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								let str = JSON.parse(res.data)
								console.log(str.key)
								let img = 'https://api.ccttiot.com/' + str.key
								_this.imglist = img
								let data = {
									avatar:_this.imglist
								}
								_this.$u.put("/app/user",data).then((res) => {
									if (res.code == 200) {
										uni.showToast({
											title: '头像更新成功',
											icon: 'success',
											duration:1000
										})
									}else{
										uni.showToast({
											title: res.msg,
											icon: 'success',
											duration:1000
										})
									}
								})
							}
						})
					}else if(res.code == 401){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})
			},


		}
	}
</script>

<style lang="scss">
	.sblr{
		width: 180rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		position: fixed;
		top: 200rpx;
		right: 20px;
		background-color: #ce9e10;
	}
	page {
		background-color: #FAFDFD;
	}     
    .input-placeholder{
		color: red;
	}
	.page {
		width: 750rpx;
		.atv {
			width: 206rpx;
			height: 206rpx;
			background: #D8D8D8;
			border-radius: 50%;
			margin: 100rpx auto 0;
			image {
				width: 222rpx;
				height: 222rpx;
				border-radius: 50%;
			}
		}
		.change {
			width: 100%;
			text-align: center;
			margin-top: 38rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			height: 50rpx;
		}
		.btn_li {
			margin: 38rpx auto 0;
			padding: 22rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			width: 658rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #3D3D3D;
		}
	}
</style>