<template>
	<view class="container" style="padding: 0;">
		<view class="inputBox">
			<input class="uni-input" @input="onKeyInput" placeholder="请输入搜索内容" style="padding: 0 32rpx;"
				v-model="inputValue" />
			<text class='searchText' @click="search" style="margin-top: 10rpx;">搜索</text>
		</view>
		<view class="tabBox" style="margin-top: 26rpx;padding: 0 32rpx;">
			<!-- <view class="selectBox" style="display: flex;margin-top: 45rpx;display: none;">
				<view class="classify" style="display: flex;margin-right:50rpx;align-items: center;"  @click="jlSort">
					<view class="jvliText">
						距离
					</view>
					<image src="/static/image/paixu_icon@2x.png" mode="" style="width: 28rpx;height: 28rpx;"></image>		              
				</view>
				<view class="classify" style="display: flex;">
					<view class="jvliText">
						分类
					</view>
					<view class="picker">
						<picker @change="bindPickerChange1" :value="index1" :range="classArray" class="picker">
							<view class="uni-input pickerIner">{{classArray[index1]}}</view>
						</picker>
						<view class="">

						</view>
						<view class="image">
							<image src="/static/image/fenlei_icon_3@2x.png" mode="" style="width: 28rpx;height: 28rpx;"></image>
						</view>
					</view>
				</view>
			</view> -->
			<view class="" style="display: flex; justify-content: space-between;flex-wrap: wrap;margin-top: 26rpx;">
				<view class="goodsBox " v-for="(item,index) in goodsList" :key="index"
					@click="goDetail(item.goods_id,item.title,item.ad_id)">
					<view class="goodsPic">
						<image :src="item.images[0]||item.title_image" mode="" class="goodImg"></image>
					</view>
					<view class="goodsDel">
						{{item.goods_name?item.goods_name:item.title}}
					</view>
					<view :class="item.price?'goodsPrice':'goodsPrices'">
						<text style="font-size: 24rpx;margin-right: -6rpx;">￥</text>
						{{item.price}}
					</view>
					<view class="userInfo">
						<view class="userLeft">
							<view class="userHead">
								<image :src="item.avatar||logo" mode="" class="userHead"></image>
							</view>
							<view class="userName">
								{{item.nickname||'科欧社区淘'}}
							</view>
						</view>
						<view class="userRight">
							<image src="/static/image/zuanshi_icon_1@2x.png" mode=""
								style="width:20rpx;height: 17rpx;margin-right: 12rpx;"></image>
							{{item.grade_status==0?'L0':item.grade_status==1?'L1':item.grade_status==2?'L2':item.grade_status==3?'L3':item.grade_status==4?'L4':item.grade_status==5?'L5':'广告'}}
						</view>
					</view>
					<view class="addressMask">
						<image src="/static/image/dingwei_icon_1@2x.png" mode=""></image>
						<view class="maskAddress"
							style="max-width: 104rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
							v-if="item.address">
							{{item.address}}
						</view>
						<view class="maskAddress" v-if="item!=null">
							{{item.dis==undefined?item.distance.toFixed(2):item.dis.toFixed(2)}}km
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="goodsList.length==0" style="text-align: center;margin-top: 100rpx;color:grey;">
			暂无更多搜索结果
		</view>
	</view>
</template>

<script>
	import request from "../../utils/request.js"
	export default {
		onLoad(options) {
			this.inputValue = options.kw
			this.getBoardList()
			this.searchResult()
		},
		data() {
			return {
				pageNum: 1,
				inputValue: '',
				//距离
				// array: [],
				// index: 0,
				q: 1,
				//分类
				classifyId: [],
				classId: '',
				classArray: [],
				index1: '',
				goodsList: [],
				boardIndex: 0, //广告index
				boardList: [], //广告列表
				logo: '../../static/image/logo.jpg'
			}
		},
		onReachBottom: function() {
			this.pageNum = this.pageNum + 1
			this.searchResult()
		},
		methods: {
			//广告列表
			getBoardList() {
				let that = this
				request.post('/api/index/adList', {
					lat2: uni.getStorageSync('lat'),
					lng2: uni.getStorageSync('lot')
					// lat2: '39.15935',
					// lng2: '117.23785'
				}).then(res => {
					this.boardList = res.data
				}).catch(err => {

				})
			},
			//分类选择
			classifylist() {
				request.get('/api/index/fen', {})
					.then(res => {
						this.classifyId = res.data.info
						let list = res.data.info
						list.forEach((item, index) => {
							this.classArray.push(item.name)
						})
					}).catch(ex => {

					});
			},
			//距离选择
			jlSort() {
				this.q = Number(this.q) == 1 ? '2' : '1',
					this.searchResult()
			},
			bindPickerChange1: function(e) {
				this.index1 = e.target.value
				this.classId = this.classifyId[this.index1].id
				this.searchResult()
			},
			onKeyInput(e) {
				this.inputValue = e.target.value;
			},
			//搜索
			search() {
				// uni.navigateTo({
				// 	url: '/pages/index/search-result?kw=' + this.inputValue
				// })
				this.boardIndex = 0
				this.searchResult()
			},
			//搜索结果
			searchResult() {
				if (this.inputValue == '') {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none'
					})
				} else {
					request.post('/api/index/Search', {
						page: this.pageNum,
						rows: 6,
						kw: this.inputValue,
						lat2: this.latitude,
						lng2: this.longitude,
						q: this.q,
						sort_id: this.classId
					}).then(res => {
						if (res.data.info.length == 6) {
							res.data.info.push(this.boardList[this.boardIndex])
							this.boardIndex += 1
							if (this.boardIndex >= this.boardList.length) {
								this.boardIndex = 0
							}
						}
						let list = this.pageNum == 1 ? res.data.info : this.goodsList.concat(res.data.info);
						this.goodsList = list
					}).catch(err => {

					})
				}
			},
			goDetail(id, title, boardId) {
				if (title) {
					uni.navigateTo({
						url: '/pages/index/board-detail?id=' + boardId
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/good-details?goos_id=' + id
					})
				}

			}
		},
		created() {
			this.classifylist(); //分类选择
			this.latitude = uni.getStorageSync('lat')
			this.longitude = uni.getStorageSync('lot')
		}
	}
</script>

<style>
	@import url("/common/uni.css");
	@import url("/common/search-result.css");
	@import url("/common/index.css");

	.goodsBox1 {
		width: 330rpx;
		background: #fff;
		margin-bottom: 24rpx;
		padding-bottom: 22rpx;
		border-radius: 16rpx 16rpx 0 0;
		position: relative;
	}

	.goodsPrices {
		color: #fff !important;
	}
</style>