<template>
	<!-- 蜂厂 -->
	<view ref="pagebox" class=" page">
	<!-- 	<view class="loading"  v-show="showloading">
			<view class="loading_box">
				<u-loading-icon color='#fff'></u-loading-icon>
				<text>loading...</text>
			</view>
		</view> -->
		<view class="tip_box" v-if="show">
			<div class="tip">
				<div class="txt">请将该蜂场所有蜂箱移迁后再进行此操作!</div>
				<div class="button" @click="show=false">返回</div>
			</div>
		</view>
		<u-overlay :show="show" ></u-overlay>
		<view class=" group_2 space-x-20 suosou-fc">
			<!-- <view class="flex-auto section">
				<view class="text_3">
					<view class="inp-let-pa">
						<image @click="aweepClick" class="image_6 inp-let-pa-zi" src="../../static/16994973961877418353.png" />
						<input v-model="qrcode" @input="searchFn" placeholder="蜂箱(自定义)编号搜索" class="input-text" />
					</view>
				</view>
			</view> -->
			<!-- <image @click="xinzeng" class="image_5" src="../../static/b219311a779cd27f0f95a049dd683092.png" /> -->
		</view>
		<!-- 蜂场列表 -->
		<view v-if="items.length>0" class=" list space-y-13">
			<view class="section_2 space-y-16" v-for="(item, index) in items" :key="index">
				<view class="  group_3 top-img">
					<view class=" items-baseline space-x-6">
						<text class="font_1">{{ item.name }}</text>
						<text class="font_2">{{ item.create_date }}</text>
					</view>
					<view class="dianbox" ref="bubble" @click.stop="HiddenClick(item)">
						<image class="image_7" src="/static/16994974061914098024.png"></image>
						<!-- 气泡框 -->
						<view v-if="item.ShowHidden">
							<view class="arrivalNavigation">
								<!-- <view class="d4"></view> -->
								<view class="sideNavigation">
									<view class="pop-text">
										<view @click="editFengchang(item)">编辑蜂场</view>
										<view @click="deleteFengchang(item)">删除蜂场</view>
									</view>
								</view>
							</view>
							<!-- 遮罩层 -->
							<view class="mask-box"></view>
						</view>
					</view>
				</view>
				<!-- 列表 -->
				<view class=" space-y-16">
					<view class=" group_3 space-x-10">
						<image class="image_8" src="../../static/16994974075140416617.png" />



						<text class="font_3 font-ml">{{ item.address }}</text>
					</view>
					<view class="">
						<!-- 温度 -->
						<view class="  group_3 wendu-b" v-if="false">
							<view class="">
								<image class=" image_9" src="../../static/温度.png" />
								<text class="font_3 font-ml">温度</text>
								<text class="font_3">{{item.temperature}}</text>
							</view>
							<view class="">
								<image class=" image_10" src="../../static/蜂箱-湿度.png" />
								<text class="font_3 font-ml">湿度</text>
								<text class="font_3">{{item.humidity}}</text>
							</view>

							<view class=" space-x-10">
								<image class=" image_11" src="../../static/16994974076527700865.png" />
								<text class="font_3 font-ml">风向</text>
								<text class="font_3">{{item.wind_direction}}</text>
							</view>
						</view>
						<!-- 品种 -->
						<view class="top-img  equal-division group_5">

							<view class="tac-dainlaing  group_6 equal-division-item space-y-8">
								<image class="image_12" src="../../static/105e3b74b27e00556d9a51b77f90736d.png" />
								<text class="font_4">{{item.bee_type_text}}</text>
							</view>

							<view class="tac-dainlaing  group_7 equal-division-item space-y-8">
								<image class="image_12" src="../../static/b98dbe4f082608897417a90315d1d9c2.png" />
								<text class="font_4">{{item.honey_source_text}}</text>
							</view>

							<view class="tac-dainlaing  group_7 equal-division-item space-y-8">
								<image class="image_12" src="../../static/65743e63d23e304849b6fd0ca5f045c8.png" />
								<text class="font_4">{{item.weight}}</text>
							</view>

							<view class="tac-dainlaing  group_7 equal-division-item space-y-8">
								<image class="image_12" src="../../static/e5e18447349367492c81f64ccec7ebcb.png" />
								<text class="font_4 text_4">{{item.attendance}}</text>
							</view>

							<view class="tac-dainlaing  group_7 equal-division-item space-y-8">
								<image class="image_12" src="../../static/12193860188cd3652959a39cbca3cda4.png" />
								<text class="font_4 text_4">{{item.warning}}</text>
							</view>

						</view>

						<view class="  group_8 equal-division_2 button-box">

							<view @click="todituFengchange(item)" class=" justify-start equal-division-item_3">
								<text class="font_6">地 图</text>
							</view>

							<view class=" equal-division-item_3 space-x-8" @click="tofx(item.id)">  
								<text class="font_6">蜂 箱</text>
								<text class="font_6">{{item.beehive_count}}</text>
							</view>

						</view>
					</view>

				</view>
			</view>
			<view class="addbutton">
				<view class="addbutton-box" @click="xinzeng">添加蜂场
					<image class="image_5" src="../../static/b219311a779cd27f0f95a049dd683092.png" />
				</view>
			</view>
		</view>
		
		<view v-else class="konghezi">
			<u-empty mode="list" text="暂无蜂场">
				<view class="tjbutton">
					<u-button @click="xinzeng" size="large" shape="circle" text="添 加" color="#23693f"></u-button>
				</view>
			</u-empty>
		</view>
	</view>
