<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'">
			<block slot="content">全国师傅圈</block>
		</cu-custom>
		<!-- 搜索栏 -->
		<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
			<view class="cu-bar bg-white search solid-bottom margin-bottom-sm">
				<view class="action">
					<text class="cuIcon-location"></text>
					<text>广州</text>
				</view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @confirm="searchGoods" :adjust-position="true" type="text" placeholder="搜索家电维修"
						confirm-type="search"></input>
				</view>
				<view class="action">
					<text>筛选</text>
					<text class="cuIcon-filter"></text>
				</view>
			</view>
		</view>
		<view class="margin-bottom-with-bar">
			<!-- 师傅卡片 -->
			<view v-for="(item, index) in workerInfos" class="bg-white padding margin-lr-sm margin-tb-sm shadow-warp">
				<!-- 师傅信息 -->
				<view class="solid-bottom padding-bottom-sm">
					<horizontal-name-card :vCard="item" :avatarPubClass="'round'" :avatarWidth="'130rpx'"
						:avatarHeight="'130rpx'"></horizontal-name-card>
				</view>
				<!-- 服务列表 -->
				<view class="padding-top-sm padding-bottom-xl grid text-center col-5 grid-square">
					<view v-for="(product,index) in item.productList" :key="index" class="bg-img"
						:style="[{ backgroundImage:'url(' + product.picUrl + ')' }]">
						<view class="pic-down-text">
							<view class="text-grey text-cut text-sm">{{product.name}}</view>
							<view class="text-price text-red text-cut">{{product.price}}</view>
						</view>
					</view>
					<view>
						<view v-for="(item, index) in 3" class="circle-point margin-right-xs bg-grey"></view>
					</view>
				</view>
				<!-- 进店看看 -->
				<view class="flex justify-between align-end margin-top-xs">
					<view class="cu-capsule">
						<view class='cu-tag bg-main-color'>
							<text class='cuIcon-shopfill'></text>
						</view>
						<view class="cu-tag line-main-color">
							{{item.shopInfo.shopName}}
						</view>
					</view>
					<!-- <view class="margin-right-sm text-black">{{item.shopName}}</view> -->
					<view class='cu-tag light bg-main-color radius' @click="showShopDetail(item.shopInfo)">进店看看<text
							class="text-bold cuIcon-right"></text></view>
				</view>
			</view>
			<view v-if="hasMoreData" class="text-center bg-main-color light padding-tb-sm" @click="loadData">
				<text class="margin-right-xs">查看更多</text>
				<text class="text-bold cuIcon-unfold"></text>
			</view>
			<view class="cu-load" :class="loadMoreStatus"></view>
		</view>
	</view>
</template>

<script>
	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';

	export default {
		name: 'worker-circle',
		components: {
			horizontalNameCard
		},
		data() {
			return {
				workerInfos: [],
				loadMoreStatus: '',
				hasMoreData: false,
				pageIndex: 1,
				pageSize: 3,
				stickyTop: this.CustomBar
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadMoreWorkerInfos() {
				let allData = await this.$api.data('workerInfos');
				let dataOfPage = allData.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
				if (dataOfPage.length == 0) {
					return;
				} else if (dataOfPage.length === this.pageSize) {
					this.hasMoreData = true;
				}
				this.workerInfos = this.workerInfos.concat(dataOfPage);
				this.pageIndex++;
			},
			async loadData() {
				this.loadMoreStatus = 'loading bg-main-color light';
				this.hasMoreData = false;
				try {
					await this.loadMoreWorkerInfos();
					this.loadMoreStatus = this.hasMoreData ? '' : 'over bg-grey';
				} catch (e) {
					this.loadMoreStatus = 'erro bg-red'
				}
			},
			showShopDetail(shopInfo) {
				uni.navigateTo({
					url: '../product/shop-detail?shopInfo=' + encodeURIComponent(JSON.stringify(shopInfo))
				})
			}
		}
	}
</script>

<style scoped>
	.grid.grid-square {
		overflow: visible;
	}

	.grid.grid-square>view {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 6rpx;
		position: relative;
		overflow: visible;
	}

	.pic-down-text {
		margin-top: 100%;
		width: 100%;
	}

	.circle-point {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		margin-top: 50%;
	}
</style>
