<template>
	<view class="index">
		<u-sticky bgColor='#F7F8FA'>
			<u-tabs :list="list1" @click="followClick" :scrollable="false" :activeStyle="{
		 		color: '#242424',
		 		fontSize:'32rpx',
		 		transform:'scale(1.05)',
		 	}"></u-tabs>
		</u-sticky>
		<template v-if="followList.length">
			<view class="list d-flex a-center" v-for="(item, index) in followList" :key="index" @click="clickfollow(item.userType,item.userId)">
				<view class="list_lf d-flex a-center">
					<u--image :showLoading="true" :src="item.avatar" radius='100%' width="80rpx" height="80rpx"
						class="list_img"></u--image>
					<view class="list_name">
						{{item.nickName}}
					</view>
				</view>
				<view class="list_lr">
					<view class="list_btn" >
						已关注
					</view>
				</view>
			</view>
		</template>

		<u-empty v-else marginTop="200" width="260" height="260" textSize="26" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>

	</view>
</template>

<script>
	import {
		getattentionGET
	} from '@/api/workbench/index.js'
	export default {
		data() {
			return {
				list1: [{
					name: '用户',
					userType: "app_user"
				}, {
					name: '商家',
					userType: "merchant"
				}],
				followList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 15,
					userType: "app_user"
				},
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) return
			this.queryParams.pageNum++
			this.getList()
		},

		methods: {
			followClick(e) {
				this.queryParams.userType = e.userType
				this.queryParams.pageNum = 1
				this.followList = []
				this.getList()
			},
			//关注列表
			async getList() {
				const res = await getattentionGET(this.queryParams)
				this.followList = [...this.followList, ...res.data]
				console.log(this.followList, "====================")
				this.total = res.total
			},
			
			//去详情
			clickfollow(type,id){
				console.log(type,"=====")
				 let self = this
				if(type=='merchant'){
					 //商家
					 self.$uniGo.navigateTo({
					 	url: `/homePage/merchant/index?businessId=${id}`
					 });
				}else{
					//用户
					uni.navigateTo({
						url: `/homePage/merchant/personHomePage?userId=${id}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		padding: 0rpx 30rpx 30rpx 30rpx;

		.list {
			background: #fff;
			border-radius: 24rpx;
			padding: 20rpx;
			justify-content: space-between;
			margin: 10rpx 0;

			.list_lf {
				.list_name {
					font-size: 28rpx;
					color: #333333;
					padding-left: 20rpx;
				}
			}

			.list_lr {
				.list_btn {
					width: 108rpx;
					height: 42rpx;
					border-radius: 8rpx;
					border: 1rpx solid #1572FF;
					font-size: 22rpx;
					color: #1572FF;
					text-align: center;
					line-height: 42rpx;
				}
			}
		}
	}
</style>