<template>
	<view :class="[AppTheme]" class="container">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="农场认养" :titleStyle="{color:'#ffffff'}" :bgColor="primary" :autoBack="false" :fixed="true"
			:placeholder="true" :height="45">
			<view class="u-nav-slot" slot="left"></view>
		</u-navbar>
		<!-- #endif -->
		<swiper v-if="carouselListimg.length > 0" :interval="3000" :current="currentIndex" :style="wrapper_style"
			@change="changeSwiper">
			<swiper-item v-for="(item, index) in carouselListimg" :key="item.id" height="auto"
				@click="navtopage(index)">
				<view :id="'content-wrap' + index" style="width: 100%;">
					<image @load="setSwiperHeight" mode="widthFix" :src="item" style="width: 100%;"></image>
				</view>
			</swiper-item>
		</swiper>
		<view style="padding: 10rpx;">
			<u-notice-bar :text="announcetext" @click="goMessage" :color="primary" direction="column" mode="closable"
				speed="200"></u-notice-bar>
		</view>
		<view class="uliline"></view>
		<view class="column_button" v-if="vlist.length > 0">
			<view class="lettitle text-primary">监控显示</view>
			<u-icon name="arrow-right" @click="openjk()" labelSize="12" labelColor="#949494" labelPos="left"
				label="查看更多" size="14">
			</u-icon>
		</view>
		<view class="uliline" v-if="vlist.length > 0"></view>
		<view class="monitor_box" v-if="vlist.length > 0">
			<view class="monitor_item" v-for="(item, index) in vlist" :key="index">
				<image class="monitor_item_img" :src="item.imgurl"></image>
				<view class="ucinn">
					<u-icon @click="goVideo(item)" name="play-circle" size="40" color="#FFF"></u-icon>
				</view>
				<view class="vlist_title">{{ item.title }}</view>
				<view class="borintin" v-if="(index + 1) % 2 === 1"></view>
			</view>
		</view>
		<view class="column_button" v-if="gx_list.length > 0">
			<view class="lettitle text-primary">
				农场认养
			</view>
			<u-icon name="arrow-right" @click="openfarmlist()" labelSize="12" labelColor="#949494" labelPos="left"
				label="查看更多" size="13">
			</u-icon>
		</view>
		<view class="uliline" v-if="gx_list.length > 0"></view>
		<view class="adond_brup" v-if="gx_list.length > 0">
			<view class="reinitem" v-for="(item, index) in gx_list" :key="index" @click="orderBy(item.id)">
				<view class="imgren">
					<view class="leticon">认</view>
					<image :src="item.pic || emptyImage" :key="index" style="width: 220rpx;height: 220rpx;" mode="aspectFill"
						class="renitem_thu">
				</view>
				<view class="rightiation_bar">
					<view class="rightiation_bar_p1">{{ item.name }}</view>
					<view class="rightiation_bar_p2">收获：{{ item.bonusway }}</view>
					<view class="rightiation_bar_p3">
						<view class="right_text_p1">已售:</view>
						<view class="right_text_p2 text-primary">{{ item.sells }}</view>
						<view class="right_text_p1">剩余:</view>
						<view class="right_text_p2 text-primary">{{ item.num }}</view>
					</view>
					<progress :activeColor="primary" :percent="item.percent" stroke-width="3" />
					<view class="rightiation_bar_p3" :show-percent="false"
						style="justify-content: space-between;margin: 15rpx 0 0 0">
						<view class="right_buton_p1 text-neutral">￥{{ item.copies_price }}</view>
						<view class="right_buton_p2 bg-primary ">进行中</view>
					</view>
				</view>
				

			</view>
			<view class="uliline2"></view>
		</view>
		<Ugoods2 ref="goodlist"
			:datas="{show_title:true,title:'优选商品',text_color:$theme.primary,buynow_bg_color:$theme.primary}"></Ugoods2>
		<tabbar :primary="primary"></tabbar>
		<!-- 分享 -->
		<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
		<admyself :opshow="true"></admyself>
		<view class="leaveblank_bottom"></view>
	</view>
