<template>
	<view>
		<view
			style="padding-top: 61rpx;padding-bottom: 32rpx;background-color: #FFFFFF; border-bottom: #EEEEEE solid 1rpx;"
			class="flex align-center">
			<view @click="gotoBack" style="padding-left: 30rpx;padding-right: 30rpx;">
				<text class="cuIcon-back" style="font-size: 40rpx;"></text>
			</view>
			<u-search @custom="gotoSearch" @search="gotoSearch" v-model="searchData" bg-color="#F5F6F7"
				:show-action="true" action-text="搜索" shape="round"></u-search>
		</view>

		<view v-if="!isShowData">
			<view class="flex align-center justify-between">
				<view style="margin-left: 29rpx;">
					<text style="font-size: 32rpx;color: #111111;">历史搜索</text>
				</view>
				<image @click="deleteSearchRecordAll" src="../../static/search_delete_icon.png"
					style="width: 42rpx;height: 42rpx;margin-right: 43rpx;margin: 32rpx;"></image>
			</view>
			<view v-for="(item,index) in searchRecordList" class="recode_search" :key="index">
				{{item.name}}
			</view>

		</view>
		<view v-else>
			<view class="flex align-center" style="padding-left: 19rpx;padding-top: 19rpx;">
				<view :class="{'selected_server_type':serverType ==0,'unselected_server_type':serverType ==1}"
					@click="selectServer(0)">
					服务人员
				</view>
				<view style="margin-left: 18rpx;"
					:class="{'selected_server_type':serverType ==1,'unselected_server_type':serverType ==0}"
					@click="selectServer(1)">
					商家
				</view>
			</view>

			<view v-for="(contentItem,index) in contentList" :key="index" class="flex align-start"
				style="padding-top: 30rpx;margin-left: 25rpx;margin-right: 25rpx;">
				<view style="position: relative;">
					<view :class="{'presonal_auth':contentItem.merchantType ==1, 'company_auth':contentItem.merchantType ==0}"
						style="position: absolute; top: 0;left: 0;z-index: 2;">
						{{contentItem.merchantType ==1?"个人认证":"企业认证"}}
					</view>
					<image style="width: 250rpx; height: 200rpx; border-radius: 10rpx;" mode="aspectFill"
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F060421091316%2F210604091316-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643870014&t=113341db71b753010a93a1972f7d6db1">
					</image>
				</view>


				<view style="margin-left: 20rpx; width: 100%;">
					<text class="wb_hide_2 content_text">{{contentItem.name}}</text>

					<view style="margin-top: 29rpx;" class="flex align-center">
						<view class="age_tag">{{serverType == 1?contentItem.storeAge:contentItem.serverAge}}年{{serverType == 1?'店龄':'工龄'}}</view>
						<view class="content_comment">好评率{{contentItem.rate}}%</view>
					</view>
					<view v-if="serverType == 0" class="flex align-center justify-between" style="margin-top: 20rpx;">
						<view class="flex align-center">
							<text style="color: #111111; font-size: 24rpx;font-weight: 500;">{{contentItem.realName}}</text>
							<text v-if="contentItem.serverLevel == '001'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;font-weight: 500;">初级家政</text>
							<text v-else-if="contentItem.serverLevel == '002'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;font-weight: 500;">中级家政</text>
							<text v-else-if="contentItem.serverLevel == '003'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;font-weight: 500;">高级家政</text>
							<text v-else-if="contentItem.serverLevel == '004'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;font-weight: 500;">金牌家政</text>
						</view>
						<view>
							<text style="font-size: 32rpx;color: #FF1414;">{{contentItem.goodsServerPrice}}元/{{contentItem.goodsUnit == "099"?contentItem.otherUnit:contentItem.monad}}</text>
						</view>
					</view>
					<view v-if="serverType == 0" style="margin-top: 20rpx;">
						<text style="font-size: 22rpx;color: #999999;" class="wb_hide_2">{{contentItem.merchantName}}</text>
					</view>
					<view v-if="serverType == 1" style="margin-top: 40rpx;">
						<text style="font-size: 22rpx;color: #999999;" class="wb_hide_2">{{contentItem.merchantName}}</text>
					</view>


				</view>

			</view>
			<u-loadmore v-if="showLoadMore" :status="status" />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchData: '',
				serverType: 0,
				isShowData: false,
				status:'loadmore',
				showLoadMore:false,
				currentPage: 1,
				contentList: [
					
				],
				searchRecordList: [
					
				]
			}
		},
		onReachBottom() {
			this.status = 'loading'
			this.currentPage ++
			this.getChannelContentList()
		},

		methods: {
			gotoSearch(e) {
				console.log(e)
				this.currentPage = 1
				this.searchData = e
				this.isShowData = true
				this.getChannelContentList()

			},
			selectServer(index) {
				this.currentPage = 1,
				this.serverType = index
				this.getChannelContentList()
				
			},
			deleteSearchRecordAll() {
				this.searchRecordList = []
			},
			getChannelContentList() {
				if (this.serverType == 0) {
					var param = {
						"pageNum": this.currentPage,
						"pageSize": 10,
						"name": this.searchData,
						"bizType": 1, //业务类型（1：家政；2：维修）

					}
					console.log(param)
					var that = this
					this.$u.api.seekCrewList(param).then(res => {
						console.log('获取服务数据')
						console.log(res)
						if (res.code == 200) {
							if (that.currentPage == 1) {
								that.contentList = []
							}
							
							if(res.rows.length > 0){
								that.contentList = that.contentList.concat(res.rows)	
							}else {
								that.status = 'nomore'
							}
							
							if (that.contentList.length < 10){
								that.showLoadMore = false
							}else {
								that.showLoadMore = true
							}
							that.$forceUpdate()

						}
					}).catch(error => {

					})
				}
				if (this.serverType == 1) {
					var param = {
						"pageNum": this.currentPage,
						"pageSize": 10,
						"name": this.searchData,
						"bizType": 1, //业务类型（1：家政；2：维修）

					}
					var that = this
					this.$u.api.seekMerchantList(param).then(res => {
						console.log('获取服务数据+++++++')
						console.log(res)
						if (res.code == 200){
						  	if (that.currentPage == 1) {
						  		that.contentList = []
						  	}
						  	if(res.rows.length > 0){
						  		that.contentList = that.contentList.concat(res.rows)	
						  	}else {
						  		that.status = 'nomore'
						  	}
							
							if (that.contentList.length < 10){
								that.showLoadMore = false
							}else {
								that.showLoadMore = true
							}
							
						}
						
						
						

					}).catch(error => {

					})
				}

			},
			gotoBack() {
				uni.navigateBack({

				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.selected_server_type {
		font-size: 26rpx;
		border: 1rpx solid #FC6035;
		color: #FC6035;
		padding-bottom: 6rpx;
		padding-top: 6rpx;
		padding-left: 21rpx;
		padding-right: 21rpx;
		border-radius: 50rpx;

	}

	.unselected_server_type {
		font-size: 26rpx;
		border: 1rpx solid #CCCCCC;
		color: #333333;
		padding-bottom: 6rpx;
		padding-top: 6rpx;
		padding-left: 21rpx;
		padding-right: 21rpx;
		border-radius: 50rpx;
	}

	.company_auth {
		width: 98rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #009BF8 0%, #009BF8 0%, #97D5FF 100%, #97D5FF 100%);
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		font-weight: bold;
	}

	.presonal_auth {
		width: 98rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FF6B00 0%, #FF6B00 0%, #FFB700 100%, #FFB700 100%);
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		font-weight: bold;
	}

	.age_tag {
		width: 98rpx;
		height: 32rpx;
		background: linear-gradient(269deg, #E7C2A1 0%, #E7C2A1 0%, #F4EBE1 100%, #F4EBE1 100%);
		border-radius: 8rpx;
		opacity: 1;
		color: #78341C;
		text-align: center;
		font-size: 22rpx;
		font-weight: 500;
	}

	.wb_hide_2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.content_text {
		font-size: 29rpx;
		color: #111111;
	}

	.content_comment {
		border-radius: 8rpx;
		border: 1rpx solid #FF9999;
		color: #FF1414;
		font-size: 22rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
		margin-left: 17rpx;
	}

	.recode_search {
		overflow: auto;
		float: left;
		padding-top: 14rpx;
		padding-bottom: 14rpx;
		padding-left: 23rpx;
		padding-right: 23rpx;
		background-color: #F5F6F7;
		margin-left: 30rpx;
		border-radius: 6rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #111111;
		margin-top: 30rpx;
	}
</style>
