<template>
	<view class="container">
		<view class="head_box" :style="{'background-image': 'url('+ event_rul +'/static/images/userinfo-bg.png)'}">		
			<view class="info_box">
				<text @click="goback" class="top_left iconfont icon-icon_arrow_left"></text>
				<view class="left">
					<view class="l_left">
						<image style="width: 100%;height: 100%;" :src="info.headimg" mode=""></image>
					</view>
					<view class="l_right">
						<view class="p1">
							{{info.nickname||''}}
						</view>
						<view class="p2">
							ID: {{info.id||''}}
						</view>
						<view class="p3">
							简介: {{info.autograph||''}}
						</view>
					</view>
				</view>
				<view :style="{'background':info.is_member_follow?'#FFFFFF':'','color':info.is_member_follow?'#0a5d3b':'#FFF'}" class="right" @click="Follow" v-if="!myShow">
					{{info.is_member_follow?'已关注':'关注'}}
				</view>
				<view class="right1" @click="goto" data-url='/newOtherPages/editProfile/editProfile' v-if="myShow">
					<!-- {{info.is_member_follow?'已关注':'关注'}}b -->
					编辑资料
				</view>
			</view>
			<view class="count_box">
				<view class="item"  @click="goto" :data-url='!myShow?"":"/newOtherPages/myInterest/index"'>
					<view class="top">
						{{info.followCount||'0'}}
					</view>
					<view class="bottom">
						关注
					</view>
				</view>
				<view class="item" @click="goto" :data-url='!myShow?"":"/newOtherPages/myFans/myFans"'>
					<view class="top">
						{{info.fans_count||'0'}}
					</view>
					<view class="bottom">
						粉丝
					</view>
				</view>
				<view v-if="myShow" class="item" @tap="goto" data-url="/diary/comment/comment">
					<view class="top">
						{{info.comment_count||'0'}}
					</view>
					<view class="bottom">
						评论
					</view>
				</view>
				<view class="item">
					<view class="top">
						{{info.zan_count||'0'}}
					</view>
					<view class="bottom">
						获赞
					</view>
				</view>
			</view>

			<view class="nav_max">
				<view class="item" @click="recTypeFn(1)">
					<view class="txt" :class="{'actived': recType == 1}">笔记</view>
				</view>
				<view class="item" @click="recTypeFn(2)">
					<view class="txt"  :class="{'actived': recType == 2}">视频</view>
				</view>
				<view v-if="myShow" class="item" @click="recTypeFn(3)">
					<view class="txt"  :class="{'actived': recType == 3}">收藏</view>
				</view>
				<view v-if="myShow" class="item" @click="recTypeFn(4)">
					<view class="txt"  :class="{'actived': recType == 4}">赞过</view>
				</view>
			</view>
		</view>
		<view class="content" style="padding: 20rpx;"  v-if="recType == 1 || recType == 2">
			<view class="min_nav" v-if="myShow">
				<view class="item" @click="navNoteTab('1')" :class="{'itemz':navNoteType == '1'}">
					已发布
				</view>
				<view class="item" @click="navNoteTab('0')" :class="{'itemz':navNoteType == '0'}">
					待审核
				</view>
				<view class="item" @click="navNoteTab('2')" :class="{'itemz':navNoteType == '2'}">
					被驳回
				</view>
				<view class="item" @click="navNoteTab('3')" :class="{'itemz':navNoteType == '3'}">
					草稿箱
				</view>
			</view>
			
			<diary-falls-list @listZanFn='listZanFn' :datalist='datalist' @delDrafts="delDrafts" :navNoteType="navNoteType" v-if="datalist && datalist.length>0" :navType="recType == 2 ? 'video' : 'note'">
			</diary-falls-list>
			<nomore text="没有更多内容了" v-if="nomore"></nomore>
			<nodata text="没有查找到相关内容" v-if="nodata && !myShow"></nodata>
			<nodata text="一键秀出你的品味健康生活" v-if="nodata && myShow"></nodata>
			<view class="btn" v-if="nodata && myShow && recType == 1" @click="goto" :data-url="'/diary/issue/issue?type=note'" >
				去发布
			</view>
			<view class="btn" v-if="nodata && myShow && recType == 2" @click="goto" :data-url="'/diary/issue/issue?type=video'" >
				去发布
			</view>
		</view>
		<view class="content" v-if="recType == 3" style="padding: 20rpx;">
			<view class="min_nav">
				<view class="item" @click="navTab('shop')" :class="{'itemz':navType == 'shop'}">
					商品
				</view>
				<view class="item" @click="navTab('note')" :class="{'itemz':navType == 'note'}">
					笔记
				</view>
				<view class="item" @click="navTab('video')" :class="{'itemz':navType == 'video'}">
					视频
				</view>

			</view>
			<diary-falls-list @listZanFn='listZanFn' :datalist='datalist' v-if="datalist && datalist.length>0&&navType != 'shop'" @shopdel="delShop" :navType="navType" :recType="recType">
			</diary-falls-list>
			<dp-product-item  v-if="navType == 'shop'" @shopdel="delShop" :data="datalist" types='cart' navType="shop" :menuindex="-1"></dp-product-item>
	
			<nomore text="没有更多内容了" v-if="nomore"></nomore>
			<nodata :text="navType == 'shop'?'还未收藏商品':navType=='video'?'还未收藏视频':'还未收藏笔记'" v-if="nodata"></nodata>
			<view class="btn" v-if="nodata && myShow &&navType == 'shop'" @click="goto" data-url='/pages/shop/classify' >
				去挑选
			</view>
			<view class="btn" v-if="nodata && myShow&&navType != 'shop'" @click="goto" data-url='/diary/index/index' >
				去看看
			</view>
		</view>
		<view class="content" v-if="recType == 4" style="padding: 24rpx;">
			<view class="min_nav">
				<view class="item" @click="navTab('note')" :class="{'itemz':navType == 'note'}">
					笔记
				</view>
				<view class="item" @click="navTab('video')" :class="{'itemz':navType == 'video'}">
					视频
				</view>
			<!-- 	<view class="item" @click="navTab('shop')" :class="{'itemz':navType == 'shop'}">
					商品·15
				</view> -->
			</view>
			
			<diary-falls-list @listZanFn='listZanFn' :datalist='datalist' v-if="datalist && datalist.length>0" :navType="navType" :recType="recType">
			</diary-falls-list>
			
			
			
			
			<nomore text="没有更多内容了" v-if="nomore"></nomore>
			<!-- <nodata text="没有查找到相关内容" v-if="nodata"></nodata> -->
			<nodata :text="navType == 'shop'?'还未赞过商品':navType=='video'?'还未赞过视频':'还未赞过笔记'" v-if="nodata"></nodata>
			<view class="btn" v-if="nodata && myShow " @click="goto" data-url='/diary/index/index' >
				去看看
			</view>
	
			
		</view>
		<view class="del-mdl" v-show="delModle" @touchmove.stop.prevent="() => {return true}">
			<view class="del-msk"></view>
			<view class="del-cont-bx bg-color-white flex flex-colum">
				<view class="del-tx flex flex1 al-item-center j-center">{{delModleTex}}</view>
				<view class="del-btn flex j-between">
					<button class="btn-l" @tap.stop="canlDel">取消</button>
					<button class="btn-r" @tap.stop="confirmDel">确定</button>
				</view>
			</view>
		</view>
		<!-- 悬浮按钮 -->
		<drag-button></drag-button>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				
				id: '',
				myShow: false,
				
				navNoteType: '1',
				info: {},
				navType:'note',
				recType: 1,
				pagenum: 1,
				loading: false,
				isload: false,
				nomore: false,
				nodata: false,
				datalist: [],
				
				event_rul: app.globalData.event_url,
				
				delModle: false,
				delModleTex: '',
				delModleId: null,
				delModleType: '',
			}
		},
		onLoad(opt) {
			this.id = opt.id ||app.globalData.mid;
			this.recType = opt.type ||1;
			if(this.recType == 3) {
				this.navType = 'shop'
			}
			this.getRecList()
			this.getInfo()
		},
		onShow() {
			if (app.globalData.mid == this.id) {
				this.myShow = true;
			}
			this.pagenum = 1
			this.datalist = []
			this.getRecList()
		},
		methods: {
			delDrafts(e) {
				this.datalist.splice(e,1)
				if(this.datalist.length == 0) {
					this.myShow = true
					this.nodata =  true
				}
			},
			navTab(e){
				this.datalist= []
				this.navType = e;
				this.pagenum =1;
				this.getRecList();
			},
			navNoteTab(e){
				this.datalist= []
				this.navNoteType = e;
				this.pagenum =1;
				this.getRecList()
			},
			listZanFn(e) {
				this.datalist[e.index].iszan = e.show;
				if (this.datalist[e.index].binfo) {
					this.datalist[e.index].zan_num = e.num;
				} else {
					this.datalist[e.index].zan = e.num;
				}
			},
			goback() {
				uni.navigateBack(1)
			},
			Follow() {
				app.post('ApiMy/addFollow', {
					follow_id: this.info.id,
					type: 'user'
				}, (res) => {
					// this.info = res.data
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.msg == '已关注') {
						this.info.is_member_follow = 1
						this.info.fans_count++

					} else {
						this.info.is_member_follow = 0
						this.info.fans_count--
					}
				})
			},
			recTypeFn(e) {
				this.recType = e;
				this.pagenum = 1;
				this.datalist = [];
				if(e == 3) {
					this.navType='shop';
				}else {
					this.navType='note';
				}
				
				this.getRecList();
			},
			getInfo() {
				
				
				app.post('ApiZhiwei/otherUserinfo', {
					a_uid: app.globalData.mid,
					b_uid: this.id
				}, (res) => {
					this.info = res.data
				})
			},
			getRecList() {
				let that = this;
				
				var page = that.pagenum;
				that.loading = true;
				that.nomore = false;
				that.nodata = false;
				let url = 'ApiZhiwei/appNotVideoListOther';
				let datas = {
					page: page,
					type: this.recType,
					mid: this.id,
					status:this.navNoteType,
				}
				if(this.recType == 3){
					url  = 'ApiZhiwei/appNotVideoListFavorite'
					datas.type = this.navType
				} else if(this.recType == 4){
					url='ApiZhiwei/appNotVideoListZan'
					datas.type = this.navType
				}
				app.get(url,datas, function(res) {
					that.loading = false;
					var data = res.data;
					if (page == 1) {
						that.datalist = data;
						// that.datalist.push({'title':1})
						if (data.length == 0) {
							that.nodata = true;
						}
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							var datalist = that.datalist;
							var newdata = datalist.concat(data);
							that.datalist = newdata;
						}
					}
					that.loaded();
				});
			},
			
			// 移除商品信息
			delShop(e) {
				this.delModle = e.show
				// this.delModleTex = '是否从收藏列表中移除该商品？' 
				this.delModleId = e.id
				this.delModleType = e.deltype
				this.delModleTex =  e.deltype == 'shop' ? '是否从收藏列表中移除该商品？': e.deltype == 'note' ? '是否从收藏列表中移除该笔记？':'是否从收藏列表中移除该视频？'
	
			},
			
			//收藏操作
			addfavorite: function() {
				var that = this;
				app.post('ApiShop/addfavorite', {
					proid: that.delModleId,
					type: that.delModleType
				}, function(data) {
				
				});
			},
			canlDel() {
				this.delModle = false
			},
			confirmDel() {
				if(this.recType == 4) {
					if(this.delModleType == 'note' ) {
						app.post("ApiLuntan/zan", {
							id: this.delModleId
						}, res => {
							
						});
					}else {
						app.post('ApiShortvideo/zan', {
							id: this.delModleId,
						}, res => {
							
						})
					}
				}else {
					this.addfavorite()
				}
				
				this.pagenum = 1;
				this.datalist = [];
				this.getRecList();
				this.delModle = false
			}
			

		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.getRecList()
			}
		},

	}
