<template>
	<view>
		<view class="top">
			<view class="flexBox" style="justify-content: space-between;">
				<view class="">
					<p class="title">设备乐</p>
					<p class="desc">专业工程机械服务平台</p>
				</view>
				<view class="flexBox">
					<image src="/static/sell/Mask group.png" style="width: 104rpx; height: 104rpx;" mode=""></image>
					<view class="right">
						<p class="desc">累计交易</p>
						<p style=" color: #0052d9ff;font-size: 40rpx;font-weight: 500;">12333</p>
					</view>
				</view>
			</view>
			<view style="display: flex; justify-content: space-evenly;">
				<view class="flexBox" v-for="(item,index) in list" >
					<view class="box"  >
						<image :src="item.url" style="width: 80rpx; height: 80rpx;" mode=""></image>
						<p class="tip">{{item.title}}</p>
					</view>
					<image src="../../static/sell/Frame(1).png" v-if="index !== 3" style="width: 24rpx; height: 24rpx;  margin: 0 28rpx;" mode=""></image>
				</view>
			</view>
			
			<view class="flexBox" style=" margin-top: 80rpx;">
				<view class="flexBox_left" @click="goHire">
					<image src="@/static/Frame 2868/Group 52.png" class="imgBox1" mode=""></image>
						<view style="position: absolute;top:125rpx;left:24rpx" class="">
							<p style=" color: #ffffffcc;font-size: 26rpx;font-weight: 400;">海量用户</p>
							<p style=" color: #ffffffcc;font-size: 26rpx;font-weight: 400;">智能匹配</p>
						</view>
				</view>
				<view class="flexBox_right" @click="goHub">
					<image src="@/static/Frame 2868/Group 51.png" class="imgBox1" mode=""></image>
						<view style="position: absolute;top:125rpx;left:24rpx;">
							<p style=" color: #ffffffcc;font-size: 26rpx;font-weight: 400;">海量用户</p>
							<p style=" color: #ffffffcc;font-size: 26rpx;font-weight: 400;">智能匹配</p>
						</view>
				</view>
			</view>
			
			
		</view>
		
		<view class="flexBox" style="padding: 0 24rpx;height: 144rpx;border-radius: 16rpx;background: #e5ecf8ff;  margin: 52rpx 24rpx 0 24rpx;justify-content: space-evenly;">
			<view class="flexCol">
				<p style=" color: #161818ff;font-size: 40rpx;font-weight: 700;">免费估价</p>
				<p style=" color: #00000099;font-size: 28rpx;font-weight: 400;">评估快！准！</p>				
			</view>
			<view class="">
				<image src="../../static/sell/Frame 172.png" class="imgS"  mode=""></image>
				<image src="../../static/sell/Frame 172.png" class="imgS" mode=""></image>
				<image src="../../static/sell/Frame 172.png" class="imgS" mode=""></image>
			</view>
			<view class="">
				<button share="circle" class="btnS" @click="goGuess">去估价 >></button>
			</view>
		</view>
		<view class="content" @click="goMy" >
			<view class="flexBox" style="justify-content: space-between;">
				<p style=" color: #000000e6;font-size: 34rpx;font-weight: 500;">我的设备</p>
				<p style=" color: #00000099;font-size: 26rpx;font-weight: 400;">查看全部</p>
			</view>
			 <u-scroll-list v-if="list1 && list1.length>0">
				 <view class="">
					 <view class="" >
					 	<view  v-for="item in list1.slice(0,3)" >
					 	    <view class="items">
					 	    	<view class="imgBox">
					 	    		<image :src="item.image" style="width: 136rpx;height: 136rpx;" mode=""></image>
					 	    	</view>
					 			<view class="">
					 				<p style=" color: #000000e6;font-size: 28rpx;font-weight: 400;">{{item.category.name + item.brand.name + item.xinghao.name}}</p>
					 				<view class="flexBox" style="margin: 8rpx 0 24rpx 0;">
					 					<p class="font" style="border-right: 1px solid  #00000042; padding: 0 8rpx;">{{item.year || ''}}</p>
					 					<p class="font" style="border-right: 1px solid  #00000042; padding: 0 8rpx;">{{(item.hours || '0') + '小时'}}</p>
					 					<p class="font" style="padding: 0 8rpx;">{{item.brand.name}}</p>
					 					
					 				</view>
					 				<view class="flexBox" style="justify-content: space-between;">
					 					<p class="font" style="margin-right: 20rpx;">{{item.province}} - {{item.city}}</p>
					 					<p style=" color: #e63d27ff;font-weight: 600;font-size: 32rpx;">{{item.price}}万</p>
					 				</view>
					 			</view>
					 			
					 			
					 	    </view>
					 	</view>
					 </view>
				 </view>
			        
			    </u-scroll-list>
				<view v-else class="" style="margin-top: 2%;">
						<u-empty></u-empty>
				</view>
		</view>
		<view class="flexBox" style="justify-content: space-between;margin:24rpx ;">
			<view class="flexBox">
				<view class="" style="margin-right: 32rpx;  color: #00000066;font-size: 40rpx;font-weight: 500;" :class="active == '求租' ? 'activeB' : ''" @click="goSearch(2)">
					求租 
				</view>
				<view class="" style=" color: #00000066;font-size: 40rpx;font-weight: 500;" :class="active == '求购' ? 'activeB' : ''" @click="goSearch(1)">
					求购
				</view>
			</view>
			<view class="">
				<view class="" style="width: 35vw;">
					<u-input placeholder="请输入" prefixIcon="search" border="surround" v-model="keyword" shape="circle"
						@change="change" >
						<view slot="prefix" style="display: flex; align-items: center; justify-content: center;"
							>
							
							<text style="font-size: 24rpx; margin-right: 6rpx;" @click="goRot('/pages/subPages/moreChoose')">{{city_name ? city_name : '城市'}}</text>
							<u-icon name="arrow-down-fill" size="20rpx"></u-icon>
						</view>
				
					</u-input>
				</view>
			</view>
		</view>
		<view class="">
			<view v-if="list1 && list1.length>0">
				<view style="padding: 24rpx;"  v-for="item in list1">
					<item :info="item"></item>
				</view>
			</view>
			
			<view v-else class="" style="margin-top: 15%;">
					<u-empty></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import item from '@/component/sellItem/sellItem.vue'
	export default {
		components:{
			item
		},
		data() {
			return {
				keyword:'',
				lat:'',
				lng:'',
				city_name:'',
				active: '求租',
				list:[
					{
						url:'../../static/sell/Group 38.png',
						title:'提交信息'
					},{
						url:'../../static/sell/Group 37.png',
						title:'免费估价'
					},{
						url:'../../static/sell/Group 36.png',
						title:'撮合成交'
					},{
						url:'../../static/sell/Group 35.png',
						title:'领取车款'
					},
				],
				list1:[],
				type: 1,
			}
		},
		methods: {
			goGuess(){
				uni.navigateTo({
					url:'/pages/price/gusse'
				})
			},
			change(){
				this.getList()
			},
			goMy(){
				uni.navigateTo({
					url:'/pages/my/myDevice'
				})
			},
			goHire(){
				uni.navigateTo({
					url:'/pages/sellAndBuy/hire'
				})
			},
			goHub(){
				uni.navigateTo({
					url:'/pages/sellAndBuy/hub'
				})
			},
			goRot(r){
				uni.navigateTo({
					url:r
				})
			},
			getList(){
				uni.$u.http.post('/api/equip/equip_list',{
					orderby:1,
					page: 1,
					pagenum: 10,
					keyword:this.keyword,
					lat: this.lat,
					lng: this.lng,
					type:this.type
				}).then(res => {
					console.log(res);
					this.list1 = res.data.data
				}).catch(err => {
					console.log(err);
				})
			},
			goSearch(val){
				if(val ==1 ){
					this.type =1
					this.active = '求租'
				}else{
					this.type = 2
					this.active = '求购'
				}
				this.getList()
			}
		},
		onLoad() {
			this.getList()
		},
		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()
		}
	}
