<template>
	<view class="margin-bottom-with-bar">
		<!-- 顶部操作条 -->
		<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">
					<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
						:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
						<text class="cuIcon-location"></text>
						<text>{{searchInfo.area && searchInfo.area.length ? searchInfo.area[2].areaName : areaList[2][0].areaName}}</text>
					</picker>
				</view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @confirm="searchGoods" v-model="searchInfo.inputWorkerName" :adjust-position="true" type="text"
					placeholder="搜索师傅名称" confirm-type="search"></input>
				</view>
				<view class="action">
					<picker :mode="'multiSelector'" @change="categoryChange"
						@columnchange="categoryColChange" :value="categoryMultiIndex" :range-key="'goodsCategoryName'"
						:range="categoryList">
						<text>{{searchInfo.category && searchInfo.category.length ? searchInfo.category[2].goodsCategoryName : '技能筛选'}}</text>
						<text class="cuIcon-filter"></text>
					</picker>
				</view>
			</view>
		</view>
		<!-- 师傅卡片 -->
		<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">
				<view class="flex justify-start">
					<view class="cu-avatar round" :style="'background-image:url(' + item.workerLogoUrl + '); width: 130rpx; height: 130rpx;'"></view>
					<view class="margin-left-sm flex-column-between">
						<view class="text-black text-xl">{{item.name}}</view>
						<view class="text-sm">
							<view>
								<text class="margin-right-xs">服务技能:</text>
								<text v-for="(skill, skillArrIndex) in item.goodsCategories">
									<text>{{skill.goodsCategoryName}}</text>
									<text v-if="skillArrIndex !== item.goodsCategories.length - 1">，</text>
								</text>
							</view>
							<view>
								<text class="margin-right-xs">服务范围:</text>
								<text v-for="(area, areaArrIndex) in item.workerAreas">
									<text>{{getLastSplitAreaName(area.mergerName)}}</text>
									<text v-if="areaArrIndex !== item.workerAreas.length - 1">，</text>
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-sm padding-top">
					<view class="flex justify-between">
						<text>总评分<text class="text-red text-xl margin-left-xs">5.0</text> /5.0分</text>
						<uni-rate :readonly="true" allow-half :value="5" />
					</view>
					<view class="flex justify-between">
						<view>
							<text v-if="vCard.rateInfo.ratePoint" v-for="(ratePoint, index) in vCard.rateInfo.ratePoint">
								<text>{{ratePoint.name}}</text><text class="margin-lr-xs">{{ratePoint.score}}</text>
							</text>
						</view>
						<view class="text-sm" v-if="vCard.rateInfo.commentNum">评价({{vCard.rateInfo.commentNum}})<text
								class="text-bold text-gray cuIcon-right"></text></view>
					</view>
				</view>
			</view>
			<!-- 服务列表 -->
			<view class="padding-top-sm padding-bottom-xl grid text-center col-4 grid-square">
				<view v-for="(product,index) in item.goodsList" :key="index" class="bg-img"
					:style="[{ backgroundImage:'url(' + product.goodsImgUrl + ')' }]" v-if="index < 3">
					<view class="pic-down-text">
						<view class="text-grey text-cut text-sm">{{product.goodsName}}</view>
						<!-- <view class="text-price text-red text-cut">{{product.price}}</view> -->
					</view>
				</view>
				<view v-if="item.goodsList && item.goodsList.length > 3">
					<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.deptName}}
					</view>
				</view>
				<!-- <view class="margin-right-sm text-black">{{item.shopName}}</view> -->
				<view class='cu-tag light bg-main-color radius' @click="showShopDetail(item)">进店看看<text
						class="text-bold cuIcon-right"></text></view>
			</view>
		</view>
		<load-status-bar ref="loadStatusBar" @loadMore="loadWorkerPage"></load-status-bar>
	</view>
</template>

