<template>
	<view>
		<view class="nevbg">
			<view class="back"
				:style="[{paddingTop:titleTop+'rpx'},{height:bgHeight+'rpx'},{lineheight:titleHeight+'rpx'}]">
				<text>设备乐</text>
			</view>
		</view>
		<view style="height:186rpx"></view>
		<view class="top">
			<view class="flexBox" style="padding: 24rpx 24rpx 0 24rpx;">
				<view class="" style="width: 65vw;" @click="goRot('/pages/subPages/moreSearch')">
					<view class="searchcity">
						<view class="city">
							{{city_name ? city_name : '城市'}}
						</view>
						<image class="img1" src="/static/icon/xia.png" mode=""></image>
						<view class="searchline">
							|
						</view>
						<image class="img2" src="/static/icon/search.png" mode=""></image>
						<input type="text" placeholder="输入关键词搜索" disabled placeholder-style="font-size: 26rpx;font-weight: 400;">
					</view>
				</view>

				<button style="width: 30vw;" shape="circle" class="btn" size="small" @click="goHub">免费发布</button>
			</view>

			<view class="boxs" style="padding: 0 24rpx; justify-content: space-evenly">
				<view class="item" v-for="item in list.slice(0,3)"
					@click="goRot('/pages/subPages/moreSearch',item.name)">
					<view class="imgbtn">
						<image :src="item.icon_url" class="img" mode=""></image>
					</view>
					<p style="font-size: 24rpx; margin-top: 16rpx;">{{item.name}}</p>
				</view>
				<view class="item" style="margin-right: 0;" @click="goRot('/pages/subPages/more?val=1')">
					<image src="../../static/Frame 2868/Frame 175.png" class="img" mode=""></image>
					<p style="font-size: 24rpx; margin-top: 16rpx;">更多</p>
				</view>
			</view>
		</view>
		<view class="flexBox navBox" style="margin-bottom: 12rpx;">
			<view class="left" :class="active == '出租' ? 'activeBox' : ''" @click="type = 3; active ='出租'; getList()">
				<p class="title">出租</p>
				<p class="tip">免押金</p>
			</view>
			<view class="right" :class="active == '出售' ? 'activeBox' : ''" @click="type = 4;active ='出售'; getList()">
				<p class="title">出售</p>
				<p class="tip">老板直聊</p>
			</view>
		</view>
		<view class="">
			<view class="" v-if="list1 && list1.length>0">
				<view class="list" v-for="item in list1">
					<item :info="item"></item>
				</view>
			</view>

			<view v-else class="" style="margin-top: 30%;">
				<u-empty></u-empty>
			</view>
		</view>


		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect flexBox" style="flex-direction: column;" @tap.stop>
					<image src="/static/image/fabu/Frame 2896@2x.png" mode=""
						style="width: 622rpx; margin-bottom: 32rpx;height: 152rpx;"
						@click="goRot('/pages/sellAndBuy/hire','1')"></image>
					<image src="../../static/image/fabu/Frame 2897@2x.png"
						style="width: 622rpx;margin-bottom: 32rpx;height: 152rpx;"
						@click="goRot('/pages/sellAndBuy/hire','2')" mode=""></image>
					<view class="flexBox">
						<view class="box1 flexBox" style="justify-content: center;margin-right: 5%;padding: 0 5rpx;"
							@click="goRot('/pages/sellAndBuy/hub', '3')">
							<image src="../../static/image/fabu/Group 188@2x.png"
								style="width: 64rpx;height: 64rpx; margin-right: 16rpx;" mode=""></image>
							设备求租
						</view>
						<view class="box1 flexBox" style="justify-content: center;padding: 0 5rpx;"
							@click="goRot('/pages/sellAndBuy/hub', '4')">
							<image src="../../static/image/fabu/Group 187@2x.png"
								style="width: 64rpx;height: 64rpx; margin-right: 16rpx;" mode=""></image>
							设备求购
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import item from '@/component/listItem/listItem.vue'
	export default {
		components: {
			item
		},
		data() {
			return {
				//顶部文字
				titleTop: '',
				titleHeight: '',
				bgHeight: '',
				keyword: '',
				show: false,
				city_id: null,
				city_name: null,
				value: '',
				type: 3,
				active: '出租',
				list: [

				],
				list1: [],
				lat: '',
				lng: ''
			}
		},
		methods: {
			// 标题文字居中
			getWxTitleTop() {
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.titleTop = (menuButtonInfo.top) //标题文字的position:top
				this.titleHeight = (menuButtonInfo.height) //标题文字的高度
				//背景的高度=top+height+需要的下方高度
				this.bgHeight = (menuButtonInfo.top) + (menuButtonInfo.height) + 75
			},
			goHub() {
				this.show = true
			},

			goRot(url, val) {
				uni.navigateTo({
					url: url + '?val=' + val
				})
				this.show = false
			},
			change() {
				this.getList()
			},
			getList() {
				uni.$u.http.post('/api/equip/equip_list', {
					orderby: 1,
					// page: 1,
					// pagenum: 10,
					lat: this.lat,
					lng: this.lng,
					keyword: this.keyword,
					type: this.type
				}).then(res => {
					console.log(res);
					this.list1 = res.data.data
				}).catch(err => {
					console.log(err);
				})
			}
		},
		onShow() {
			let pagearr = getCurrentPages(); //获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
			console.log('option:', currentPage) //获取页面传递的信息
			this.city_id = currentPage.$vm.city_id
			this.city_name = currentPage.$vm.city_name
			this.lat = currentPage.$vm.lat
			this.lng = currentPage.$vm.lng
			this.getList()
		},
		onLoad(option) {
			console.log(option);
			if (option.val = '买') {
				uni.switchTab({
					url: '/pages/index/buy'
				})
			} else {
				uni.switchTab({
					url: '/pages/index/sell'
				})
			}
			this.getWxTitleTop()
			this.getList()
			uni.$u.http.get('/api/index/rec_index').then(res => {
				console.log(res);
				this.list = res.data
				console.log(this.list);
			}).catch(err => {
				console.log(err);
			})
		}
	}