</script>

<style lang="scss">
.container {
	background: #F5F5F5;
	min-height: 100vh;
}
	.btn{
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 60rpx;
	    margin: 0 auto;
		margin-top: -50rpx;
		width: 158rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 60rpx;
		background: linear-gradient(to right,#00AE68 0%,#096742 100%);
	}
	.min_nav{
		display: flex;
		margin-bottom: 24rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		.item{
			margin-right: 40rpx;
			color: #999;
		}
		.itemz{
			color: #0A5D3B;
			font-weight: bold;
		}
	}

	.nav_max {
		display: flex;
		align-items: flex-start;
		background-color: #fff;
		padding: 0 100rpx;
		border-radius: 12rpx 12rpx 0 0;
		position: absolute;
		bottom: 0;
		width: 100%;

		.item {
			flex: 1;
			text-align: center;
			font-size: 30rpx;
			padding: 0 20rpx;
			color: #999999;

			.txt {
				padding: 24rpx 0;
				&.actived {
					color: #333333;
					font-weight: bold;
					position: relative;
					&::after {
						content: "";
						position: absolute;
						left: 50%;
						bottom: 12rpx;
						width: 44rpx;
						height: 6rpx;
						border-radius: 6rpx;
						transform: translateX(-50%);
						background: #0A5D3B;
					}
				}
			}
		}
	}

	.head_box {


		.count_box {
			margin-top: 44rpx;
			display: flex;
			justify-content: space-around;
			color: #FFFFFF;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.top {
					font-weight: bold;
					margin-bottom: 4rpx;
					font-size: 32rpx;
					line-height: 44rpx;
				}

				.bottom {
					font-size: 24rpx;
					line-height: 34rpx;
				}
			}
		}

		width: 750rpx;
		background-size: 100%;
		position: relative;
		padding: 32rpx 0 114rpx;

		.info_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx 0 12rpx;
			.top_left {
				font-size: 40rpx;
				color: #FFFFFF;
				flex-shrink: 0;
				margin-right: 10rpx;
			}

			.left {
				display: flex;
				flex: 1;
				align-items: center;
				overflow: hidden;
				
				.l_left {
					width: 128rpx;
					height: 128rpx;
					border-radius: 150rpx;
					overflow: hidden;
					margin-right: 20rpx;
				}

				.l_right {
					flex: 1;
					overflow: hidden;
					font-size: 22rrpx;
					color: #FFFFFF;
					line-height: 32rpx;
					
					.p1 {
						font-size: 40rpx;
						line-height: 56rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.p2 {
						margin-bottom: 8rpx;
					}
					.p3 {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}

			.right,.right1 {
				width: 132rpx;
				height: 54rpx;
				border: 1rpx solid #FFFFFF;
				color: #FFFFFF;
				border-radius: 54rpx;
				text-align: center;
				font-size: 28rpx;
				line-height: 52rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
			}

			.right1 {
				min-width: 154rpx;
			}
		}
	}
	
	.del-mdl {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 555;
		.del-msk {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .6);
		}
		.del-cont-bx {
			width: 600rpx;
			height: 296rpx;
			
			border-radius: 12rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 556;
			.del-tx {
				padding: 20rpx 40rpx;
			}
			
			.del-btn {
				margin: 0 50rpx 44rpx;
				
				button {margin: 0;border-radius: 100rpx;}
				.btn-l,.btn-r {
					width: 236rpx;
					height: 80rpx;
					line-height: 80rpx;
				}
				.btn-l {
					border: 2rpx solid #E8E8E8;
					color: #666;
				}
				.btn-r {
					color: #fff;
					background-image: linear-gradient(to right, #00AE68 , #096742 );
				}
			}
		}
	}
</style>
