<template>
	<!-- 蜂箱目录 -->
	<view class=" page">
		<!-- <view class="loading" v-if="showloading">
			<view class="loading_box">
				<u-loading-icon color='#fff'></u-loading-icon>
				<text>loading...</text>
			</view>
		</view> -->
		<!-- <view class="tip_box">
			<div class="tip">
				<div class="txt">请将该蜂场所有蜂箱移迁后再进行此操作！</div>
				<div class="button">返回</div>
			</div>
		</view>
		<u-overlay :show="show" ></u-overlay> -->
		<!-- <u-toast ref="uToast"></u-toast> -->
		<view class="padding-box">
			<view class="serachtab-box">
				<view class="scan-box">
					<view class="section_3">
						<view class="text_3 search-box">
							<image @click="aweepClick" class="image_6 image-text-tu" src="../../static/扫描.png" />
							<input type="text" v-model="qrcodevalue" @input="searchFn" placeholder="蜂箱（自定义）编号搜索" />
						</view>
					</view>
					<image @click="xinzeng" class="scan-img" src="/static/新增蜂箱.png" />
				</view>
				<view class="tabs">
					<u-tabs :list="tabitems" @click="clicktabs($event)" :current='currentindex'></u-tabs>
				</view>
			</view>
			<!-- listData.length > 0 -->
			<view v-if="listData.length > 0 " style="margin-top: 130rpx;">

				<view class=" group_6">

					<view class="space-y-13">
						<view class="list-item" v-for="(item, index) in listData" :key="index">

							<view class="group_7 bianhao-top-yi">
								<view class="bianhao-zuo">
									<text class="font_2" @click="detilsq(item)">{{item.name}}</text>
									<view class="  text-wrapper"
										:id="item.status_text == '在线' ? 'text-wrapper-bgc1' : 'text-wrapper-bgc2'">
										<text class="font_33" @click="detilsq(item)">{{item.status_text}}</text>
										<!-- <text class="font_3">在线</text> -->
									</view>

									<image v-if="item.warning_battery_low" @click="addyujings(item)" class=" image_7 image_8"
										src="../../static/蜂箱-电量预警.png" />
									<image v-if="item.warning_shake" @click="addyujings(item)" class=" image_7 image_9"
										src="../../static/蜂箱-震动预警.png" />
									<image v-if="item.warning_temperature" @click="addyujings(item)" class=" image_7 image_10"
										src="../../static/蜂箱-温度预警.png" />
									<image v-if="item.warning_humidity" @click="addyujings(item)" class=" image_7 image_11"
										src="../../static/蜂箱-湿度预警.png" />
									<image v-if="item.warning_weight" @click="addyujings(item)" class=" image_7 image_12"
										src="../../static/蜂箱-重量预警.png" />
									<image class=" image_7 image_13" @click="addyujings(item)" src="../../static/蜂箱-蜂场预警.png"
										v-if="item.warning_attendance" />
								</view>

								<!-- 按钮 -->
								<view class="" style="display: flex;">
									<view class="shuaxin" @click="btnsx(item)">
										<image src="https://api.ccttiot.com/smartmeter/img/static/uQyHxbK49U3S5f4uLU6m"
											mode=""></image>
									</view>
									<view @click.stop="HiddenClick(item)" class="dianbox">
										<image class="image_14" src="/static/16994974061914098024.png" />
									</view>
								</view>

							</view>
							<!-- 气泡框 -->
							<view v-if="item.ShowHidden">
								<view class="arrivalNavigation">
									<!-- <view class="d4"></view> -->
									<view class="sideNavigation">
										<view class="pop-text">
											<view @click="detils(item)">查看详情</view>
											<view @click="addyujing(item)">查看预警</view>
											<view @click="hiveTare(item)">重量去皮</view>
											<view @click="anewname(item)">重新命名</view>
											<view @click="migrtionHive(item)">迁移蜂场</view>
											<view @click="deleteHive(item)">删除蜂箱</view>
											<view @click="fenx(item)">分享蜂箱</view>
										</view>
									</view>
								</view>
								<!-- 遮罩层 -->
								<view @click.stop="tanceng(item)" class="mask-box"></view>
							</view>
							<!-- 向上弹窗 -->

							<u-popup :closeOnClickOverlay="false" :round="30" :show="flage" mode="center"
								:safeAreaInsetBottom="true" overlayOpacity="0.1">
								<view class="popup-box">
									<view class="popup-top-text popup-boder-m">
										<view>重新命名</view>
										<view @click="flageupdate">X</view>
									</view>
									<view class="popup-boder-m">
										<u--input shape="circle" placeholder="请输入内容" border="surround"
											v-model="form.inputvalue"></u--input>
									</view>
									<view class="popup-button-b">
										<u-button @click="confirmname" color="#23693f" shape="circle" type="primary"
											text="确 定"></u-button>
									</view>
								</view>
							</u-popup>

							<!-- <view class="xiugainame" v-if="flage">
                            	<view class="mm">
                            		<text>重新命名</text> <text @click="flageupdate">X</text>
                            	</view>
								<input type="text" v-model="form.inputvalue"/>
								<view class="btn" @click="confirmname">
									确定
								</view>
                            </view>
							<view class="maskname" v-if="flage"></view> -->



							<view class="d-baseline" style="display: flex;">
								<text class="font_4" style="padding-top: 20rpx;">{{item.qrcode}}</text>
								<text class="font_4 text_6" style="padding-top: 20rpx;">丨 {{item.update_time}}</text>
								<text class="font_4 text_7" style="padding-top: 20rpx;">丨</text>
								<text class="font_4 text_8" style="padding-top: 20rpx;">{{item.address}}</text>

							</view>
							<view class="felx-99">
								<!-- 重量 -->
								<view class="group_7 view_3">
									<view class="flex-taxt">
										<image class=" image_15" src="../../static/重量.png" />
										<text class="font_5 text_9 text-l">重量</text>
										<text class=" font_5 text_13"
											v-if="item.weight_day_text">{{item.weight_day_text}}</text>
										<text class=" font_5 text_13" v-else>{{item.weight_day}}</text>
									</view>
									<view class="flex-taxt">
										<image class=" image_16" src="../../static/蜂箱-温度.png" />
										<text class="font_5 text_9 text-l">箱内</text>
										<text class=" font_5 text_13">{{item.temperature_in_box.substring(0, 3) < -40 || item.temperature_in_box.substring(0, 3) > 100 ? '--' : item.temperature_in_box}}</text>
									</view>
									<view class="flex-taxt">
										<image class=" image_17" src="../../static/蜂箱-湿度.png" />
										<text class="font_5 text_9 text-l">箱内</text>
										<text class=" font_5 text_13">{{item.temperature_in_box.substring(0, 3) < -40 || item.temperature_in_box.substring(0, 3) > 100? '--' : item.humidity_in_box}}</text>
									</view>
								</view>
								<!-- 箱内温度 -->
								<view class="group_7 view_3">

									<view class="flex-taxt">
										<image class=" image_15" src="../../static/蜂箱-出勤.png" />
										<text class="font_5 text_9 text-l">出勤</text>
										<text class=" font_5 text_13"
											v-if="item.attendance_day_text">{{item.attendance_day_text}}</text>
										<text class=" font_5 text_13" v-else>{{item.attendance_day}}</text>
									</view>
									<view class="flex-taxt">
										<image class=" image_16" src="../../static/蜂箱-温度.png" />
										<text class="font_5 text_9 text-l">箱外</text>
										<text class=" font_5 text_13">{{item.temperature_out_box.substring(0, 3) < -40 || item.temperature_out_box.substring(0, 3) > 100 ? '--' : item.temperature_in_box}}</text>
									</view>
									<view class="flex-taxt">
										<image class=" image_17" src="../../static/蜂箱-湿度.png" />
										<text class="font_5 text_9 text-l">箱外</text>
										<text class=" font_5 text_13">{{item.temperature_out_box.substring(0, 3) < -40 || item.temperature_out_box.substring(0, 3) > 100 ? '--' :item.humidity_out_box}}</text>
									</view>


								</view>
								<!-- 箱内湿度 -->
								<view class="group_7 view_3">

									<view class="flex-taxt1">
										<image class=" image_15" src="../../static/蜂箱-电量.png" />
										<text class="font_5 text_9 text-l">电量</text>
										<text class=" font_5 text_13">{{item.battery}}</text>
									</view>
									<view class="group_8 space-x-6 flex-taxt2" @click="warmbuts(item)">
										<image class=" image_19" src="../../static/加热.png" />
										<text class="font_5">加热</text>
										<switch  @change="warmbut(item)" disabled="disabledflag"
											:checked="item.heat == 1 ? true : false" class=" image_201"
											:color="'#3a942b'" style="transform:scale(0.5)"/>
									</view>
									<view class="group_9 flex-taxt3" @click="fenlampbuts(item)">
										<image class=" image_21" src="../../static/蜂箱-风扇.png" />
										<text class="font_5 text_15">风扇</text>
										<switch @change="fenlampbut(item,index)" disabled="disabledflag"
											:checked="item.fan == 1 ? true : false" class=" image_201"
											:color="'#3a942b'" style="transform:scale(0.5)" />
									</view>
								</view>
							</view>

						</view>
						<view class="warm-tip">
							- 没有更多了, 亲！ -
						</view>
					</view>

					<!-- <view class=" section_3 space-y-7">
          </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>

		<u-picker @cancel="showfengzhong=false" @confirm="confirmfengzhong" :show="showfengzhong"
			:columns="fengzhongcolumns"></u-picker>

		<!-- 二维码展示 -->
		<view class="mask"
			style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-color: #fff;z-index: 98;text-align: center;"
			v-if="ewmflag" @click="ewmflag = false">
			<view class="ewm" style="margin-top: 400rpx;z-index: 99;">
				<image :src="ewmpic" mode=""></image>
			</view>
			<view class="" @click="ewmflag = false"
				style="width: 200rpx;text-align: center;height: 80rpx;line-height: 80rpx;border: 1px solid #333;margin: auto;margin-top: 50rpx;">
				关闭分享
			</view>
		</view>

		<!-- 加载状态 -->


		<!-- 	<view class="maskgun" v-if="maskgun"></view> -->

	</view>
