<template>
	<view class="page">
		<u-navbar :is-back="false"  title="我的" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
			height='46'	id="navbar">
		</u-navbar>
		<view class="info">
			<view class="top" style="display: flex;justify-content: space-between;">
				<view class="" style="display: flex;align-items: center;">
					<view class="toux">
						<button style="width: 100rpx;height: 100rpx;position: relative;" type="primary reverse" open-type="chooseAvatar" @chooseavatar="getimage">
							<image style="width: 92rpx;height: 92rpx;position: absolute;top: 0;left: 0;z-index: 99;" :src="user.avatar" mode=""></image>
						</button>
					</view>
					<view class="xx">
						<view class="name" @click="editName">
							{{user.nickName == null ? '--' : user.nickName}} <image src="https://api.ccttiot.com/Z6ejpkZQ4OC81a3b6bc24fd747f11fa76d676e1dfba1.png" mode=""></image>
						</view>
						<view class="tel">
							{{user.phonenumber == null ? '--' : user.phonenumber}}
						</view>
					</view>
				</view>
				<view class="" v-if="logoflag" @click="btndl" style="border: 1px solid #1EC28B;border-radius: 50rpx;padding:10rpx 20rpx;color: #1EC28B;box-sizing: border-box;margin-right: 30rpx;">
					立即登录
				</view>
			</view>
			<view class="fensilist">
				<view class="">
					<view class="number">
						{{user.focusCount == null ? 0 : user.focusCount}}
					</view>
					<view class="wz">
						关注
					</view>
				</view>
				<view class="">
					<view class="number">
						{{user.fansCount == null ? 0 : user.fansCount}}
					</view>
					<view class="wz">
						粉丝
					</view>
				</view>
				<view class="" @click="btnpage(1)">
					<view class="number">
						{{user.collectCount == null ? 0 : user.collectCount}}
					</view>
					<view class="wz">
						收藏
					</view>
				</view>
			</view>
			<view class="jilu" v-if="ver">
				<view class="jilult">
					<view class="dawz">
						发布动态
					</view>
					<view class="xiaowz">
						分享你的专属动态记录
					</view>
				</view>
				<view class="jilurt" @click="btnfadt">
					立即发布
				</view>
			</view>
			<view class="gongneng">
				<image src="https://api.ccttiot.com/smartmeter/img/static/ulbpJ1XVBcsaEJ1D1R0h" mode="" @click="btnkefu"></image>
				<image src="https://api.ccttiot.com/smartmeter/img/static/uNu8UOz7JS4WcUe08a71" mode="" @click="btnwenti"></image>
				<image src="https://api.ccttiot.com/smartmeter/img/static/ud4y0UeC8rxdeIEkeypk" mode="" @click="btntousu"></image>
			</view>
		</view>
		<view class="boxlist">
			<view class="" style="width: 100%;text-align: center;font-size: 36rpx;font-weight: 600;margin-bottom: 30rpx;">
				我的动态
			</view>
			<view v-if="adlist.length > 0" class="boxitem" v-for="(item,index) in adlist" :key="index" @click="btnitem(item)">
				<view class="img">
					<video v-if="isVideo(item.picture.split(',')[0])" :src="item.picture.split(',')[0]" :controls="false"></video>
					<image v-else :src="item.picture.split(',')[0]" mode="aspectFill" />
				</view>
				<view class="wz">
					{{item.content.length > 10 ? item.content.slice(0,10) + '...' : item.content}}
				</view>
			</view>
			<view class="" style="width: 400rpx;height: 400rpx;margin: auto;" v-if="adlist.length == 0">
				<image style="width: 400rpx;height: 400rpx;filter: hue-rotate(450deg)" src="https://api.ccttiot.com/n0ySWwewVU674d243df448743e3becae030d6474eabd.png" mode=""></image>
			</view>
		</view>	
        <tab-bar :indexs='4'></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#EAFFFE",
				},
				user:{},
				token:'',
				imglist:'',
				pagenum:1,
				pageSize:20,
				total:'',
				adlist:[],
				logoflag:false,
				ver:false
			}
		},
		onShow() {
			this.getyinc()
			this.pagenum = 1;
			this.hasMore = true;
			this.getinfo();
			this.getqiniuyun();
		},
		// 小程序端加载更多的生命周期
		onReachBottom() {
			console.log(11);
			if (!this.loading && this.hasMore) {
				this.pagenum++;
				this.getdtlist();
			}
		},
		methods: {
			getyinc(){
				this.$u.get(`/system/config/configKey/app.version`).then(res =>{
					if(res.code == 200){
						if(res.data == this.$store.state.ver){
							this.ver = true
						}else{
							this.ver = false
						}
					}
				})
			},
			// 判断获取的数据是否为视频（通过后缀名）
			isVideo(url) {
				if (!url || typeof url !== 'string') return false
				const lower = url.split('?')[0].toLowerCase()
				return ['.mp4','.mov','.m4v','.mkv','.avi','.wmv','.flv','.webm','.3gp'].some(ext => lower.endsWith(ext))
			},
			// 点击跳转去登录
			btndl(){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},
            // 点击昵称修改名称
            editName(){
            	const currentName = this.user.nickName || ''
            	uni.showModal({
            		title: '修改昵称',
            		editable: true,
            		placeholderText: '请输入昵称',
            		content: currentName,
            		confirmText: '保存',
            		success: (res) => {
            			if (res.confirm) {
							const newName = (res.content || '').trim()
							if (newName.length > 10) {
							    uni.showToast({
							    	title: '名称已超过限制',
							    	icon: 'none',
							    	duration: 3000
							    })
							}else{
								if (!newName || newName === currentName) return
								this.$u.put(`/app/user/basicInfo`, { nickName: newName }).then((r) => {
									if (r.code === 200) {
										this.getinfo()
										uni.showToast({ title: '已更新', icon: 'success',duration:3000})
									}else if(res.code == 401){
										uni.reLaunch({
											url:'/pages/login/login'
										})
									}else{
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 3000
										})
									}
								})
							}
            			}
            		}
            	})
            },
			// 点击跳转到常见问题
			btnwenti(){
				uni.navigateTo({
					url:'/page_user/caozuo/wenti'
				})
			},
			// 点击跳转到投诉建议
			btntousu(){
				if(this.logoflag == true){
					uni.reLaunch({
						url:'/pages/login/login'
					})
				}else{
					uni.navigateTo({
						url:'/page_user/caozuo/tousu'
					})
				}
			},
			// 点击跳转到客服列表
			btnkefu(){
				uni.navigateTo({
					url:'/page_user/caozuo/kefu'
				})
			},
			// 点击跳转到发布动态
			btnfadt(){
				if(this.logoflag == true){
					uni.reLaunch({
						url:'/pages/login/login'
					})
				}else{
					uni.navigateTo({
						url:'/page_user/caozuo/fadongtai'
					})
				}
			},
			// 获取七牛云上传token
			getqiniuyun(){
				this.$u.get("/common/qiniuToken").then((res) => {
					if (res.code == 200) {
						this.token = res.data
					}
				})
			},
			// 点击上传头像
			getimage(e){
				console.log(e);
				let that = this
                wx.uploadFile({
                	url: 'https://up-z2.qiniup.com',
                	name: 'file',
                	filePath: e.detail.avatarUrl,
                	formData: {
                		token: that.token, //后端返回的token
                	},
                	success: function(res) {
                		let str = JSON.parse(res.data)
                		that.imglist = 'https://api.ccttiot.com/' + str.key
                		console.log(that.imglist);
						let data = {
							avatar:that.imglist
						}
						that.$u.put(`/app/user/basicInfo`,data).then(res =>{
							 if(res.code == 200){
							     that.getinfo()
							 }
						})
                	}
                })
			},
             // 点击进行页面跳转
			 btnpage(num){
				 if(num == 1){ //跳转我的收藏
					 if(this.logoflag == true){
					 	uni.reLaunch({
					 		url:'/pages/login/login'
					 	})
					 }else{
					 	uni.navigateTo({
					 		url:'/page_user/muyemian/shoucang?userId=' + this.user.userId
					 	})
					 }
				 }
			 },
			 // 请求我的个人信息
			 getinfo(){
				 this.$u.get(`/getInfo`).then(res =>{
					 if(res.code == 200){
						 this.user = res.user
						 this.getdtlist()
					 }else if(res.code == 401){
						 this.logoflag = true
					 }
				 })
			 },
			 handqixing(){
			 	console.log(1)
			 },
			 btnitem(item){
				uni.navigateTo({
					url:'/page_fenbao/guangchang/dongtaixq?id=' + item.id
				}) 
			 },
			 // 请求个人动态列表
			 getdtlist(){
			 	this.loading = true
				this.$u.get(`/app/feed/myFeed?pageNum=${this.pagenum}&pageSize=${this.pageSize}`).then(res => {
					if (res.code == 200) {
						this.total = res.total
						if (this.pagenum == 1) {
							this.adlist = res.rows
						} else {
							this.adlist = this.adlist.concat(res.rows)
						}
						console.log(this.adlist,'0000000')
						this.hasMore = res.rows && res.rows.length === this.pageSize
					} else {
						this.hasMore = false
					}
					this.loading = false
				}).catch(() => {
					this.loading = false
					this.hasMore = false
				})
			 },
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EAFFFE;
	}
	::v-deep .u-title{
		padding-bottom: 22rpx !important;
	}
	.boxlist{
		width: 750rpx;
		min-height: 46vh;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
		border-radius: 30rpx 30rpx 0 0;
		margin-top: 640rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 36rpx 34rpx;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 200rpx;
		.boxitem{
			.wz{
				width: 334rpx;
			}
			image{
				width: 334rpx;
				height: 334rpx;
				border-radius: 10rpx;
			}
			video{
				width: 334rpx;
				height: 334rpx;
				border-radius: 10rpx;
			}
			width: 334rpx;
			height: 400rpx;
		}
	}
    .info{
		margin-top: 32rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		.gongneng{
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			image{
				width: 230rpx;
				height: 140rpx;
			}
		}
		.jilu{
			width: 682rpx;
			height: 160rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		    display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 34rpx;
			margin: auto;
			margin-top: 28rpx;
			.jilurt{
				width: 192rpx;
				height: 58rpx;
				background: #1EC28B;
				border-radius: 37rpx 37rpx 37rpx 37rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 58rpx;
			}
			.jilult{
				.dawz{
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
				}
				.xiaowz{
					font-size: 28rpx;
					color: #808080;
					margin-top: 14rpx;
				}
			}
		}
		.fensilist{
			display: flex;
			align-items: center;
			margin-top: 28rpx;
			justify-content: space-between;
			padding-right: 150rpx;
			padding-left: 150rpx;
			view{
				text-align: center;
				.number{
					font-weight: 500;
					font-size: 52rpx;
					color: #3D3D3D;
				}
				.wz{
					font-size: 32rpx;
					color: #606060;
					margin-top: 8rpx;
				}
			}
		}
		.top{
			display: flex;
			align-items: center;
			padding-left: 62rpx;
			.toux{
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				margin-right: 36rpx;
				overflow: hidden;
			}
			.xx{
				.name{
					display: flex;
					align-items: center;
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
					image{
						width: 46rpx;
						height: 46rpx;
						margin-left: 10rpx;
					}
				}
				.tel{
					font-size: 28rpx;
					color: #3D3D3D;
					margin-top: 8rpx;
				}
			}
		}
	}
	.nodata,
	.nomore {
		width: 100%;
		text-align: center;
		color: #888;
		font-size: 28rpx;
		padding: 48rpx 0 16rpx 0;
	}
	.loading {
		width: 100%;
		text-align: center;
		color: #EE3D6C;
		font-size: 28rpx;
		padding: 24rpx 0 8rpx 0;
	}
	.publish-btn {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1000;
		bottom: 60rpx;
		width: 90vw;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 44rpx;
		background-image: linear-gradient(90deg, #131313 0%, #EE3D6C 100%);
		color: #fff;
		font-weight: 700;
		font-size: 34rpx;
		box-shadow: 0 8rpx 30rpx rgba(238,61,108,.15);
	}
</style>