<template>
	<view class="my-interest">
		<view class="my-interest-h-title flex j-evenly bg-color-white">
			<block v-for="(item, idx) in heartitleList" :key="idx">
				<view class="my-interest-h-title-tx "  @click="selectTitle(idx)">
					<text>{{item }}</text>
					<view v-if="sleIndex == idx"  class="actives" :style="{'background-color': t('color1')}"></view>
				</view>
			</block>
			
		</view>
		<view class="my-interest-user" v-if="sleIndex == 0">
			<block v-for="(item, idx) in userList" :key="item.id" >
				<view class="topic-box flex j-between al-item-center" >
					<view class="my-interest-conton flex al-item-center text-overflow-tx" @tap="goto" :data-url="'/diary/info/info?id=' + item.id">
						<image v-if="item.headimg" class="conton-img border-rius-r" :src="item.headimg" mode=""></image>
						<text v-else style="font-size: 90rpx; color: #ccc;" class="iconfont icon-tupianjiazaishibai"></text>
						<view class="conton-tex overflow-hd flex flex-colum j-between flex1 ">
							<view class="font-w text-overflow-tx conton-tex-tlt">{{item.nickname}}</view>
							<text class="color-gray text-overflow-tx fs12">笔记·{{item.luntan_count}} | 粉丝·{{item.fans_count}}</text>	
						</view>
					</view>
					<text v-if="item.is_member_follow == 0" class="concern-btn color-white border-rius-5" :style="{'background-color': t('color1')}" @click="attention(item.id, idx, 'user')">关注</text>
					<view v-else  class="concern-btn  border-rius-5" :style="{'border-color':t('color1'), 'color':t('color1')}" @click="attention(item.id, idx, 'user')">
						已关注
					</view>
				</view>
			</block>
		</view>
		<view class="my-interest-topic overflow-hd" v-if="sleIndex == 1">
			<block v-for="(item, idx) in topicList" :key="item.id">
				<view class="topic-box flex j-between al-item-center" >
					<view class="my-interest-contx flex al-item-center" @click="goto" :data-url="'/diary/topic/topic?id='+item.id">
						<text class="tip-c-l-img-t color-white" :style="{'background-color': t('color1')}">#</text>
						<view class="conton-tex overflow-hd flex flex-colum j-between flex1">
							<view class="font-w text-overflow-tx conton-tex-tlt">{{item.topic_name}}</view>
							<text class="color-gray text-overflow-tx fs12">话题·{{item.member_count}}人参与讨论</text>	
						</view>
					</view>
					<text v-if="item.is_member_follow == 0" class="concern-btn color-white border-rius-5" :style="{'background-color': t('color1')}" @click="attention(item.id, idx, 'topic')">关注</text>
					<view v-else  class="concern-btn  border-rius-5" :style="{'border-color':t('color1'), 'color':t('color1')}" @click="attention(item.id, idx, 'topic')">
						已关注
					</view>
				</view>
			</block>
		</view>
		<view class="my-interest-sorte overflow-hd" v-if="sleIndex == 2">
			<block v-for="(item, idx) in sorteList" :key="item.id">
				<view class="my-interest-sorte-bx bg-color-white border-rius-5">
					<view class=" flex j-between al-item-center">
							<view class="my-interest-contx flex al-item-center">
								<image v-if="item.logo" class="sorte-img border-rius-5" :src="item.logo" mode=""></image>
								<text v-else style="font-size: 80rpx; color: #ccc;" class="iconfont icon-tupianjiazaishibai"></text>
								<view class="conton-tex overflow-hd flex flex-colum j-between flex1">
									<view class="font-w conton-tex-tlt text-overflow-tx">{{item.name}}</view>
									<text class="color-gray text-overflow-tx fs12">关注数{{item.fans_count}}</text>	
								</view>
							</view>
							<text class="concern-btn color-white border-rius-5" :style="{'background-color': t('color1')}" @tap="goto"  :data-url="'/pagesA/shop/index?id=' + item.id">进店</text>
					</view>
					<view class="flex flex-w">
						<block v-for="(data, nm) in item.prolist" :key="nm">
							<view class="sorte-gs flex">
								<image v-if="data.pic" class="sorte-gs-img border-rius-5" :src="data.pic" mode=""></image>
								<view v-else style="width: 150rpx;height: 150rpx;text-align: center;line-height: 150rpx;">
									<text style="font-size: 80rpx; color: #ccc;" class="iconfont icon-tupianjiazaishibai"></text>
								</view>
								<view class="sorte-gs-tx border-rius-5 color-white fs12">¥{{data.sell_price}}</view>
							</view>
						</block>
					</view>
				</view>
			</block>
		</view>
		<loading v-if="loading"></loading>
		<nomore v-if="!isData"></nomore>
		<!-- 悬浮按钮 -->
		<drag-button></drag-button>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data(){
			return {
				loading:false,
				isData: true,
				sleIndex: 0,
				heartitleList: ['用户','话题','店铺'],
				pages:1,
				userList: [],
				topicList: [],
				sorteList:[]
			}
		},
		onLoad() {
			this.getUserList()
		},
		onReachBottom() {
			if(this.sleIndex == 0 && this.isData) {
				this.getUserList()
			}else if(this.sleIndex == 1 && this.isData) {
				this.getTopicList()
			}else if(this.sleIndex == 2 && this.isData) {
				this.getSorteList()
			}
		},
		
		methods: {
			selectTitle(num) {
				this.sleIndex = num
				this.pages = 1
				this.isData = true
				this.userList = []
				this.topicList = []
				this.sorteList = []
				if(this.sleIndex == 0) {
					this.getUserList()
				}else if(this.sleIndex == 1) {
					this.getTopicList()
				}else {
					this.getSorteList()
				}
			},
			// 点击关注
			attention(id, idxs, type) {
				//  type -> 用户 user  话题 topic
				app.post('ApiMy/addFollow',{follow_id:id,type:type}, res => {
					if(res.msg == '已关注') {
						if(type == 'user') {
							this.userList[idxs].is_member_follow = 1
						}else {
							this.topicList[idxs].is_member_follow = 1
						}
						
						// this.$forceUpdate()
					}else {	
						if(type == 'user') {
							this.userList[idxs].is_member_follow = 0
						}else {
							this.topicList[idxs].is_member_follow = 0
						}
						// this.$forceUpdate()
					}
				})
			},

			// 用户列表
			getUserList() {
				this.loading = true
				app.post('ApiMy/followList',{pagenum:this.pages,type:'user'}, res => {
					this.loading = false
					if(res.datalist.length > 0) {
						this.userList= [...this.userList, ...res.datalist]
						this.pages++
					}else {
						this.isData = false
					}
				})
			},
			// 话题列表
			getTopicList() {
				this.loading = true
				app.post('ApiMy/followList',{pagenum:this.pages,type:'topic'}, res => {
					this.loading = false
					if(res.datalist.length > 0) {
						this.topicList= [...this.topicList, ...res.datalist]
						this.pages++
					}else {
						this.isData = false
					}
				})
			},
			// 店铺列表
			getSorteList() {
				this.loading = true
				app.post('ApiMy/followList',{pagenum:this.pages,type:'store'}, res => {
					this.loading = false
					if(res.datalist.length > 0) {
						this.sorteList= [...this.sorteList, ...res.datalist]
						this.pages++
					}else {
						this.isData = false
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.my-interest {
		
		.flex {display: flex;}
		.flex1 {flex: 1;}
		.j-center {justify-content: center;}
		.j-between {justify-content: space-between;}
		.j-around {justify-content: space-around;}
		.j-evenly {justify-content: space-evenly;}
		.flex-colum{flex-direction: column;}
		.flex-w{flex-wrap: wrap;}
		.al-item-center {align-items: center;}
		.font-w {font-weight: bold;}
		.fs12 {font-size: 24rpx;}
		.color-gray {color: #999;}
		.color-white{color: #fff;}
		.bg-color-white {background-color: #fff;}
		.border-rius-r {border-radius: 800rpx;}
		.border-rius-5 {border-radius: 10rpx;}
		.border-rius-10 {border-radius: 20rpx;}
		.overflow-hd {overflow: hidden;}
		.text-overflow-tx {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
		.text-overflow-line { display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;word-wrap: break-word;word-break: break-all;}
		
		.my-interest-h-title {
			height: 80rpx;
			padding: 20rpx 0;
			.my-interest-h-title-tx {
				padding: 0 10rpx;
				position: relative;
			}
			.actives {
				width: 100%;
				height: 6rpx;
				display: block;
				position: absolute;
				border-radius: 2rpx;
				bottom: -10rpx;
				left: 0;
				// background-color: #EFBD6F;
			}
		}
		

		// 用户
		.my-interest-user {
			padding: 20rpx;
			.topic-box {
				margin-top: 28rpx;
			}
			.topic-box:first-child {
				margin-top: 0;
			}

			.my-interest-conton {
				width: 80%;
				// height: 90rpx;
				// margin-top: 28rpx;
				
				.conton-img {
					width: 100rpx;
					height: 100rpx;
				}

			}

		}
		.conton-tex {
			height: 80rpx;
			padding-left: 30rpx;
			
			.conton-tex-tlt {
				font-size: 30rpx;
			}
		}
		.concern-btn {
			width: 124rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-width: 2rpx ;
			border-style: solid;
		}
		// 话题
		.my-interest-topic {
			padding: 0 20rpx 20rpx;
			.topic-box {
				margin-top: 28rpx;
			}
			.my-interest-contx {
				width: 80%;
				.tip-c-l-img-t {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 50%;

				}
				
			}

		}
		
		 // 店铺
		.my-interest-sorte {
			padding: 0 20rpx 20rpx;
			
			.my-interest-sorte-bx {
				padding: 20rpx;
				margin-top: 30rpx;
				
				.my-interest-contx {
					overflow: hidden;
					width: 80%;
				}
				.sorte-img {
					width: 80rpx;
					height: 80rpx;
				}
				
				.sorte-gs:nth-child(4n + 1) {
						margin-left: 0;
					}
				.sorte-gs {
					padding-top: 20rpx;
					margin-left: calc((100% - 600rpx) / 3);
					position: relative;
					.sorte-gs-img {
						width: 150rpx;
						height: 150rpx;
					}
					.sorte-gs-tx {
						padding: 2rpx 16rpx;
						position: absolute;
						bottom: 2rpx;
						right: 6rpx;
						background-color: rgba(153, 153, 153, .7);
					}
				}
			}
		}
	}
</style>
