<template>
	<view class="">
		<view class="head" style="font-weight:700">
			<u-navbar title="首页" :autoBack="true" leftIconSize="0rpx">
			</u-navbar>
		</view>
		<view class="main">
			<!-- 轮播图 -->
			<view class="swiper" @click="tologin">
				<u-swiper :list="list5" @change="e => current = e.current" height="320rpx" radius="24rpx">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>
			<view class="mainList">
				<view class="listName">
					生物质列表
				</view>
				<view class="">
					<u-tabs @click="switchTAb" :list="list1"
						:activeStyle="{color: 'rgba(0,0,0,0.9)', fontWeight: 'bold', transform: 'scale(1.05)'}"
						:scrollable="false" :lineWidth="43" :lineHeight="4"></u-tabs>
					<!-- 卖家信息列表 -->
					<view class="sellerList" v-if="cur==0">
						<view class="sellerListhead">
								<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex' @ed='ed'
									:height="24"></ren-dropdown-filter>
									<!-- 我页不知道这个下拉框具体啥样式的，没调整，到时候自己改一下吧 -->
						</view>
						<view class="listCard flexA" v-for="(item,index) in sellerList" :key="index"
							@click="tosellerMessageDetail(item)">
							<view class="cardImg">
								<img src="/static/ic_4@2x.png" alt="">
							</view>
							<view class="cardTitle">
								<view class="cardTitlename">{{item.name}}</view>
								<view class="cardTitleadress flexA">
									<img src="/static/ic-loc@2x.png" alt="">
									<text>{{item.address}}</text>
								</view>
								<view class="cardTitleP flexJ">
									<view class="cardTitlePimg flexA">
										<img src="/static/ic_6@2x.png" alt="">
										{{item.title}}
									</view>
									<view class="cardTitletime">
										{{item.time}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 买家信息列表 -->
					<view class="buyerList" v-if="cur==1">
						<view class="buyerCard flexJ" v-for="(item,index) in 4" :key="index" @click="toauditPagetype">
							<view class="cardLeft">
								<view class="cardLeftname">作物-玉米</view>
								<view class="cardTitletime">2022-05-28 15:30</view>
							</view>
							<view class="cardTitlePimg flexA" style="margin-right: 24rpx;">
								<img src="/static/ic_6@2x.png" alt="">
								张小曼
							</view>
						</view>
					</view>
					<!-- 土地信息列表 -->
					<view class="sellerList" v-if="cur==2">
						<view class="listCard flexA" v-for="(item,index) in landList" :key="index" @click="tolandDetail">
							<view class="cardImg">
								<img src="/static/ic_4@2x.png" alt="">
							</view>
							<view class="cardTitle">
								<view class="cardTitlename">{{item.name}}</view>
								<view class="cardTitleadress flexA">
									<img src="/static/ic-loc@2x.png" alt="">
									<text>{{item.address}}</text>
								</view>
								<view class="cardTitleP flexJ">
									<view class="cardTitlePimg flexA">
										<img src="/static/ic_6@2x.png" alt="">
										{{item.title}}
									</view>

									<view class="cardTitletime">
										{{item.time}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 发布 -->
		<view class="release" @click="open">
			<img src="/static/ic_7@2x.png" alt="">
		</view>
		<!-- <navigator hover-class="none" url="/pages/popup/popup">领券</navigator> -->
		<!-- 弹出层 -->
		<!-- <view class="popup"> -->
		<view class="">
			<u-popup :show="show" mode="bottom" @close="close" @open="open">
				<view class="wraper">
					<view class="flexC popup1">
						<view class="popItem" @click="tosellerRelease">
							<view class="popImg">
								<img src="/static/ic_13@2x.png" alt="">
							</view>
							<view class="popName">我是卖家</view>
						</view>
						<view class="popItemT" @click="tobuyersRelease">
							<view class="popImg">
								<img src="/static/ic_14@2x.png" alt="">
							</view>
							<view class="popName">我是买家</view>
						</view>
						<view class="popItem" @click="tolandRelease">
							<view class="popImg">
								<img src="/static/ic_15@2x.png" alt="">
							</view>
							<view class="popName">土地信息发布</view>
						</view>
					</view>
					<view class="tui" @click="close">
						<img src="/static/ic-close@2x.png" alt="">
					</view>
				</view>
			</u-popup>
		</view>
		<!-- </view> -->
		<!-- 底部导航栏 -->
		<view class="" style="height: 200rpx;"></view>
		<view class="">
			<Tabbar :idx="0"></Tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show: false,
				status: 0,
				current: 0,
				cur: 0,
				type:1,
				filterData: [
					[{
						text: '默认排序',
						value: ''
					}, {
						text: '默认排序1',
						value: 1
					}, {
						text: '默认排序2',
						value: 2
					}, {
						text: '默认排序3',
						value: 3
					}],
					[{
						text: '距离优先',
						value: ''
					}, {
						text: '类型1',
						value: 1
					}, {
						text: '类型2',
						value: 2
					}, {
						text: '类型3',
						value: 3
					}],
					[{
						text: '类型',
						value: ''
					}, {
						text: '玉米1',
						value: 1
					}, {
						text: '大豆2',
						value: 2
					}, {
						text: '高粱3',
						value: 3
					}],
				],
				defaultIndex: [0, 0, 0],
				list5: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				list1: [{
					name: '卖家信息列表',
				}, {
					name: '买家信息列表',
				}, {
					name: '土地信息列表'
				}],
				sellerListhead: [{
					name: '默认排序',
				}, {
					name: '距离优先',
				}, {
					name: '玉米'
				}],
				sellerList: [{
					id: 1,
					status: 1,
					url: "",
					name: "海南妃子笑荔枝5斤",
					address: "天津市南开区鑫茂科技园C1座",
					expertise: "擅长领域：小鼠银杏病",
					title: "张小曼",
					time: "2022-05-28 15:30",
				}, {
					id: 2,
					status: 2,
					url: "",
					name: "海南妃子笑荔枝5斤",
					address: "天津市南开区鑫茂科技园C1座",
					expertise: "擅长领域：小鼠银杏病",
					title: "张小曼",
					time: "2022-05-28 15:30",
				}, {
					id: 3,
					status: 3,
					url: "",
					name: "海南妃子笑荔枝5斤",
					address: "天津市南开区鑫茂科技园C1座",
					expertise: "擅长领域：小鼠银杏病",
					title: "张小曼",
					time: "2022-05-28 15:30",
				}, {
					id: 4,
					status: 4,
					url: "",
					name: "海南妃子笑荔枝5斤",
					address: "天津市南开区鑫茂科技园C1座",
					expertise: "擅长领域：小鼠银杏病",
					title: "张小曼",
					time: "2022-05-28 15:30",
				}, ],
				landList: [{
					id: 1,
					status: 1,
					url: "",
					name: "土地是包含地球特定地域表面及其以上和以下的大气、水源充足啦啦啦啦啦",
					address: "天津市南开区鑫茂科技园C1座",
					title: "张小曼",
					time: "2022-05-28 15:30",
					type:2
				}, {
					id: 2,
					status: 2,
					url: "",
					name: "土地是包含地球特定地域表面及其以上和以下的大气、水源充足啦啦啦啦啦",
					address: "天津市南开区鑫茂科技园C1座",
					title: "张小曼",
					time: "2022-05-28 15:30",
					type:2
				}, {
					id: 3,
					status: 3,
					url: "",
					name: "土地是包含地球特定地域表面及其以上和以下的大气、水源充足啦啦啦啦啦",
					address: "天津市南开区鑫茂科技园C1座",
					title: "张小曼",
					time: "2022-05-28 15:30",
					type:2
				}, {
					id: 4,
					status: 4,
					url: "",
					name: "土地是包含地球特定地域表面及其以上和以下的大气、水源充足啦啦啦啦啦",
					address: "天津市南开区鑫茂科技园C1座",
					title: "张小曼",
					time: "2022-05-28 15:30",
					type:2
				}, ]
			}
		},
		onLoad() {

		},
		onShow() {
			uni.hideTabBar()
		},
		methods: {
			toauditPagetype(e){
				uni.navigateTo({
					url: `/pages/index/auditPage?type=${this.type}&status=${2}`
				})
			},
			tologin() {
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			tolandRelease() {
				uni.navigateTo({
					url:'/pages/index/landRelease'
				})
			},
			tosellerRelease() {
				uni.navigateTo({
					url:'/pages/index/sellerRelease'
				})
			},
			switchTAb(e) {
				console.log(e);
				this.cur = e.index
			},
			tosellerMessageDetail(item) {
				uni.navigateTo({
					url: `/pages/index/sellerMessageDetail?status=${item.status}`
				})
			},
			tolandDetail(item) {
				uni.navigateTo({
					url: `/pages/index/auditPage?status=${item.status}&type=${item.type}`
				})
			},
			tobuyersRelease() {
				uni.navigateTo({
					url: '/pages/index/buyersRelease'
				})
			},
			open() {
				// console.log('open');
				this.show = true

			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		// height: 100%;
		background-image: linear-gradient(to right, #fff, #dff4ff);
	}

	.u-navbar__content.data-v-75dad532 {
		// background-color: #fff !important;
		background-image: linear-gradient(to right, #fff, #dff4ff) !important;
	}

	.u-status-bar {
		background-image: linear-gradient(to right, #fff, #dff4ff) !important;
	}

	.head {
		width: 100%;
		height: 176rpx;
	}

	.main {
		width: 686rpx;
		margin: 0rpx auto;

	}

	// 轮播图
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}


	.u-tabs__wrapper__nav {
		// justify-content: space-around;
	}

	.u-tabs__wrapper__nav__item__text {
		// margin-right: 64rpx;
	}

	.u-tabs__wrapper__nav__line {
		background: linear-gradient(90deg, rgba(99, 217, 218, 1) 0%, rgba(99, 217, 218, 0) 100%) !important;
		left: -50rpx;
	}
	.listName {
		margin-top: 32rpx;
		margin-bottom: 24rpx;
		color: rgba(0,0,0,0.9);
		font-size: 32rpx;
		font-weight: 700;
	}

	.sellerList {
		margin-top: 24rpx;
	}
	.sellerListhead {
		font-size: 24rpx !important;
		height: 48rpx !important;
		background-color:transparent!important;
		z-index: 999;
	}

	.sellerListheaditem {
		width: 222rpx;
		// padding: 8rpx 62rpx;
		padding: 8rpx 0;
		border-radius: 52rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		color: rgba(65, 171, 172, 1);
		font-size: 24rpx;
		margin-right: 26rpx;
	}

	.sellerListheaditem:last-child {
		margin-right: 0rpx;
	}

	.listCard {
		width: 686rpx;
		border-radius: 16rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		margin-bottom: 24rpx;
		margin-top: 16rpx;
	}

	.cardImg {}

	.cardImg>img {
		width: 200rpx;
		height: 200rpx;
		opacity: 1;
	}

	.cardTitle {
		width: 100%;
		margin-left: 16rpx;
		// padding-right: 16rpx;
		padding: 28rpx 16rpx 28rpx 0rpx;
	}

	.cardTitlename {
		color: rgba(0, 0, 0, 0.9);
		font-size: 28rpx;
		font-weight: 700;
		// margin-top: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2; // 控制多行的行数
		-webkit-box-orient: vertical;

	}

	.cardTitleadress {
		color: rgba(0, 0, 0, 0.4);
		font-size: 24rpx;
		margin: 16rpx 0 24rpx;
	}

	.cardTitleadress>text {
		width: 324rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cardTitleadress>img {
		width: 32rpx;
		height: 32rpx;
		opacity: 1;
		margin-right: 8rpx;
	}

	.cardTitleP {}

	.cardTitlePimg {
		color: rgba(0, 0, 0, 0.26);
		font-size: 22rpx;
	}

	.cardTitlePimg>img {
		width: 40rpx;
		height: 40rpx;
		opacity: 1;
		margin-right: 8rpx;
	}

	.cardTitletime {
		color: rgba(0, 0, 0, 0.26);
		font-size: 22rpx;
	}

	.release {
		position: fixed;
		right: 0;
		bottom: 196rpx;
	}

	.release>img {
		width: 112rpx;
		height: 112rpx;
		opacity: 1;
	}

	.buyerList {
		width: 100%;
		height: 100%;
	}

	.buyerCard {
		width: 686rpx;
		height: 160rpx;
		border-radius: 16rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 4rpx 24rpx 0 rgba(101, 101, 101, 0.03);
		margin-bottom: 16rpx;
	}

	.cardLeft {
		margin-left: 24rpx;
	}

	.cardLeftname {
		color: rgba(0, 0, 0, 0.9);
		font-size: 32rpx;
		font-weight: 700;
		margin-bottom: 24rpx;
	}

	.popup1 {
		justify-content: space-between;
		padding: 64rpx 240rpx 0 240rpx;
	}

	.wraper {
		position: fixed;
		bottom: -193rpx;
		left: -171rpx;
		width: 1096rpx;
		height: 622rpx;
		z-index: 10;
		background-color: #FFFFFF;
		border-radius: 50%;
		padding-top: 40rpx;
		text-align: center;
	}

	.popItem {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.popItemT {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: -56rpx;
	}

	.popImg {}

	.popImg>img {
		width: 128rpx;
		height: 128rpx;
		// margin-bottom: 24rpx;
		opacity: 1;
	}

	.popName {
		color: rgba(0, 0, 0, 0.9);
		font-size: 28rpx;
	}

	.tui {
		margin: 64rpx auto;
	}

	.tui>img {
		width: 48rpx;
		height: 48rpx;
	}
</style>