</template>

<script>
	import request from '../../utils/request'
	export default {
		components: {},
		data() {
			return {

				maskgun: false,
				curren: '',
				qrcodevalue: '', // 搜索框
				fengzhongcolumns: [
					[]
				],
				showfengzhong: false,
				form: {
					inputvalue: ''
				},
				props: {},
				popName: '',
				flage: false,
				color: '#FFCC33',
				items: [],
				tabitems: [{
					name: '全部'
				}],
				listData: [],
				page: 1,
				timer: null,
				updataname: {
					name: '',
					id: null
				},
				switchk: true,
				showloading: false,
				checkid: '',
				currentindex: 0,
				show: true,
				ewmpic: '',
				ewmflag: false,
				disabledflag: false,
				tokenflag: false
			};
		},

		onShow() {
			uni.showLoading({
				title: '加载中...',
				mask: true,
				success: function() {
					// 显示成功的回调  
				},
			});
			this.loadData();
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},
		onHide() {
			uni.removeStorageSync('targetId');
			// Clear the interval when the component is destroyed
			clearInterval(this.intervalId);
		},
		onPullDownRefresh() {
			// this.listData = []
			setTimeout(() => {
				this.loadData();
			}, 2000)
		},
		watch: {
			id(newId, oldId) {
				// 在这里执行你的监听操作，比如触发事件、调用函数等
				console.log("ID 发生变化：" + newId);
			}
		},
		methods: {
			backToTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的顶部  
					duration: 1 // 滚动动画的持续时间，单位 ms  
				});
			},
			async loadData() {
				// 先执行获取数据的方法
				await this.getfengchangList();

				// 获取targetId

				setTimeout(() => {
					const targetId = uni.getStorageSync('targetId');
					if (targetId) {
						// 如果存在，赋值给this.checkid
						this.checkid = targetId;
						const index = this.tabitems.findIndex(item => item.id === this.checkid);

						// 将索引赋值给this.currentindex
						this.currentindex = index;
						this.pageData('', this.checkid)
					} else {
						this.getfengchangList()
					}
				}, 300);
				// this.refresh();
				// 设置定时刷新
				// this.intervalId = setInterval(() => {

				// }, 5000);
			},
			refresh() {
				if (this.checkid == '') {
					this.getfengchangList()
				} else {
					this.pageData('', this.checkid)
				}
			},
			fenlampbut(item) {
				if (this.switchk) {
					this.switchk = false
					request.post('/api/beehive/fanSwitch/' + item, {}).then(res => {
						// this.refresh()
						request.get('/api/beehive/detail/' + item, {}).then(res => {
							const newData = res.data.data; // 提取新数据  
							// 查找具有相同id的项  
							const existingItem = this.listData.find(item => item.id === newData.id);
							if (existingItem) {
								// 如果找到，替换原数据  
								const index = this.listData.indexOf(existingItem);
								this.listData.splice(index, 1, newData); // 删除旧数据并插入新数据  
							} else {
								// 如果没有找到，添加到数组中  
								this.listData.push(newData);
							}
							// console.log(this.listData, 101010);
						})
						this.$nextTick(() => {
							uni.showToast({
								icon: "none",
								title: res.data.msg,
							})
							uni.hideLoading()
						})
						this.switchk = true
					})
				}
			},
			// 点击刷新
			btnsx(item) {
				if (item.status_text == '在线') {
					uni.showLoading({
						mask: false
					})
					request.get('/api/beehive/detail/' + item.id, {}).then(res => {
						const newData = res.data.data;
						const existingItem = this.listData.find(item => item.id === newData.id);
						if (existingItem) {
							// 如果找到，替换原数据  
							const index = this.listData.indexOf(existingItem);
							this.listData.splice(index, 1, newData);
						} else {
							this.listData.push(newData);
						}
						// uni.hideLoading()
					})
					setTimeout(() => {
						setTimeout(() => {
							request.get('/api/beehive/detail/' + item.id, {}).then(res => {
								const newData = res.data.data;
								const existingItem = this.listData.find(item => item.id === newData
									.id);
								if (existingItem) {
									// 如果找到，替换原数据  
									const index = this.listData.indexOf(existingItem);
									this.listData.splice(index, 1, newData);
								} else {
									this.listData.push(newData);
								}
							})
						}, 500)
						uni.hideLoading()
					}, 6000)
				} else {
					uni.showToast({
						icon: "none",
						title: '设备不在线',
					})
				}
			},
			fenlampbuts(item) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				if (item.status_text == '离线') {
					this.disabledflag = false
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: '设备离线',
					})
				} else {
					this.disabledflag = true
					this.fenlampbut(item.id)
				}
			},
			warmbut(item) {
				if (this.switchk) {
					this.switchk = false
					request.post('/api/beehive/heatSwitch/' + item, {}).then(res => {
						// this.getfengchangList()
						// this.refresh()
						request.get('/api/beehive/detail/' + item, {}).then(res => {
							const newData = res.data.data; // 提取新数据  
							// 查找具有相同id的项  
							const existingItem = this.listData.find(item => item.id === newData.id);
							if (existingItem) {
								// 如果找到，替换原数据  
								const index = this.listData.indexOf(existingItem);
								this.listData.splice(index, 1, newData); // 删除旧数据并插入新数据  
							} else {
								// 如果没有找到，添加到数组中  
								this.listData.push(newData);
							}
							console.log(this.listData, 101010);
						})
						this.$nextTick(() => {
							uni.showToast({
								icon: "none",
								title: res.data.msg,
							})
						})
						this.switchk = true
						uni.hideLoading()
						this.maskgun = false
					})
				}
			},
			warmbuts(item) {
				console.log(item);
				this.maskgun = true
				uni.showLoading({
					title: '操作中',
					mask: true
				})
				if (item.status_text == '离线') {
					this.disabledflag = false
					uni.showToast({
						icon: "none",
						title: '设备离线',
					})
					uni.hideLoading()
				} else {
					this.disabledflag = true
					this.warmbut(item.id)
				}
			},

			switch1Change: function(e) {
				e.detail.value = false
			},
			// 搜索
			searchFn() {
				// 清除之前的定时器
				clearTimeout(this.timer);
				// 启动新的定时器，在5秒后触发 sendRequest 函数
				this.timer = setTimeout(() => {
					this.sendRequest();
				}, 1000);
			},
			sendRequest() {
				console.log(this.qrcodevalue)
				this.pageData('', '', this.qrcodevalue)
			},
			aweepClick() {
				wx.scanCode({
					onlyFromCamera: false, // 是否仅从相机启动，默认false  
					scanType: ['qrCode', 'barCode'], // 可以指定扫描的类型，比如二维码或者条形码，默认二者都有  
					success: res => { // 扫描成功后的回调  
						console.log(res.result, '成功结果') // 打印扫描结果 
						this.qrcodevalue = res.result
					},
					fail: res => { // 扫描失败后的回调  
						// console.log(res , '失败结果') // 打印错误信息  
					}
				})
			},
			// 迁移蜂箱点击确定
			confirmfengzhong(e) {
				request.put('/api/beehive/update/' + this.curren, {
					apiary_id: e.value[0].id
					// name:e.value[0].text
				}).then(res => {

					// this.getfengchangList()
					this.$nextTick(() => {
						uni.showToast({
							icon: "none",
							title: res.data.msg,
						})
						this.showfengzhong = false
						this.refresh()
					})
				})
			},
			// 迁移蜂箱
			migrtionHive(item) {
				this.HiddenClick(item)
				this.curren = item.id
				// 发请求获取所有蜂场名称
				this.fengzhongcolumns = [
					[]
				]
				this.items.forEach(e => {
					this.fengzhongcolumns[0].push({
						text: e.name,
						id: e.id
					})
				})
				console.log(this.fengzhongcolumns);
				this.showfengzhong = true
			},
			// 蜂箱去皮
			hiveTare(item) {
				this.HiddenClick(item)
				let that = this
				uni.showModal({
					title: "提示",
					content: '该操作会将 ' + item.name + " 蜂箱去皮！",
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '操作中',
								mask: true
							})
							request.post('/api/beehive/removePeel/' + item.id, {}).then(res => {
                               request.get('/api/beehive/detail/' + item.id, {}).then(res => {
                               	const newData = res.data.data;
                               	const existingItem = that.listData.find(item => item.id === newData.id);
                               	if (existingItem) {
                               		// 如果找到，替换原数据  
                               		const index = that.listData.indexOf(existingItem);
                               		that.listData.splice(index, 1, newData);
                               	} else {
                               		that.listData.push(newData);
                               	}
                               	// uni.hideLoading()
                               })
                               setTimeout(() => {
                               	setTimeout(() => {
                               		request.get('/api/beehive/detail/' + item.id, {}).then(res => {
                               			const newData = res.data.data;
                               			const existingItem = that.listData.find(item => item.id === newData
                               				.id);
                               			if (existingItem) {
                               				// 如果找到，替换原数据  
                               				const index = that.listData.indexOf(existingItem);
                               				that.listData.splice(index, 1, newData);
                               			} else {
                               				that.listData.push(newData);
                               			}
                               		})
                               	}, 500)
                               	uni.hideLoading()
                               }, 6000)
							})

						} else if (res.cancel) {}
					}
				})
			},
			fenx(item) {
				this.HiddenClick(item)
				if (item.detail_qrcode) {
					this.ewmflag = true
					this.ewmpic = item.detail_qrcode_text
				} else {
					uni.showToast({
						icon: "none",
						title: '该蜂箱暂无法分享',
					})
				}
			},
			// 删除蜂箱
			deleteHive(item) {
				this.HiddenClick(item)
				const lithis = this
				uni.showModal({
					title: "提示",
					content: '确定要删除蜂箱：' + item.name + " ? 请谨慎操作",
					success: function(res) {
						if (res.confirm) {
							request.delete('/api/beehive/delete/' + item.id, {}).then(res => {
								uni.showToast({
									icon: "none",
									title: res.data.msg
								})
							})
							lithis.loadData();
							// lithis.getfengchangList()
							lithis.refresh()
						} else if (res.cancel) {}
					}
				})
			},
			flageupdate() {
				this.flage = false
				this.form.inputvalue = ''
			},
			// 重命名 用户点击确定
			confirmname() {
				request.put('/api/beehive/update/' + this.updataname.id, {
					name: this.form.inputvalue
				}).then(res => {
					// this.getfengchangList()
					this.refresh()
					this.$nextTick(() => {
						uni.showToast({
							icon: "none",
							title: res.data.msg,
						})
					})

				})
				this.form.inputvalue = ''
				this.flageupdate()
			},
			// 重命名
			anewname(item) {
				this.backToTop()
				this.HiddenClick(item)
				this.updataname.name = item.name
				this.updataname.id = item.id
				this.form.inputvalue = item.name
				this.flage = true
			},
			// 点弹层关闭
			tanceng(item) {
				this.HiddenClick(item)
			},
			HiddenClick(item) {
				this.listData.forEach(e => {
					// 后台数据有一个是false就进
					if (item.ShowHidden == false) {
						// 将这边存储的数据也修改为false
						e.ShowHidden = false
					}
				})
				this.id = item.id
				// console.log(item,'弹层的item')
				item.ShowHidden = !item.ShowHidden
				// this.ShowHidden = true
				// console.log(item.ShowHidden)
				this.$forceUpdate()
			},
			async getfengchangList() {
				if (this.items.length <= 0) {
					this.showloading = true
				}

				await request.get('/api/apiary/index', {}).then(res => {
					if (res.msg == '用户凭证不存在') {
						console.log(11);
						uni.hideLoading()
						this.tokenflag = false
					} else {
						uni.hideLoading()
						this.tokenflag = true
						this.items = JSON.parse(JSON.stringify(res.data.data))
						this.tabitems.push(...res.data.data)
						this.tabitems = this.tabitems.filter((item, index, array) => {
							return array.findIndex(i => i.name === item.name) === index;
						});
						this.showloading = false
						this.clicktabs({
							page: 1
						})
					}

				})
			},
			// 发请求拿数据
			async pageData(page, apiary_id, qrcode) {
				await request.get('/api/beehive/index', {
					params: {
						page,
						apiary_id,
						qrcode
					}
				}).then(res => {
					wx.setStorageSync('user_id', res.data.data[0].user_id);
					this.listData = JSON.parse(JSON.stringify(res.data.data))
					wx.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
					// 停止下拉刷新状态  
					wx.stopPullDownRefresh();
					// this.$forceUpdate()
				}).catch(e => {})
			},
			// 跳转添加蜂箱页面
			xinzeng() {
				if (this.tokenflag == true) {
					uni.navigateTo({
						url: '/pagesFengXiang/pages/addfengxiang/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				}

			},
			// 跳转详情页
			detilsq(item) {
				console.log(item);
				// this.HiddenClick(item)
				uni.navigateTo({
					url: `/pagesFengXiang/pages/fengxiangDetail/index?id=${item.id}`
				})
			},
			detils(item) {
				console.log(item);
				this.HiddenClick(item)
				uni.navigateTo({
					url: `/pagesFengXiang/pages/fengxiangDetail/index?id=${item.id}`
				})
			},
			addyujings(item) {
				// this.HiddenClick(item)
				uni.navigateTo({
					url: '/pagesFengXiang/pages/index?id=' + item.id + '&qrcode=' + item.qrcode
				})
			},
			addyujing(item) {
				this.HiddenClick(item)
				uni.navigateTo({
					url: '/pagesFengXiang/pages/index?id=' + item.id + '&qrcode=' + item.qrcode
				})
			},
			clicktabs(event) {
				// this.currentindex=
				console.log('调用了', event);
				console.log('调用了', this.tabitems);
				if (event.index = 0) {
					this.checkid = ''
					this.currentindex = 0
				} else {
					this.checkid = event.id
					const index = this.tabitems.findIndex(item => item.id === this.checkid);

					// 将索引赋值给this.currentindex
					this.currentindex = index;
					console.log(this.currentindex, 'this.currentindex this.currentindex ');
					// this.currentindex=0
				}
				this.refresh()
				// this.pageData('', event.id)
			},
		},
	};
</script>

<style scoped lang="scss">
	/deep/ .u-popup__content {
		width: 750rpx;
	}
  
	.shuaxin {
		width: 32rpx;
		height: 32rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.maskgun {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: #ccc;
		opacity: .5;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.maskname {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 98;
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: .1;
	}

	.xiugainame {
		width: 750rpx;
		height: 564rpx;
		background-color: #fff;
		border-radius: 30rpx;
		position: fixed;
		top: 400rpx;
		left: 0;
		z-index: 99;
		padding: 50rpx;
		box-sizing: border-box;

		.mm {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
		}

		input {
			margin-top: 90rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			margin-bottom: 90rpx;
			width: 90%;
			height: 72rpx;
			border: 1px solid #ccc;
			border-radius: 50rpx;
			line-height: 72rpx;
			position: fixed;
			top: 500rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.btn {
			width: 100%;
			height: 72rpx;
			margin-top: 270rpx;
			border: 1px solid #ccc;
			border-radius: 50rpx;
			background-color: #23693f;
			text-align: center;
			line-height: 72rpx;
			color: #fff;
		}
	}

	.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;
			}
		}

	}

	.serachtab-box {
		background-color: #f7f7f7;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 55;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	// 向上弹窗样式
	.popup-top-text {
		display: flex;
		justify-content: space-between;
	}

	.popup-boder-m {
		margin-bottom: 90rpx;
	}

	.popup-button-b {
		margin-bottom: 20rpx;
	}

	.popup-box {
		padding: 30rpx 60rpx;
		border-radius: 50rpx;
		// opacity: .5 !important;
	}



	.warm-tip {
		height: 50rpx;
		width: 100%;
		text-align: center;
		margin-top: 200rpx;
	}

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

	// 气泡框的样式
	.mask-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vh;
		height: 100ch;
		background-color: #000;
		opacity: .5;
		z-index: 90;
	}

	.pop-text {
		text-align: center;
		font-size: 30rpx;
		line-height: 70rpx;
		padding: 30rpx 20rpx;
	}

	.arrivalNavigation {
		width: 250rpx;
		position: absolute;
		right: 50rpx;
		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°*/

		}
	}

	.scan-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.scan-img {
		margin-left: 10rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.text-l {
		margin-left: 5rpx;
	}

	.flex-taxt {
		margin-top: 20rpx;
	}

	.flex-taxt1 {
		margin-top: 22rpx;
	}

	.flex-taxt2 {
		margin-top: 20rpx;
	}

	.flex-taxt3 {
		margin-top: 20rpx;
	}

	.padding-box {
		padding: 25rpx 50rpx 0;
	}

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

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

	.bianhao-zuo {
		display: flex;
		align-content: center;
	}

	.bianhao-top-yi {
		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.search-box {
		display: flex;
		align-items: center;

	}

	.image-text-tu {
		margin: 0 20rpx 0;
		// width: 50rpx;
		// height: 50rpx;
	}

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

	.font_2 {
		font-size: 35rpx;
		font-weight: 550;
		font-family: 微软雅黑;
		line-height: 30rpx;
		color: #000000;
	}

	// .group_5 {
	// 	overflow-y: auto;
	// }

	.group_6 {
		margin-top: 20rpx;
	}

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

	.list-item {
		margin-top: 20rpx;
		padding: 24rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.group_7 {
		padding: 0 4rpx;
	}

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

	#text-wrapper-bgc1 {
		background-color: #89c28c;
	}

	#text-wrapper-bgc2 {
		background-color: #ff5733;
	}

	.ewm {
		background-color: #fff;
		width: 400rpx;
		height: 400rpx;
		margin: auto;
		opacity: 1 !important;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.text-wrapper {
		height: 30rpx;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		// height: 30rpx;
		border-radius: 15rpx;
		padding: 0rpx 10rpx;
	}

	.font_3 {
		font-size: 14rpx;
		font-family: 微软雅黑;
		line-height: 15rpx;
		color: #ffffff;
	}

	.font_33 {
		font-size: 16rpx;
		font-family: 微软雅黑;
		// line-height: 15rpx;
		color: #ffffff;
	}


	.image_7 {
		border-radius: 4rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.image_8 {
		margin-left: 32rpx;
	}

	.image_9 {
		margin-left: 16rpx;
	}

	.image_10 {
		margin-left: 16rpx;
	}

	.image_11 {
		margin-left: 16rpx;
	}

	.image_12 {
		margin-left: 16rpx;
	}

	.image_13 {
		margin-left: 16rpx;
	}

	.image_14 {
		margin-top: 10rpx;
		width: 45rpx;
		height: 13rpx;
		vertical-align: top;
	}

	.view_2 {
		margin-top: 8rpx;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: 微软雅黑;
		line-height: 15rpx;
		color: #888888;
	}

	.text_6 {
		margin-left: 16rpx;
	}

	.text_7 {
		margin-left: 8rpx;
	}

	.text_8 {
		margin-left: 1rpx;
	}

	.felx-99 {
		display: flex;
		justify-content: space-between;
	}

	.view_3 {
		margin-top: 10rpx;
		// display: flex;
		// justify-content: space-between;
	}

	.image_15 {
		width: 28rpx;
		height: 32rpx;
		vertical-align: middle;
		padding-bottom: 6rpx;
		box-sizing: border-box;
	}

	.image_16 {
		width: 20rpx;
		height: 32rpx;
		vertical-align: middle;
		padding-bottom: 5rpx;
		box-sizing: border-box;
	}

	.image_17 {
		width: 21rpx;
		height: 32rpx;
		vertical-align: middle;
		padding-bottom: 6rpx;
		box-sizing: border-box;
	}

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

	// .text_9 {
	// 	margin-left: 12rpx;
	// 	line-height: 23rpx;
	// }

	.text_13 {
		margin-left: 6rpx;
		margin-top: 12rpx;
		line-height: 23rpx;
	}

	.text_12 {
		margin-left: 12rpx;
		line-height: 23rpx;
	}

	// .text_14 {
	// 	margin-left: 12rpx;
	// 	line-height: 23rpx;
	// }

	.view_4 {
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
	}

	.image_18 {
		width: 22rpx;
		height: 32rpx;
	}

	.group_8 {
		margin-right: 24rpx;
	}

	.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_19 {
		width: 22rpx;
		height: 32rpx;
		vertical-align: middle;
		padding-bottom: 6rpx;
		box-sizing: border-box;
	}

	.image_20 {
		border-radius: 16rpx;
		width: 48rpx;
		height: 20rpx;
	}

	.image_201 {
		border-radius: 16rpx;
		width: 65rpx;
		height: 26rpx;
        vertical-align: top;
	}

	.view_5 {
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
	}

	.group_9 {
		margin-right: 28rpx;
	}

	.image_21 {
		width: 26rpx;
		height: 26rpx;
		vertical-align: middle;
	}

	.text_15 {
		margin-left: 12rpx;
	}

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

	.section_3 {
		flex: 1;
		padding: 8rpx 12rpx;
		background-color: #ffffff;
		border-radius: 370rpx;
	}

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

	.group_10 {
		padding: 0 32rpx;
	}

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

	.text-wrapper_2 {
		background-color: #ff5733;
		border-radius: 10rpx;
		width: 42rpx;
		height: 18rpx;
	}

	.text_22 {
		line-height: 13rpx;
	}

	.group_11 {
		padding: 0 28rpx;
	}

	.text_23 {
		margin-left: 16rpx;
	}

	.text_24 {
		margin-left: 8rpx;
	}

	.text_25 {
		margin-left: 20rpx;
	}

	.group_12 {
		padding: 0 34rpx;
	}

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

	.text_27 {
		line-height: 23rpx;
	}

	.text_28 {
		line-height: 23rpx;
	}

	.group_13 {
		width: 650rpx;
	}

	.grid {
		width: 460rpx;
		height: 112rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-item {
		padding: 12rpx 36rpx;
	}

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

	.grid-item_2 {
		padding: 12rpx 22rpx;
		width: 230rpx;
	}

	.image-wrapper {
		width: 51rpx;
	}

	.text-wrapper_3 {
		margin-left: 12rpx;
	}

	.image-wrapper_2 {
		width: 53rpx;
	}

	.group_14 {
		margin-top: 68rpx;
		padding: 2rpx 0 2rpx 44rpx;
	}

	.text_30 {
		margin-left: 12rpx;
	}

	.section_2 {
		padding: 28rpx 0;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0px 0px 12rpx #00000040;
		width: 206rpx;
	}

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

	.pos_2 {
		position: absolute;
		right: 38rpx;
		top: 356rpx;
	}

	.text_16 {
		font-size: 30rpx;
		line-height: 28rpx;
	}

	.text_19 {
		font-size: 30rpx;
		line-height: 28rpx;
	}

	.text_20 {
		font-size: 30rpx;
		line-height: 28rpx;
	}

	.text_21 {
		font-size: 30rpx;
		line-height: 28rpx;
	}

	.text_26 {
		font-size: 30rpx;
		line-height: 28rpx;
	}

	.text_29 {
		font-size: 30rpx;
		line-height: 28rpx;
	}

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

	.section_4 {
		padding-top: 6rpx;
		background-color: #ffffff;
		border-radius: 60rpx 60rpx 0 0;
		border: solid 2rpx #f7f7f7;
	}

	.group_15 {
		flex: 1 1 150rpx;
	}

	.group_2 {
		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;
	}

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

	.font_6 {
		font-size: 20rpx;
		font-family: Poppins;
		line-height: 20rpx;
		color: #999999;
	}

	.text_31 {
		font-size: 22rpx;
	}

	.text_32 {
		font-size: 22rpx;
	}

	.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_33 {
		color: #23693f;
		font-size: 22rpx;
	}

	.font_7 {
		font-size: 20rpx;
		font-family: Poppins;
		line-height: 20rpx;
		color: #888888;
	}

	.text_34 {
		font-size: 22rpx;
	}

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

	.text_35 {
		font-size: 22rpx;
	}
</style>