<template>
	<!-- 蜂箱预警 -->
	<view class=" page">
		<view class="max-box">
			<!-- <view class="suosou-fx">
				<view class="section_3 ">
					<view class="text_3">
						<view class="input-fu">
							<image class="image_6 inpt-text-icon"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994973961877418353.png" />
							<input v-model="qrcode" class="inpt-text" type="text" value="" placeholder="蜂箱（自定义）编号搜索" maxlength="22"
								@input="mfInput" />
						</view>
					</view>
				</view>
			</view> -->

			<!-- <view class="tabs">
			   <u-tabs :list="list1" @click="click"></u-tabs>
		</view -->


			<view class="flex-col self-start group_4">
				<view class="flex-col">
					<view class="flex-col space-y-6 padding-mi padding-min-box" v-for="(item, index) in fromList"
						:key="index" @scrolltolower="onReachBottom">
						<!-- 报错代码 -->

						<view class="items-end">
							<view class="flex-col group_5">
								<!-- 日期 -->
								<view v-if='!isSameDay(item,index)' class="taxt-center">
									<view style="padding: 15rpx 20rpx 30rpx 20rpx;"
										class="flex-col justify-start self-end text-wrapper">
										<view class="font_2 text_5">{{getTimeByFormat(item.create_time,"MM-dd")}}</view>
									</view>
								</view>
								<!-- 时间 -->
								<view class="time-text">
									<view class=" group_6 space-x-10">
										<view class="font_3 text_6">{{getTimeByFormat(item.create_time,"HH:mm")}}</view>
										<image class="image_7 image_8" :src="imgFn(item.type_text)" />
										<view class="font_4">{{item.type_text}}</view>
									</view>
									<view @click="clickweichuli(item)"
										class="flex-col justify-start text-wrapper_2 icon-text-r"
										:id="item.status_text == '已处理' ? 'text-wrapper_2-bgc2' : 'text-wrapper_2-bgc1' ">
										<view class="font_5">{{item.status_text}}</view>
									</view>
								</view>
							</view>

							<view class=" justify-evenly group_7 flex-box-love">
								<view v-if="fromList.length>0&&index!=(fromList.length-1)" class="xiantiao">
									<view class="ver-line"></view>
								</view>
								<view style="margin-top: 24rpx;" class="flex-col self-start group_8 space-y-6 ">
									<view class="items-end space-x-6 didian-text-box">
										<image class="shrink-0 image_9"
											src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994973961906195248.png" />
										<view class="font_6">{{item.apiary_name}}</view>
										<view class="group_9">
											<view class="font_6">{{item.beehive_name}}</view>
											<view class="font_7">{{item.beehive_qrcode}}</view>
										</view>
									</view>
									<view class="font_8 text_7">{{item.remark}}</view>
								</view>
							</view>
						</view>




					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	import request from '@/utils/request'
	export default {
		components: {},
		props: {},
		data() {
			return {
				tabIndex: 0,
				items: [],
				page: 1,
				fromList: [],
				// tab 
				list1: [{
					name: '全部'
				}],
				qrcode: '',
				id:'',
				qrcodes:'',
				pagenum: 1,
				pagesize: 15, // 一页多少数据
				isLoading: false, // 是否正在加载数据  
				noMoreData: false, // 是否没有更多数据  
				total: 0
			};
		},
		onLoad(option) {
			this.id = option.id
			this.qrcodes = option.qrcode
			console.log(option);
			this.getfengchangList()
		},
		onShow() {
			// this.listData()
		},

		methods: {
			// 判断是否同一天
			isSameDay(item, index) {
				let time1 = item.create_time
				let time2 = this.fromList[index - 1]?.create_time
				const date1 = new Date(time1);
				const date2 = new Date(time2);
				return (
					date1.getFullYear() === date2.getFullYear() &&
					date1.getMonth() === date2.getMonth() &&
					date1.getDate() === date2.getDate()
				);
			},
			getTimeByFormat(timestamp, format) {
				// console.log(date,format);
				const now = new Date(timestamp);
				const month = now.getMonth() + 1; // 注意：getMonth() 返回的是 0 到 11，所以需要加 1
				const day = now.getDate();

				// 补零函数，确保单个数字前面加零
				const padZero = (num) => (num < 10 ? `0${num}` : num);

				// 根据传入的格式进行处理
				switch (format) {
					case "HH:mm:ss":
						return `${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
					case "HH:mm":
						return `${padZero(now.getHours())}:${padZero(now.getMinutes())}`;
					case "mm:ss":
						return `${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
					case "MM-dd":
						// console.log(`${padZero(month)}月${padZero(day)}日`)
						return `${padZero(month)}月${padZero(day)}日`;
						// 可以添加其他格式的处理
					default:
						return "Invalid Format";
				}
			},
			click(item) {
				// console.log('item', item);
				this.activeFengchang = item
				this.listData()
			},
			listData() {
				let data = {
					apiary_id: this.activeFengchang.id,
					qrcode: this.qrcodes,
				}
				request.post('/api/beehive/warning', data).then(res => {
					this.total = res.data.total
						if (res.data.data.length > 0) {
							// 有数据，追加到列表  
							this.fromList = []
							this.fromList = this.fromList.concat(...res.data.data)
							this.pagenum++
						} else {
							// 没有更多数据  
							this.noMoreData = true;
						}
						this.isLoading = false;
						console.log(this.fromList,'555555555')
					})
				// console.log(res.data.data)
			},
			onReachBottom() {
				let sum = this.total 
				console.log(sum,this.fromList.length);
				if (this.fromList.length < sum) {
					this.listData();
				} else {
					uni.showToast({
						title: '没有更多预警记录了',
						icon: 'none',
						duration: 1000
					});
				}
			},
			getfengchangList() {
				// request.post('/api/beehive/warning', {
				// 	apiary_id: this.id,
				// 	qrcode: this.qrcodes
				// }).then(res => {
				// 	this.fromList = [...res.data.data]
				// 	// this.click(this.list1[0])
				// })
				
				request.get('/api/apiary/index', {}).then(res => {
					this.list1.push(...res.data.data)
					this.click(this.list1[0])
				})
			},
			changeStatus(item) {
				request.put('/api/beehive/warningUpdate/' + item.id, {}).then(res => {
					this.listData()
				})
			},

			clickweichuli(item) {
				if (item.status == 1) {
					return
				}
				let that = this
				uni.showModal({
					title: "提示",
					content: '是否已经处理完此预警信息!',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							that.changeStatus(item)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				})
			},
			mfInput(key) {
				this.listData()
			},
			imgFn(val) {
				if (val == '出勤异常') {
					return '/static/蜂箱预警-出勤异常.png'
				} else if (val == '震动异常') {
					return '/static/蜂箱预警-震动异常.png'
				} else if (val == '温度异常') {
					return '/static/蜂箱预警-温度异常.png'
				} else if (val == '湿度异常') {
					return '/static/蜂箱预警-湿度异常.png'
				} else if (val == '重量异常') {
					return '/static/蜂箱预警-重量异常.png'
				} else if (val == '电量不足') {
					return '/static/蜂箱预警-电量异常.png'
				}
			},

		},
	};
</script>

<style scoped lang="scss">
	.didian-text-box {
		display: flex;
	}

	.flex-box-love {
		display: flex;
	}

	.xiantiao {
		display: flex;
	}

	.icon-text-r {
		text-align: center;
		padding-bottom: 10rpx;
	}

	.padding-min-box {
		margin-top: 20rpx;
	}

	.max-box {
		margin: 0 24rpx;
		padding-bottom: 100rpx;
	}

	.time-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.taxt-center {
		display: flex;
		justify-content: center;
	}

	.input-fu {
		width: 100%;
		position: relative;
	}

	.inpt-text {
		text-align: center;
	}

	.inpt-text-icon {
		position: absolute;
		top: 5rpx;
		left: 10rpx;
	}

	.suosou-fx {
		display: flex;
		justify-content: center;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 36rpx 28rpx 18rpx 42rpx;
		background-color: #ffffff;
	}

	.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 {
		padding-left: 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;
	}

	.group_2 {
		padding: 12rpx 0;
	}

	.image_5 {
		width: 32rpx;
		height: 32rpx;
	}

	.pos_2 {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

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

	.pos {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.section_2 {
		margin-top: -8rpx;
		padding-top: 20rpx;
		background-color: #ffffff;
		height: 1456rpx;
		border: solid 4rpx #e8e8e8;
		border-radius: 10rpx;
	}

	.section_3 {
		padding: 8rpx 24rpx;
		background-color: #e2e2e2;
		width: 558rpx;
		border: solid 2rpx #ffffff;
		border-radius: 120rpx;
	}

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

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

	.group_3 {
		margin-top: 28rpx;
		padding: 0 40rpx;
		width: 750rpx;
	}

	.font_1 {
		font-size: 32rpx;
		font-family: 微软雅黑;
		line-height: 30rpx;
		color: #888888;
	}

	.text_4 {
		color: #000000;
		font-weight: 700;
	}

	/* .group_4 {
		margin: 24rpx 0 -24rpx;
		padding: 0 52rpx;
		width: 750rpx;
	} */

	.group_5 {
		width: 100%;
	}

	.text-wrapper {
		text-align: center;
		padding: 0rpx 0 24rpx;
		border-radius: 4rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994973961902704708.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 148rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: 微软雅黑;
		line-height: 22rpx;
		color: #ffffff;
	}

	.text_5 {
		line-height: 21rpx;
	}

	.group_6 {
		/* padding-top: 10rpx; */
		display: flex;
		align-items: center;
	}

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

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

	.text_6 {
		font-size: 30rpx;
		width: 100rpx;
	}

	.image_7 {
		margin-left: 28rpx;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
	}

	.image_8 {
		margin-left: 0;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: 微软雅黑;
		line-height: 26rpx;
		font-weight: 700;
		color: #ff5733;
	}

	#text-wrapper_2-bgc1 {
		background-color: #ff5733;
	}

	#text-wrapper_2-gbc2 {
		background-color: #8888;
	}

	.text-wrapper_2 {
		margin-right: 12rpx;
		padding: 10rpx 15rpx;
		background-color: #8888;
		border-radius: 10rpx;
		width: 90rpx;
	}

	.font_5 {
		font-size: 20rpx;
		font-family: 微软雅黑;
		line-height: 18rpx;
		color: #ffffff;
	}

	.group_7 {
		padding-left: 116rpx;
		padding-right: 20rpx;
	}

	.section_4 {
		background-image: repeating-linear-gradient(90deg, #888888, #888888 3.51%, transparent 3.51%, transparent 7.019%);
		background-position: -2rpx 0px;
		width: 2rpx;
		height: 114rpx;
		margin-left: 20rpx;
	}

	.group_8 {
		padding: 0 32rpx;
	}

	.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_9 {
		width: 24rpx;
		height: 28rpx;
	}

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

	.group_9 {
		line-height: 22rpx;
		height: 22rpx;
		display: flex;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: 微软雅黑;
		line-height: 18rpx;
		color: #89c28c;
		margin-left: 10rpx;
	}

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

	.text_7 {
		line-height: 28rpx;
	}

	.ver-line {
		margin-left: 22rpx;
		height: 200rpx;
		width: 3rpx;
		border-radius: 10rpx;
		background-color: #e7dfe1;
	}
</style>