<script>
	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';

	export default {
		name: 'worker-circle',
		components: {
			horizontalNameCard,
			loadStatusBar
		},
		data() {
			return {
				workerInfos: [],
				loadMoreStatus: '',
				hasMoreData: false,
				pageNum: 0,
				pageSize: 0,
				stickyTop: this.CustomBar,
				searchInfo: {},
				areaList: [],
				areaMultiIndex: [0, 0, 0],
				categoryList: [],
				categoryMultiIndex: [0, 0, 0]
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.pageNum = this.$globalData.initPageNum;
				this.pageSize = this.$globalData.initPageSize;
				await this.loadRegionList();
				// 获取当前定位
				await this.getCurAreaArr();
				this.loadCategoryList();
				this.searchGoods();
			},
			async getCurAreaArr() {
				let areaArr = await this.$request.getCurArea();
				if (areaArr) {
					this.searchInfo.area = areaArr;
				} else {
					this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0], this.areaList[2][0]]
				}
			},
			async reloadData(params = {}) {
				this.pageNum = this.$globalData.initPageNum;
				this.workerInfos = [];
				this.loadWorkerPage(params);
			},
			async loadWorkerPage(params = {}) {
				params.pageNum = this.pageNum;
				params.pageSize = this.pageSize;
				this.$refs.loadStatusBar.showLoading();
				try {
					let res = await this.$request.getWorkerList(params);
					let rowsLength = res.rows.length;
					if (rowsLength > 0) {
						this.workerInfos = this.workerInfos.concat(res.rows);
						this.pageNum++;
						if (rowsLength === this.pageSize) {
							this.$refs.loadStatusBar.showLoadMore();
						}
					}
					this.$refs.loadStatusBar.showLoadOver();
				} catch (e) {
					console.error(e)
					this.$refs.loadStatusBar.showLoadErr();
				}
			},
			async loadCategoryList(idArr) {
				let typeList = await this.$request.listByStep();
				typeList = typeList.data;
				let col1Id = idArr ? idArr[0] : typeList[0].goodsCategoryId;
				let subTypeList = await this.$request.listByStep({
					goodsCategoryId: col1Id
				});
				subTypeList = subTypeList.data;
				let col2Id = idArr ? idArr[1] : subTypeList[0].goodsCategoryId;
				let subSubTypeList = await this.$request.listByStep({
					goodsCategoryId: col2Id
				});
				subSubTypeList = subSubTypeList.data;
				this.categoryList.push(typeList);
				this.categoryList.push(subTypeList);
				this.categoryList.push(subSubTypeList);
			},
			async loadRegionList() {
				let regionList = await this.$request.areaListByStep();
				regionList = regionList.data;
				let subRegionList = [];
				let subSubRegionList = [];
				if (regionList && regionList.length > 0) {
					subRegionList = await this.$request.areaListByStep({
						parentCode: regionList[0].areaCode
					});
					subRegionList = subRegionList.data;
				}
				if (subRegionList && subRegionList.length > 0) {
					subSubRegionList = await this.$request.areaListByStep({
						parentCode: subRegionList[0].areaCode
					});
					subSubRegionList = subSubRegionList.data;
				}
				this.areaList.push(regionList);
				this.areaList.push(subRegionList);
				this.areaList.push(subSubRegionList);
			},
			regionChange(e) {
				this.areaMultiIndex = e.detail.value;
				let chosenArea = [];
				for (let i = 0; i < this.areaList.length; i++) {
					chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
				}
				this.searchInfo.area = chosenArea;
				this.searchGoods();
			},
			async regionColChange(e) {
				let colObj = e.detail;
				if (colObj.column == 0) {
					// 通过一级查二级
					let subAreaList = await this.$request.areaListByStep({
						parentCode: this.areaList[0][colObj.value].areaCode
					});
					subAreaList = subAreaList.data;
					let subSubAreaList = [];
					if (subAreaList.length) {
						subSubAreaList = await this.$request.areaListByStep({
							parentCode: subAreaList[0].areaCode
						});
						subSubAreaList = subSubAreaList.data;
					}
					this.areaList.pop();
					this.areaList.pop();
					this.areaList.push(subAreaList);
					this.areaList.push(subSubAreaList);
					this.areaMultiIndex = [colObj.value, 0, 0];
				} else if (colObj.column == 1) {
					// 通过二级查三级
					let subAreaList = await this.$request.areaListByStep({
						parentCode: this.areaList[1][colObj.value].areaCode
					});
					subAreaList = subAreaList.data;
					this.areaList.pop();
					this.areaList.push(subAreaList);
					this.areaMultiIndex = [this.areaMultiIndex[0], colObj.value, 0];
				}
			},
			async categoryChange(e) {
				this.categoryMultiIndex = e.detail.value;
				let chosenCategory = [];
				for (let i = 0; i < this.categoryList.length; i++) {
					chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
				}
				this.searchInfo.category = chosenCategory;
				this.searchGoods();
			},
			async categoryColChange(e) {
				let colObj = e.detail;
				if (colObj.column == 0) {
					// 通过一级查询二级
					let subTypeList = await this.$request.listByStep({
						goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId
					});
					subTypeList = subTypeList.data;
					let subSubTypeList = await this.$request.listByStep({
						goodsCategoryId: subTypeList[0].goodsCategoryId
					});
					subSubTypeList = subSubTypeList.data;
					this.categoryList.pop();
					this.categoryList.pop();
					this.categoryList.push(subTypeList);
					this.categoryList.push(subSubTypeList);
					this.categoryMultiIndex = [colObj.value, 0, 0];
				} else if (colObj.column == 1) {
					// 通过二级查三级
					let subSubTypeList = await this.$request.listByStep({
						goodsCategoryId: this.categoryList[1][colObj.value].goodsCategoryId
					});
					subSubTypeList = subSubTypeList.data;
					this.categoryList.pop();
					this.categoryList.push(subSubTypeList);
					this.categoryMultiIndex = [this.categoryMultiIndex[0], colObj.value, 0];
				}
			},
			searchGoods() {
				let params = {
					goodsCategoryId: this.searchInfo.category && this.searchInfo.category.length > 1 ? this.searchInfo.category[2].goodsCategoryId : null,
					areaId: this.searchInfo.area[2].areaId,
					workerName: this.searchInfo.inputWorkerName
				};
				this.reloadData(params);
			},
			showShopDetail(shopInfo) {
				uni.navigateTo({
					url: '../product/shop-detail?shopInfo=' + encodeURIComponent(JSON.stringify(shopInfo))
				})
			},
			getLastSplitAreaName(mergeName) {
				let arr = mergeName.split(",");
				return arr[arr.length - 1];
			}
		}
	}
</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>
