<template>
	<view :class="[AppTheme]" class="container">
		<!-- 头部切换 -->
		<!-- #ifdef APP-PLUS||MP -->
		<u-sticky offsetTop="0" zIndex="99">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offsetTop="-44" zIndex="99">
				<!-- #endif -->
				<view class="data_display">
					<u-tabs :list="ubseclist" @click="casesort" keyName="name" :activeStyle="{
				        color: primary,
				        transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				        color: '#606266',
				        transform: 'scale(1)'
				    }" lineWidth="60" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :lineColor="primary"
						:scrollable="false">
					</u-tabs>
				</view>
			</u-sticky>

			<scroll-view scroll-y @scrolltolower="getseedlist(swiperCurrent, nowindex + 1)" class="seed_list">
				<view class="seed_item" v-for="(item, index) in seeddatalist" :key="index"
					@click="vilegedetail(item.id)">
					<view class="seed_item_tilbox">
						<view class="seed_item_hot" v-if="item.is_hot === 1">热门</view>
						<navigator open-type="navigate">
							<image class="seed_item_thumbnail" mode="aspectFill" :src="item.ripe_pic"></image>
						</navigator>
					</view>
					<view class="seed_item_delit">
						<view class="seed_delit_title">
							<view class="seed_dtitle_p1">{{ item.seed_name }}</view>
						</view>
						<view class="seed_delit_price">￥{{ item.price }}</view>
						<view class="seed_delit_yield">预估产量: {{ item.seed_yield }}kg/m²</view>
						<view class="seed_delit_yield" style="margin-top: 10rpx;">最小种植面积: {{ item.min_plant_area }}m²
						</view>
					</view>
				</view>
				<view class="nomorelist" v-if="nomorelist">没有更多数据了</view>
				<view class="footer_bottom"></view>
			</scroll-view>
	</view>
</template>
<script>
	import Seedapi from '@/api/seed/index.js'
	export default {
		components: {},
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				// 当前排序方式视图
				nowindex: 1,
				// 加载提示语句
				promptstatement: '提示语句',
				// 种子列表
				seeddatalist: [],
				seeddatalist_ice: null,
				ubseclist: [{
						name: '综合排序'
					},
					{
						name: '热度最高'
					},
					{
						name: '种植最多'
					},
					{
						name: '当前季节'
					}
				],
				nomorelist: false,
				swiperCurrent: 0,
				orderid: ''

			}
		},
		onLoad(options) {
			//获取种子列表
			this.orderid = options.orderid
			this.getseedlist(1, 1)
		},
		onShow: function() {},
		computed: {},
		methods: {
			getseedlistcase(type, p) {
				var that = this
				let data = {
					type: type,
					types: 1,
					orderid: that.orderid,
					p: p
				}
				if (!this.nomorelist) {
					Seedapi.getseedlist(data).then(res => {
						if (res.status === 1) {
							if (res.data !== null && res.data !== undefined && res.data.length > 0) {
								// 获取服务套餐详情集合
								that.seeddatalist = res.data
								this.nowindex = p
							}
						} else {
							that.$api.msg(res.msg)
							that.seeddatalist = null;
						}
					})
				}
			},
			//获取种子列表
			getseedlist(type, p) {

				var that = this
				let data = {
					type: type,
					p: p,
					orderid: that.orderid
				}
				if (!that.nomorelist) {
					Seedapi.getseedlist(data).then(res => {
						if (res.status == 1) {
							if (res.data !== null && res.data !== undefined && res.data.length > 0) {
								// 获取服务套餐详情集合
								res.data.forEach(item => {
									that.seeddatalist.push(item)
								})
								that.nowindex = p
							}
						} else {
							that.nomorelist = true
						}
					})
				}
			},
			vilegedetail(item) {
				uni.navigateTo({
					url: '/pagesB/pages/chooseland/seed/vilegedetail?seedid=' + item
				})
			},
			// 切换排序视图
			casesort(index) {
				console.log(index, "index")
				var that = this
				if (index !== null && index !== undefined) {
					that.nomorelist = false
					that.nowindex = 1

					if (that.swiperCurrent === index) {
						return
					} else {
						that.swiperCurrent = index.index
						that.orderlist = []
						that.getseedlistcase(that.swiperCurrent + 1, that.nowindex)
					}
				}
			},
			//判断是否为适宜季节
			judgeseason(seasonlist) {
				var that = this
				let nowmoth = new Date().getMonth() + 1
				let verificationresults = false
				if (seasonlist !== undefined && seasonlist !== null) {
					seasonlist.some(function(item, index) {
						if (nowmoth === item) {
							verificationresults = true
							return true
						}
					})
				} else {
					return
				}
				return verificationresults
			}
		}
	}
</script>
<style lang="scss">
	.nomorelist {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.container {
		background-color: #f1f1f1;
		min-height: 100vh;
	}

	.footer_bottom {
		width: 100%;
		height: 40rpx;
		background-color: #f1f1f1;
	}


	.data_display {
		background-color: #ffffff;
	}

	.colking_itemse {
		color: #56ab2f;
		border-bottom: 3px solid #56ab2f;
	}

	.load_window {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 160rpx;
		height: 100rpx;
		flex-wrap: wrap;
		background-color: rgba($color: #000000, $alpha: 0.7);
	}

	.promptstatement {
		width: 100%;
		font-size: 25rpx;
		color: #ffffff;
		text-align: center;
	}

	.seed_list {
		display: flex;
		justify-content: center;
		align-items: center;
		// 
	}

	.seed_item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// width: calc(100% - 50rpx);s
		margin: 20rpx;
		border-radius: 15rpx;
		background-color: #ffffff;
		padding: 15rpx 10rpx;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
	}

	.seed_item_tilbox {
		position: relative;
		width: 200rpx;
		height: 200rpx;
	}

	.seed_item_hot {
		position: absolute;
		left: 0;
		top: 0;
		background-color: red;
		font-size: 24rpx;
		color: #ffffff;
		margin-left: 5rpx;
		padding: 5rpx 10rpx;
		border-radius: 15rpx 0;
		z-index: 3;
	}

	.seed_item_thumbnail {
		position: absolute;
		object-fit: cover;
		border-radius: 15rpx;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.seed_item_delit {
		margin-left: 35rpx;
	}

	.seed_delit_title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.seed_dtitle_p1 {
		font-size: 30rpx;
		color: #000;
	}

	.seed_dtitle_p2 {
		background-color: #56ab2f;
		font-size: 24rpx;
		color: #ffffff;
		margin-left: 5rpx;
		padding: 7.5rpx 12.5rpx;
		border-radius: 0 20rpx;
	}

	.seed_delit_price {
		font-size: 26rpx;
		color: red;
		margin: 15rpx 0;
		font-weight: 800;
	}

	.seed_delit_yield {
		font-size: 24rpx;
		color: #999999;
	}
</style>
