<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"  maxlength="10" 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" @click="searchHistory(item)">
			<text v-if="item!==''">{{item}}</text>
			</view>

		</view>
		<view v-else>
			<view class="flex align-center" style="padding-left: 19rpx;padding-top: 19rpx;">
                <view :class="{'selected_server_type':serverType ==2,'unselected_server_type':serverType !=2}" v-if="isGroup"
					@click="selectServer(2)" style="margin-right: 18rpx;">
					团购服务
				</view>
				<view :class="{'selected_server_type':serverType ==0,'unselected_server_type':serverType !=0}"
					@click="selectServer(0)">
					服务人员
				</view>
				<view style="margin-left: 18rpx;"
					:class="{'selected_server_type':serverType ==1,'unselected_server_type':serverType !=1}"
					@click="selectServer(1)">
					商家
				</view>
			</view>
			<view class="" v-if="contentList.length>0&&serverType!=2">
				
			
			<view v-for="(contentItem,index) in contentList" :key="index" class="flex align-start"
				style="padding-top: 30rpx;margin-left: 25rpx;margin-right: 25rpx;"
				@click="gotoDetails(contentItem)"
				>
				<view style="position: relative;">
					<view :class="{'presonal_auth':contentItem.merchantType ==1, 'company_auth':contentItem.merchantType ==0}"
					v-if="serverType==0" style="position: absolute; top: 0;left: 0;z-index: 2;">
						{{contentItem.merchantType ==1?"个人认证":"企业认证"}}
					</view>
					<image style="width: 240rpx; height: 180rpx; border-radius: 10rpx;" mode="aspectFill" :src="contentItem.goodsImageList[0].url" v-if="serverType ==0"></image>
                    <image style="width: 240rpx; height: 180rpx; border-radius: 10rpx;" mode="aspectFill" :src="contentItem.avatar" v-if="serverType ==1"></image>
				</view>
                <view class="flex-sub padding-right">
                    <view style="margin-left: 20rpx; width: 100%;height: 180rpx; display: flex;flex-direction: column;justify-content: space-between;">
                        <view>
                            <view class="wb_hide_2 content_text" v-if="serverType==0">{{contentItem.name}}</view>
                            <view class="wb_hide_2 content_text" v-if="serverType==1">{{contentItem.merchantName}}</view>

                            <view style="margin-top: 15rpx;" class="flex align-center" v-if="serverType==0">
                                <view class="age_tag"> {{contentItem.serverAge}}年工龄</view>
                                <view class="content_comment" v-if="contentItem.rate>0">好评率{{contentItem.rate}}%</view>
                            </view>

                            <view style="margin-top: 15rpx;" class="flex align-center justify-between" v-if="serverType==1">
                                <view class="age_tag"> {{contentItem.storeAge}}年店龄</view>
                                <view>成交{{contentItem.sales}}单</view>
                            </view>

                            <view style="margin-top: 15rpx;" class="flex align-center justify-between" v-if="serverType==1">
                                <view style="color:#FF481E;font-size:22rpx;"> 综合评分： <span style="font-size: 24rpx;" class="text-bold">{{contentItem.score}}</span> </view>
                                <view class="content_comment" v-if="contentItem.rate>0">好评率{{contentItem.rate}}%</view>
                            </view>

                            <view class="flex align-center justify-between" style="margin-top: 10rpx;" v-if="serverType==0">
                                <view class="flex align-center">
                                    <text style="color: #111111; font-size: 24rpx;">{{contentItem.nikeName}}</text>
                                    <text v-if="contentItem.serverLevel == '001'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;">初级家政</text>
                                    <text v-else-if="contentItem.serverLevel == '002'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;">中级家政</text>
                                    <text v-else-if="contentItem.serverLevel == '003'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;">高级家政</text>
                                    <text v-else-if="contentItem.serverLevel == '004'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;">金牌家政</text>
                                </view>
                                <view>
                                    <text v-if="serverType==0" style="font-size: 32rpx;color: #FF1414;">{{contentItem.goodsServerPrice}}</text>
                                    <text v-if="serverType==0" style="font-size: 26rpx;color: #FF1414;">元/{{contentItem.goodsUnit == "999"?contentItem.otherUnit:contentItem.goodsUnitName}}</text>
                                </view>
                            </view>
                        </view>
                        <view style="margin-top: 0rpx;" v-if="contentItem.merchantType!=1&&serverType==0">
                            <text style="font-size: 22rpx;color: #999999;" class="wb_hide_2">{{contentItem.merchantName}}</text>
                        </view>
                    </view>
                    <view style="margin-left: 20rpx; width: 100%;" v-if="serverType==1">
                        <view v-for="(good,goodIndex) in contentItem.goodsList" :key="good.goodsId">
                            <view v-if="goodIndex<2">
                                <view class="flex align-center">
                                    <image src="../../static/group.png" style="width:36rpx;height:36rpx;left:0;top:0;" v-if="good.isGroupGoods==1"></image>
                                    <image src="../../static/reserve.png" style="width:36rpx;height:36rpx;left:0;top:0;" v-if="good.isGroupGoods==0"></image>
                                    <view style="margin-left:10rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 380rpx;">{{good.name}}</view>
                                </view>
                                <view class="flex align-center margin-top-sm margin-bottom" v-if="good.isGroupGoods==1">
                                    <view style="color: #FF0000;font-size:32rpx;" class="text-bold">
                                        <span class="text-sm">￥</span>{{good.currentPrice}}
                                    </view>
                                    <view style="margin-left: 16rpx; text-decoration:line-through;color: #999;font-size: 26rpx; text-align: left;">
                                        <span>￥</span>{{good.scribingPrice}}
                                    </view>
                                </view>
                                <view style="font-size: 32rpx;color: #FF1414;" class="flex flex-sub margin-top-sm margin-bottom" v-if="good.isGroupGoods==0">
                                    <span class="text-bold" style="margin-right:8rpx;">{{good.goodsServerPrice}}</span>
                                    <span style="font-size: 26rpx;">元/{{good.goodsUnit == "999"?good.otherUnit:good.goodsUnitName}}</span>
                                </view>
                            </view>
                            
                        </view>
                    </view>
                </view>
			</view>
			</view>
            <view v-if="contentList.length>0&&serverType==2">
                <u-waterfall v-model="contentList" ref="uWaterfall" style="padding-left:18rpx;">
                    <template v-slot:left="{leftList}">
                        <view @click="gotoDetails(item)" class="demo-warter" v-for="(item, index) in leftList" :key="index">
                            <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
                            <u-lazy-load threshold="-450" border-radius="0" :height="260" img-mode="" :image="item.goodsImageList[0].url" :index="index"></u-lazy-load>
                            <view class="padding-lr-sm padding-bottom">
                                <view class="demo-title">
                                    {{item.name}}
                                </view>
                                <view v-if="item.rate>0" style="margin-top: 20rpx;color:#FF0000; font-size: 22rpx;" class="flex align-center justify-center rate-box">
                                    <view style=" text-align: left;">好评率</view>
                                    <view style="margin-left:6rpx;margin-top:4rpx;">{{item.rate}}%</view>
                                </view>
                                <view style="margin-top: 20rpx;" class="flex align-center">
                                    <view style="color: #FF0000;font-size:32rpx;" class="text-bold">
                                        <span class="text-sm">￥</span>{{item.currentPrice}}
                                    </view>
                                    <view style="margin-left: 16rpx; text-decoration:line-through;color: #999;font-size: 26rpx; text-align: left;">
                                        <span>￥</span>{{item.scribingPrice}}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>

                    <template v-slot:right="{rightList}">
                        <view @click="gotoDetails(item)" class="demo-warter" v-for="(item, index) in rightList" :key="index">
                            <u-lazy-load threshold="-450" border-radius="0" :height="260" img-mode="" :image="item.goodsImageList[0].url" :index="index"></u-lazy-load>
                            <view class="padding-lr-sm padding-bottom">
                                <view class="demo-title">
                                    {{item.name}}
                                </view>
                                <view v-if="item.rate>0" style="margin-top: 20rpx;color:#FF0000; font-size: 22rpx;" class="flex align-center justify-center rate-box">
                                    <view style=" text-align: left;">好评率</view>
                                    <view style="margin-left:6rpx;margin-top:4rpx;">{{item.rate}}%</view>
                                </view>
                                <view style="margin-top: 20rpx;" class="flex align-center">
                                    <view style="color: #FF0000;font-size:32rpx;" class="text-bold">
                                        <span class="text-sm">￥</span>{{item.currentPrice}}
                                    </view>
                                    <view style="margin-left: 16rpx; text-decoration:line-through;color: #999;font-size: 26rpx; text-align: left;">
                                        <span>￥</span>{{item.scribingPrice}}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>
                </u-waterfall>
            </view>
            
			<view class="flex align-center" v-if="contentList.length==0">
				<image src="../../static/nomore_icon.png" mode=""
					style="width: 370rpx;height: 370rpx;margin: 100rpx auto;"></image>
			</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: [],
                isGroup: this.$bizType=='1',
			}
		},
		onReachBottom() {
			this.status = 'loading'
			this.currentPage ++
			this.getChannelContentList()
		},
		onShow() {
			if(uni.getStorageSync('searchRecordList').length>0)
			{
				this.searchRecordList=uni.getStorageSync('searchRecordList').slice(0,10)
			}
			else{
				this.searchRecordList=[]
			}
			// console.log(this.searchRecordList,uni.getStorageSync('searchRecordList'))
		},

		methods: {
			gotoDetails(obj) {
				uni.removeStorageSync('indexDetails')
				// console.log(obj)
				if (this.serverType == 0) {
					obj.bizType = this.$bizType
					uni.setStorageSync('indexDetails', obj)
					uni.navigateTo({
						url: './personDetails'
					})
				} else {
					obj.bizType = this.$bizType
					uni.setStorageSync('indexDetails', obj)
					uni.navigateTo({
						url: './shopDetails'
					})
				}

			},
			// 搜搜点击的历史纪律
			searchHistory(e){
                this.contentList = []
				this.currentPage = 1
				this.searchData = e
                if(this.isGroup) {
                    this.serverType = 2
                } else {
                    this.serverType = 0
                }
                this.isShowData = true
				this.getChannelContentList()
			},
			gotoSearch(e) {
				if(e!='')
				{
					this.searchRecordList.unshift(e)
					uni.setStorageSync('searchRecordList',this.searchRecordList)
				}
				this.currentPage = 1
                this.contentList = []
				this.searchData = e
                if(this.isGroup&&!this.isShowData) {
                    this.serverType = 2
                }
				this.isShowData = true
				this.getChannelContentList()
			},
			selectServer(index) {
				this.currentPage = 1;
				this.serverType = index;
                this.contentList = []
				this.getChannelContentList()
			},
			deleteSearchRecordAll() {
				this.searchRecordList = []
				uni.removeStorageSync('searchRecordList')
			},
			getChannelContentList() {
				if (this.serverType == 0) {
					var param = {
						"pageNum": this.currentPage,
						"pageSize": 10,
						"name": this.searchData,
						"bizType": this.$bizType, //业务类型（1：家政；2：维修）
                        isGroupGoods: 0,
					}
					var that = this
					this.$u.api.seekCrewList(param).then(res => {
						// console.log('获取服务数据')
						// console.log(res)
						if (res.code == 200) {
							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": this.$bizType, //业务类型（1：家政；2：维修）

					}
					var that = this
					this.$u.api.seekMerchantMerchandiseList(param).then(res => {
						// console.log('获取服务数据+++++++')
						// console.log(res)
						if (res.code == 200){
						  	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 == 2) {
					var param = {
						"pageNum": this.currentPage,
						"pageSize": 10,
						"name": this.searchData,
						"bizType": this.$bizType, //业务类型（1：家政；2：维修）
                        isGroupGoods: 1,
					}
					var that = this
					this.$u.api.seekCrewList(param).then(res => {
						// console.log('获取服务数据')
						// console.log(res)
						if (res.code == 200) {
							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 => {

					})
				}


			},
			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 {
			padding: 4rpx 10rpx;
		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 {
		padding: 4rpx 10rpx;
		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;
		padding: 1rpx 10rpx;
		// height: 32rpx;
		background: linear-gradient(269deg, #E7C2A1 0%, #E7C2A1 0%, #F4EBE1 100%, #F4EBE1 100%);
		border-radius: 8rpx;
		opacity: 1;
		color: #885c4b;
		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;
	}

    .demo-warter {
        border-radius: 20rpx;
        overflow: hidden;
        margin: 18rpx 18rpx 18rpx 0;
        background-color: #ffffff;
        position: relative;
    }

.demo-image {
    width: 100%;
    border-radius: 4px;
}

.demo-title {
    font-size: 30rpx;
    margin-top: 5px;
    color: #111;
    word-wrap: break-word;
}

.rate-box {
    border: 2rpx solid #ff8f96;
    border-radius: 8rpx;
    width: 150rpx;
    height: 36rpx;
}
</style>