</script>

<style scoped lang="scss">
	.font{
		 color: #00000099;
		 font-size: 24rpx;
		 font-weight: 400;
	}
	.lala{
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		justify-content: space-between;
		height: 96rpx;
		background: linear-gradient(90deg, #ffffff12 0%, #ffffff4a 100%);
	}
	.sell{
		height: 96rpx;
		
		background: linear-gradient(90deg, #ffffff12 0%, #ffffff4a 100%);
	}
	.imgBox{
		width: 136rpx;
		height: 136rpx;
		margin-right: 24rpx;
		border-radius: 8rpx;
		opacity: 1;
		background: #ffffffff;
	}
	.items{
		width: 482rpx;
		height: 140rpx;
		border-radius: 16rpx;
		opacity: 1;
		background: #f0f2f5ff;
		margin-right: 24rpx;
		margin-top: 24rpx;
		padding: 16rpx;
		display: flex;
	}
.content{
	margin: 24rpx;
	padding: 32rpx;
	height: 296rpx;
	border-radius: 8rpx;
	opacity: 1;
	background: #ffffffff;
}
.btnS{
	width: 172rpx;
	height: 72rpx;
	border-radius: 36rpx;
	opacity: 1;
	background: #ffffffff;
	box-shadow: 0 4rpx 16rpx 0 #00000014;
	color: #2f67d3ff;
	 font-size: 32rpx;
	 font-weight: 700;
	 margin-left: 32rpx;
}
.top{
	height: 524rpx;
	opacity: 1;
	padding: 24rpx;
	background: linear-gradient(180deg, #cde1f0ff 0%, #cde1ef00 100%);
}
.imgS{
	width: 72rpx;
	height: 72rpx;
}
.flexBox{
	display: flex;
	align-items: center;
	
}
.right{
	height: 104rpx;
	opacity: 1;
	background: #f0f4fdff;
}
.box{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 1%;
	margin-top: 40rpx;
}
.flexCol{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-right: 28rpx;
	
}
.title{
	color: #000000e6;
	 font-size: 56rpx;
	 font-weight: 700;
}
.desc{
	color: #000000e6;
	 font-size: 28rpx;
	 font-weight: 400;
}
.tip{
	color: #00000099;
	 font-size: 26rpx;
	 font-weight: 400;
	 width: 104rpx;
}
.flexBox_left{
	width: 50%;
	margin-right: 40rpx;
	border-radius: 12rpx;
	position: relative;
}
.flexBox_right{
	width: 50%;
	border-radius: 12rpx;
	position: relative;
}
.activeB{
	 color: #000000e6!important;
	 font-size: 48rpx!important;
	 font-weight: 700!important;
}
.imgBox1{
	width: 44vw;
	height: 228rpx;
	object-fit: cover;
	position: relative;
}
</style>