</template>
<script>
	import tabbar from '@/components/tabbar/tabbar.vue';
	import homeApi from '@/api/home/index.js';
	import Ugoods2 from '@/components/ui-component/U_goods2/m/index.vue';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				carouselList: [],
				carouselListimg: [], //轮播图
				p: 1,
				settingFile: getApp().globalData.siteinfo,
				gx_list: [],
				announce: [],
				announcetext: [],
				newsList: [],
				goodsList: [],
				sellList: [],
				vlist: [],
				showVideo: false,
				videoSrc: '',
				list: false,
				cetext: false,
				sharedata: null,
				currentIndex: 0,
				swiperHeight: 0
			};
		},
		components: {
			tabbar,
			Ugoods2
		},
		onLoad(options) {
			let that = this
			that.$bindid.getbindid(options, that.$store);
			that.initdata();
			that.getInfo();
			that.getAdver();
			that.homeInit();
			that.$init_config(2, function(res) {
				if (that.$config) {
					that.sharedata = that.$config.sharedata
				}
			})
		},
		onPullDownRefresh() {
			let that = this
			that.list = true;
			that.cetext = true;
			that.getInfo();
			that.getAdver();
			that.homeInit();
			that.$refs.goodlist.toBottom(1)
		},
		onReachBottom() {
			let that = this
			that.$refs.goodlist.toBottom()
		},
		onShow: function() {
			let that = this;
			that.$init_config();
			if (that.primary == '' || that.primary != that.$theme.primary) {
				that.primary = that.$theme.primary;
			}
			this.initdata();
			this.getInfo();
		},
		onShareAppMessage(res) {
			let that = this
			let data = {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			};
			return data;
		},
		onShareTimeline(res) {
			let that = this
			return {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			}
		},
		computed: {
			/** 样式 */
			wrapper_style() {
				const {
					swiperHeight,
				} = {
					swiperHeight: this.swiperHeight
				};
				return `
					height:${swiperHeight}px;
				`;
			}
		},
		methods: {
			initdata() {
				if (this.$config) {
					uni.setNavigationBarTitle({
						title: this.$config.shop.name
					});
					this.newsList = this.$config.cache1;
					this.goodsList = this.$config.cache3;
					this.sellList = this.$config.cache5;
					this.vlist = this.$config.vlist;
				}
			},
			//手动切换题目
			changeSwiper(e) {
				this.currentIndex = e.detail.current;
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			//动态设置swiper的高度
			setSwiperHeight() {
				let element = "#content-wrap" + this.currentIndex;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						if (this.swiperHeight < res[0].height) {
							this.swiperHeight = res[0].height;
						}
					}
				});
			},
			goVideo(e) {
				if (e.jumptype == 'webview') {
					let ad_link = encodeURIComponent(JSON.stringify(e.src));
					uni.navigateTo({
						url: '/pages/showhfive/showhfive?url=' + ad_link
					});
				} else {
					uni.navigateTo({
						url: `/pagesE/pages/broadcast/transmit?id=${e.id}`
					});
				}
			},
			openjk() {
				uni.navigateTo({
					url: `/pagesE/pages/broadcast/broadcast`
				});
			},
			openfarmlist() {
				uni.navigateTo({
					url: `/pagesE/pages/index/adoplist/adoitemlist/adoitemlist`
				});
			},

			navtopage(index) {
				homeApi.navtopage(this.carouselList[index]);
			},
			//详情页
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/pagesD/pages/product/product?id=${id}`
				});
			},
			//详情页
			navToDetailPage2(itemid) {
				debugger
				uni.navigateTo({
					url: '/pagesD/pages/product/product?id=' + itemid
				});
			},
			homeInit() {
				let res = homeApi.index().then(res => {
					var list = res.data.lunbo.filter(item => item.pid == 14);
					this.announce = res.data.announce;
					if (this.cetext) {
						this.announcetext = []
						this.cetext = false
					}
					res.data.announce.forEach(item => {
						this.announcetext.push(item.title);
					});
				});
			},
			getInfo() {
				let that = this;
				homeApi.buyIndex({
						p: 1,
						type: 1
					})
					.then(res => {
						if (res.status == 200) {
							that.gx_list = res.data;
						}
					});
			},
			getAdver() {
				homeApi.ad_advertisement({}).then(res => {
					if (res.status == 200) {
						var list = res.data.filter(item => item.pid == 13);
						if (list.length) {
							this.carouselList = list;
							this.carouselListimg = [];
							list.forEach(item => {
								this.carouselListimg.push(item.ad_pic);
							});
						} else {
							this.carouselList = 0;
						}
					}
				});
			},
			orderBy(id) {
				uni.navigateTo({
					url: `/pagesA/pages/adopt/adopt?id=${id}`
				});
			},
			goMessage(index) {
				this.$until.toarticle('', this.announce[index].id)
			}
		}
	};
</script>
<style lang="scss" scoped>
	.NewProducts {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 1rpx;
		box-sizing: border-box;
		min-height: 500rpx;
	}

	.place {
		width: 100%;
		margin: 25rpx 0;

		.place_location {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999;
			width: 92%;
			margin: 0 4%;

			.img_place {
				margin-right: 10rpx;
				width: 23rpx;
				height: 28rpx;
			}
		}

		.flex {
			margin-top: 28rpx;
			display: flex;
			justify-content: flex-start;

			.fff {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				margin-left: 37rpx;
			}

			.weather {
				margin-left: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
			}
		}
	}

	.messabout {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 30rpx);
		margin: 0 15rpx;
	}

	.mesleft {
		width: 85%;
	}

	.mesright {
		font-size: 26rpx;
		color: #000;
	}

	.badge_icon {
		width: 75rpx;
		height: 75rpx;
	}

	.grid_text {
		margin-top: 10rpx;
		text-align: center;
		width: 100%;
		color: #000000;
		font-size: 26rpx;
	}

	.leaveblank_bottom {
		height: 130rpx;
	}

	// .container {

	// }

	.column_button {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 25rpx;
	}

	.lettitle {
		display: flex;
		font-size: 34rpx;
	}

	.htititle {
		color: #999;
		font-size: 28rpx;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 10px;
		background-color: #ffffff;
		position: relative;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
	}

	.demo-pall {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 15rpx 0;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		color: #ffffff;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		color: red;
		font-size: 26rpx;
		font-weight: 700;
	}

	.demo-price2 {
		color: red;
		font-size: 24rpx;
		margin-left: 10rpx;
		text-decoration: line-through;
	}

	.demo-shop {
		font-size: 22rpx;
		margin-top: 5px;
	}

	.seed_dtitle_p2 {
		background-color: #ff8726;
		font-size: 22rpx;
		color: #ffffff;
		padding: 3.5rpx 7.5rpx;
		border-radius: 0 15rpx;
	}

	.f-header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 65rpx;
		width: 100%;
		background: #fff;
		margin: 10rpx;

		.center {
			text-align: center;
			display: flex;
			align-items: center;
			color: $tab-color-1;

			.line1,
			.line2 {
				width: 31rpx;
				height: 4rpx;
			}

			.line1 {
				margin-right: 10rpx;
			}

			.line2 {
				margin-left: 10rpx;
			}

			.title {
				font-size: 30px;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}

		image {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}

		.tit-box {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.tit {
			font-size: $font-lg + 2upx;
			color: $font-color-dark;
			line-height: 1.3upx;
		}

		.tit2 {
			font-size: $font-sm;
			color: $font-color-light;
		}

		.icon-you {
			font-size: $font-lg + 2upx;
			color: $font-color-light;
		}
	}

	.tttle {
		// color: #fff;
		// background-color: #56ab2f;
		// padding: 12.5rpx 27.5rpx;
		// font-weight: 700;
	}

	.uliline {
		width: 100%;
		background-color: #f5f5f5;
		height: 2rpx;
	}

	.uliline2 {
		width: 100%;
		background-color: #f5f5f5;
		height: 2rpx;
		margin: 25rpx 0;
	}

	.adond_brup {
		padding: 0 25rpx;
		margin: 25rpx 0;
	}

	.reinitem {
		display: flex;
		justify-content: left;
		align-items: flex-start;
		margin: 25rpx 0 0 0;

		.imgren {
			position: relative;
		}
	}

	.leticon {
		background-color: #ff8000;
		position: absolute;
		left: 0;
		top: 0;
		padding: 15rpx 15rpx 20rpx 15rpx;
		border-radius: 0 0 35rpx 35rpx;
		color: #ffffff;
		z-index: 9;
	}

	.renitem_thu {
		width: 220rpx;
		height: 220rpx;
	}

	.rightiation_bar {
		margin-left: 20rpx;
		width: 100%;
	}

	.rightiation_bar_p1 {
		color: #000;
		line-height: 38rpx;
		font-size: 28rpx;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1; 
	}

	.rightiation_bar_p2 {
		font-size: 24rpx;
		color: #434343;
		margin: 15rpx 0;
	}

	.rightiation_bar_p3 {
		display: flex;
		justify-content: flex-start;
		margin: 15rpx 0;
		align-items: center;
	}

	.right_text_p1 {
		color: #999;
		font-size: 22rpx;
	}

	.right_text_p2 {
		font-size: 24rpx;
		margin-right: 25rpx;
	}

	.right_buton_p1 {
		font-size: 32rpx;
		font-weight: 600;
	}

	.right_buton_p2 {
		color: #fff;
		border-radius: 30rpx;
		font-size: 26rpx;
		padding: 16rpx 30rpx;
	}

	.monitor_box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		margin: 15rpx 0;
	}

	.monitor_item {
		width: 50%;
		position: relative;
		margin-bottom: 15rpx;
	}

	.monitor_item_img {
		width: calc(100% - 30rpx);
		margin: 0 15rpx;
		height: 230rpx;
		border-radius: 10rpx;
	}

	.ucinn {
		position: absolute;
		left: 50%;
		top: 38%;
		transform: translate(-50%, -50%);
	}

	.content_box {
		box-shadow: $box-shadow;
		border-radius: 15rpx;
		width: 335rpx;
		margin: 0 calc(50% - 356rpx) 25rpx calc(50% - 355rpx);

		.new-img {
			width: 100%;
			height: 355rpx;
		}

		.message {
			box-sizing: border-box;
			padding: 10rpx;

			.message_bot {
				height: 84rpx;
				margin-top: 20rpx;
				border-top: 0.5rpx solid #FAFAFA;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.f_left {
					margin-top: 10rpx;
					font-size: 24rpx;

					.color_org {
						margin-top: 10rpx;
					}

					.old_price {
						color: #999;
						margin-top: 10rpx;
						text-decoration: line-through;
					}
				}

				.f_right {
					width: 56rpx;
					height: 56rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.tag {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;

		.tag-box {
			width: 200rpx;
			height: 113rpx;
			border: 1px solid $tab-color-1;
			color: $tab-color-1;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 24rpx;

			.tag-img {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.vue-ref {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.vlist_title {
		font-size: 26rpx;
		color: #000;
		width: calc(100% - 60rpx);
		margin: 15rpx 30rpx;
	}

	.borintin {
		width: 100vw;
		height: 5rpx;
		background-color: #f7f7f7;
	}
</style>