</script>

<style scoped lang="scss">
	.top {
		height: 300rpx;
		background: linear-gradient(180deg, #d0e3ef 0%, #e0eaf2 100%);

		.searchcity {
			display: flex;
			align-items: center;
			width: 466rpx;
			height: 80rpx;
			border-radius: 48rpx;
			opacity: 1;
			border: 1rpx solid #c1ddedff;
			background: #ffffffff;
			padding: 32rpx 24rpx;
			box-sizing: border-box;

			.city {
				color: #000000e6;
				font-size: 26rpx;
				font-weight: 400;
			}

			.img1 {
				margin-left: 4rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.searchline {
				opacity: 0.6;
				margin:0 10rpx;
			}

			.img2 {
				margin-left: 4rpx;
				margin-top: 4rpx;
				width: 40rpx;
				height: 40rpx;
			}
			input{
				margin-top: 4rpx;
				flex:1;
				margin-left: 16rpx;
			}
		}
	}

	.nevbg {
		position: fixed;
		height: 186rpx;
		width: 100%;
		z-index: 99;
		opacity: 1;
		overflow: hidden;
		background: linear-gradient(180deg, #cde2ef 0%, #d0e3ef 100%);
	}

	.back {
		position: fixed;
		display: flex;
		align-items: center;
		z-index: 999;
		width: 100%;

		image {
			position: absolute;
			top: 50%;
			left: 32rpx;
			transform: translate(-50%);
			width: 48rpx;
			height: 48rpx;
		}

		text {
			margin-left: 32rpx;
			color: #000000e6;
			font-size: 48rpx;
			font-weight: 700;
			text-align: left;
			font-family: "Alibaba PuHuiTi";
		}
	}

	.flexBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bum {}

	.box1 {
		width: 298rpx;
		height: 136rpx;
		border-radius: 8rpx;
		opacity: 1;
		background: #ffffff47;
	}

	.btn {
		width: 212rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 48rpx;
		font-size: 28rpx;
		margin-left: 16rpx;
		opacity: 1;
		color: white;
		background: linear-gradient(134.7deg, #46baecff 0%, #2f67d3ff 100%);
	}

	.listBox_top {
		display: flex;
	}

	.listBox_right {
		width: 100%;
	}

	.line {
		height: 1rpx;
		opacity: 1;
		background: #f0f2f5ff;
		margin: 24rpx 0 17rpx 0;
	}

	.font {
		color: #e63d27ff;
		font-size: 40rpx;
		font-weight: 500;
		text-align: right;
	}

	.search {
		background-color: white;
	}

	/deep/ .u-search__action {
		display: none;
	}

	.boxs {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 32rpx;
		margin-left: 4%;
	}

	.title {
		color: #00000066;
		font-size: 40rpx;
		font-weight: 700;
	}

	.tips {
		color: #00000099;
		font-size: 26rpx;
		font-weight: 400;
	}

	.listBox_cont {
		display: flex;
		align-items: center;
		margin: 16rpx 0;
	}

	.tip {
		color: #00000066;
		font-size: 28rpx;
		font-weight: 500;
	}

	.item {
		.imgbtn{
			width: 104rpx;
			height: 104rpx;
			border-radius: 16rpx;
			background-color: #ffffff;
			.img {
				width: 104rpx;
				height: 104rpx;
			}
		}
		.img {
			width: 104rpx;
			height: 104rpx;
		}

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 42rpx;
	}

	.warp {
		height: 100vh;
		background: linear-gradient(180deg, #091a343d 0%, #091a34e0 100%);
	}

	.rect {
		position: fixed;
		bottom: 5%;
		left: 10%
	}

	.navBox {
		height: 132rpx;
		opacity: 1;
	}

	.left {
		width: 50%;
		height: 132rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.activeBox {
		background: url("/static/image/Rectangle 38.png");
		.title{
			color: #3375D8;
		}
		.tip{
			color: #3375D8;
		}
	}

	.right {
		width: 50%;
		height: 132rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.list {
		background: #f6f6f6ff;
		padding: 8rpx 24rpx;
	}

	.listBox {
		height: 324rpx;
		border-radius: 8rpx;
		opacity: 1;
		background: #ffffffff;
		margin-bottom: 24rpx;
		padding: 24rpx 24rpx 0 24rpx;
	}

	/deep/ .u-input {
		height: 34rpx
	}
</style>