</template>
<script>
	import request from '../../utils/request'
	export default {
		components: {},
		props: {},
		data() {
			return {
				qrcode: '',
				items: [],
				page: 1,
				ShowHidden: false,
				showloading:false,
				show: false,
				tokenflag:false
			};
		},
		onShow() {
			// this.items=[]
			uni.showLoading({
			    title: '加载中...',
			    mask: true, 
			    success: function () {  
			        // 显示成功的回调  
			    },  
			});
			
			this.listData(this.page)
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
		},
		methods: {
			tofx(id){
				 uni.setStorageSync('targetId', id);
				uni.switchTab({
					url: '/pages/fengxiang/index'
				});
			},
			searchFn() {
				// 清除之前的定时器
				clearTimeout(this.timer);
				// 启动新的定时器,在5秒后触发 sendRequest 函数
				this.timer = setTimeout(() => {
					this.sendRequest();
				}, 1000);
			},
			sendRequest() {
				console.log(this.qrcode)
				this.listData(this.page, this.qrcode)
				// this.pageData('','',this.qrcode)
			},
			aweepClick() {
				wx.scanCode({
					onlyFromCamera: false, // 是否仅从相机启动,默认false  
					scanType: ['qrCode', 'barCode'], // 可以指定扫描的类型,比如二维码或者条形码,默认二者都有  
					success: res => { // 扫描成功后的回调  
						// console.log(res.result , '成功结果') // 打印扫描结果 
						this.qrcode = res.result
					},
					fail: res => { // 扫描失败后的回调  
						console.log(res, '失败结果') // 打印错误信息  
					}
				})
			},
			todituFengchange(item) {
				uni.navigateTo({
					url: `/pagesFengChang/components/map?info=${JSON.stringify(item)}`
				})
			},
			editFengchang(item) {
				console.log("编辑蜂场");
				console.log(item);
				uni.navigateTo({
					url: `/pagesFengChang/addfengchang/index?info=${JSON.stringify(item)}`
				})
			},
			deleteFengchang(item) {
				console.log(item,'itemitemitem');
				if(item.beehive_count==0){
					let that = this
					uni.showModal({
						title: "提示",
						content: '确定要删除蜂场:' + item.name + "?",
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								request.delete('/api/apiary/delete/' + item.id, {}).then(res => {
									that.listData(that.page)
									uni.showToast({
										icon: "none",
										title: "删除成功"
									})
								})
					
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}else{
					this.show=true
				}
				
			},
			HiddenClick(item) {
				this.items.forEach(e => {
					// 后台数据有一个是false就进
					if (item.ShowHidden == false) {
						// 将这边存储的数据也修改为false
						e.ShowHidden = false
					}
				})
				item.ShowHidden = !item.ShowHidden
				// this.ShowHidden = true
				this.$forceUpdate()
			},
			listData(page, qrcode) {
				this.showloading=true
				console.log(page, qrcode, '5555555555555')
				request.get('/api/apiary/index', {
					page,
					qrcode
				}).then(res => {
					if(res.code == 401){
						this.tokenflag = false
						uni.hideLoading()
					}else {
						this.tokenflag = true
						this.items = [...res.data.data]
					    console.log(this.items)
					    this.showloading=false
						uni.hideLoading()
					}
					
				})
				// console.log(res.data.data)

			},
			// 跳转到新增的页面 
			xinzeng() {
				if (this.tokenflag == true) {
					uni.navigateTo({
						url: '/pagesFengChang/addfengchang/index'
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
				
			}
		},
	};
</script>

<style scoped lang="scss">
	.loading {
		z-index: 10074;
		width: 224rpx;
		height: 224rpx;
		 background-color: rgba(0, 0, 0, 0.5);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	
		.loading_box {
			width: 100%;
			height: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
	
			image {
				width: 108rpx;
				height: 108rpx;
				display: block;
			}
	
			text {
				margin-top: 12rpx;
				width: 100%;
				text-align: center;
				display: block;
				font-size: 24rpx;
				font-family: Microsoft YaHei-Regular, Microsoft YaHei;
				font-weight: 400;
				color: #fff;
				line-height: 24rpx;
			}
		}
	
	}
	.tip_box{
		z-index: 10074;
		width: 544rpx;
		height: 238rpx;
		opacity: 1;
		border-radius: 30rpx;
		background: rgba(255, 255, 255, 1);
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		.tip{
			width: 100%;
			height: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			.txt{
				width: 360rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(68, 68, 68, 1);
			}
			.button{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10rpx;
				width: 222rpx;
				height: 64rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(35, 105, 63, 1);
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		
		}
	}
	.addbutton-box {
		padding: 10rpx 5rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #23693f;
		width: 300rpx;
		height: 60rpx;
		border-radius: 40rpx;
	}

	.addbutton {
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fengchangbox {
		width: 100vw;
		height: 100vh;
	}

	.dianbox {
		text-align: center;
		width: 100rpx;
		height: 50rpx;
	}

	// 气泡框的样式
	.pop-text {
		text-align: center;
		font-size: 40rpx;
		line-height: 100rpx;
		padding: 30rpx 20rpx;
	}

	.mask-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.1);
		z-index: 90;
	}

	.arrivalNavigation {
		width: 250rpx;
		position: absolute;
		right: 55rpx;
		z-index: 99;

		.sideNavigation {
			width: 248rpx;
			background-color: #ffff;
			box-shadow: 0px 0px 10px grey;
			color: #000;
			border-radius: 10rpx;

			li {
				height: 85rpx;
				text-align: center;
				line-height: 85rpx;
				font-size: 25rpx;
			}

		}

		.d4 {
			// position: absolute;
			//  	left: 140rpx;
			width: 0;
			height: 0;
			margin-left: 150rpx;
			margin-top: -20rpx;
			border-width: 20rpx;
			border-style: solid;
			border-color: transparent #333 transparent transparent;
			transform: rotate(90deg);
			/*顺时针旋转90°*/

		}
	}

	.tjbutton {
		margin-top: 20rpx;
		width: 230rpx;
	}

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

	.flex-auto {
		flex: 1
	}

	.button-box {
		display: flex;
		justify-content: space-around;
	}

	.wendu-b {
		display: flex;
		justify-content: space-between;
	}

	.top-img {
		display: flex;
		justify-content: space-between;
	}

	.tac-dainlaing {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.suosou-fc {
		text-align: right;
		// display: flex;
	}

	.font-ml {
		margin-left: 10rpx;
	}

	.inp-let-pa {
		// position: relative;  
		// text-align: center;
		display: flex;
		align-items: center;

	}

	.input-text {
		font-weight: 500;
	}

	.inp-let-pa-zi {
		margin-right: 10rpx;
		// position: absolute;
		// left: 100rpx;
		// top: 100rpx;
	}

	.page {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		bottom: 0px;
		background-color: #f7f7f7;
		// overflow-y: auto;
		// overflow-x: hidden;
	}

	.group {
		padding-left: 68rpx;
		padding-right: 28rpx;
	}

	.text {
		color: #7d7d7d;
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		font-weight: 700;
		line-height: 22rpx;
	}

	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		margin-left: 12rpx;
	}

	// .image {
	// 	width: 34rpx;
	// 	height: 22rpx;
	// }

	// .image_2 {
	// 	width: 30rpx;
	// 	height: 22rpx;
	// }

	// .image_3 {
	// 	width: 48rpx;
	// 	height: 23rpx;
	// }

	.space-x-82-reverse>view:not(:last-child),
	.space-x-82-reverse>text:not(:last-child),
	.space-x-82-reverse>image:not(:last-child) {
		margin-right: 164rpx;
	}

	.text_2 {
		color: #000000;
		font-size: 36rpx;
		font-family: AlibabaPuHuiTi;
		line-height: 33rpx;
	}

	.image_4 {
		filter: drop-shadow(0px 4rpx 4rpx #00000040);
		border-radius: 120rpx;
		width: 158rpx;
		height: 60rpx;
	}

	.group_2 {
		margin-top: 50rpx;
		padding: 0 48rpx;
	}

	.section {
		/*  padding: 8rpx 24rpx;
    background-color: #ffffff;
    height: 56rpx; */
		padding: 8rpx 24rpx;
		background-color: #ffffff;
		// width: 558rpx;
		border: solid 2rpx #ffffff;
		border-radius: 120rpx;
	}

	.image_6 {
		width: 40rpx;
		height: 40rpx;
	}

	.text_3 {
		// margin-right: 76rpx;
		color: #888888;
		font-size: 28rpx;
		font-family: Nunito;
		font-weight: 600;
		// line-height: 27rpx;
	}

	.image_5 {
		margin-left: 10rpx;
		width: 53rpx;
		height: 56rpx;
	}

	.list {
		background-color: #f7f7f7;
		margin-top: 36rpx;
		padding: 0 22rpx 30rpx;
	}

	.space-y-13-color {
		background-color: #f7f7f7;
	}

	.space-y-13>view:not(:first-child),
	.space-y-13>text:not(:first-child),
	.space-y-13>image:not(:first-child) {
		margin-top: 26rpx;
	}

	.section_2 {
		padding: 28rpx 0;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.space-y-16>view:not(:first-child),
	.space-y-16>text:not(:first-child),
	.space-y-16>image:not(:first-child) {
		margin-top: 32rpx;
	}

	.group_3 {
		padding: 0 32rpx;
	}

	.font_1 {
		font-size: 36rpx;
		font-family: 微软雅黑;
		line-height: 33rpx;
		font-weight: 700;
		color: #000000;
	}

	.font_2 {
		font-size: 20rpx;
		font-family: 微软雅黑;
		line-height: 19rpx;
		color: #888888;
	}

	.image_7 {
		margin-top: 20rpx;
		margin-right: 24rpx;
		width: 45rpx;
		height: 13rpx;
	}

	// .space-x-10>view:not(:first-child),
	// .space-x-10>text:not(:first-child),
	// .space-x-10>image:not(:first-child) {
	// 	margin-left: 20rpx;
	// }

	.image_8 {
		width: 22rpx;
		height: 26rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: 微软雅黑;
		line-height: 26rpx;
		color: #444444;
	}

	.image_9 {
		width: 18rpx;
		height: 26rpx;
	}

	.group_4 {
		margin-right: 28rpx;
	}

	.space-x-24>view:not(:first-child),
	.space-x-24>text:not(:first-child),
	.space-x-24>image:not(:first-child) {
		margin-left: 48rpx;
	}

	.image_10 {
		width: 20rpx;
		height: 26rpx;
	}

	.image_11 {
		width: 24rpx;
		height: 26rpx;
	}

	.equal-division {
		margin-top: 24rpx;
	}

	.group_5 {
		padding: 0 36rpx;
	}

	.group_6 {
		flex: 1 1 126rpx;
	}

	.image_12 {
		width: 48rpx;
		height: 48rpx;
	}

	.font_4 {
		font-size: 24rpx;
		// font-weight: 500;
		font-family: 微软雅黑;
		line-height: 25rpx;
		color: #444444;
	}

	.group_7 {
		flex: 1 1 126rpx;
		margin-left: 20rpx;
	}

	.equal-division-item {
		padding: 8rpx 0;
	}

	.space-y-8>view:not(:first-child),
	.space-y-8>text:not(:first-child),
	.space-y-8>image:not(:first-child) {
		margin-top: 16rpx;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: 微软雅黑;
		line-height: 22rpx;
		font-weight: 700;
		color: #444444;
	}

	.text_4 {
		text-transform: lowercase;
	}

	.group_8 {
		align-self: center;
		margin-top: 28rpx;
	}

	.equal-division-item_2 {
		padding: 20rpx 0;
		background-color: #23693f;
		border-radius: 111rpx;
		width: 222rpx;
		height: 64rpx;
	}

	.font_6 {
		font-size: 28rpx;
		font-family: 微软雅黑;
		line-height: 26rpx;
		color: #ffffff;
	}

	.equal-division-item_3 {
		padding: 20rpx 48rpx 20rpx 52rpx;
		background-color: #23693f;
		width: 150rpx;
		text-align: center;
		border-radius: 75rpx;
	}

	.space-x-8>view:not(:first-child),
	.space-x-8>text:not(:first-child),
	.space-x-8>image:not(:first-child) {
		margin-left: 16rpx;
	}

	.space-x-20>view:not(:first-child),
	.space-x-20>text:not(:first-child),
	.space-x-20>image:not(:first-child) {
		margin-left: 40rpx;
	}

	.equal-division_5 {
		margin-top: 340rpx;
	}

	.section_5 {
		background-color: #ffffff;
		border-radius: 60rpx 60rpx 0 0;
		border: solid 2rpx #f7f7f7;
	}

	.group_18 {
		flex: 1 1 150rpx;
	}

	.equal-division-item_6 {
		padding: 12rpx 0;
	}

	.space-y-6>view:not(:first-child),
	.space-y-6>text:not(:first-child),
	.space-y-6>image:not(:first-child) {
		margin-top: 12rpx;
	}

	.font_8 {
		font-size: 24rpx;
		font-family: Poppins;
		line-height: 22rpx;
		color: #888888;
	}

	.text_8 {
		color: #a6a6a6;
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_9 {
		color: #89c28c;
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.space-y-4>view:not(:first-child),
	.space-y-4>text:not(:first-child),
	.space-y-4>image:not(:first-child) {
		margin-top: 8rpx;
	}

	.text_10 {
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_11 {
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.image_14 {
		filter: drop-shadow(0px 4rpx 4rpx #00000040);
		width: 48rpx;
		height: 48rpx;
	}

	.text_12 {
		font-size: 22rpx;
		line-height: 20rpx;
	}
</style>