<template>
	<view class="pages">

		<view class="top">

			<view class="top-item">
				<view class="top-item-drop"></view>
				<view class="top-item-text">
					<text class="top-item-text1">仓库名称：</text>
					<text class="top-item-text2">{{info.warehouseName}}</text>
				</view>
			</view>

			<view class="top-item" style="margin-top: 20px;">
				<view class="top-item-drop"></view>
				<view class="top-item-text">
					<text class="top-item-text1">异常时间：</text>
					<text class="top-item-text2">{{info.exceptionTime}}</text>
				</view>

			</view>


			<view class="top-item" style="margin-top: 20px;">

				<view class="top-item-bom">
					<text class="top-item-bom-text1" @click="textClick('1')">联系库房</text>
					<text class="top-item-bom-text2" @click="textClick('2')">工作派单</text>
				</view>


			</view>


		</view>

		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">

			<view style="padding-bottom: 50px;">

				<view v-for="(item,index) in info.dataList" class="newslist">

					<view class="list-item">



						<!-- <view class="list-item-text">
							<text class="list-item-text1">名称：</text>
							<text class="list-item-text2">{{item.name}}</text>
						</view>

						<view class="list-item-text">
							<text class="list-item-text1">序列号：</text>
							<text class="list-item-text2">{{item.code}}</text>
						</view>

						<view class="list-item-text">
							<text class="list-item-text1">状态：</text>
							<text class="list-item-text2">{{item.state}}</text>
						</view> -->
						<view class="item-lift">
							<image class="item-img" src="https://supervise.yxtsoft.com/img/base/sbyc.png"></image>
							<text class="item-state">{{item.state}}</text>
						</view>



						<view class="item-text">
							<view class="item-text-lay">
								<text class="item-lay-text1">名称：</text>
								<text class="item-lay-text2">{{item.name}}</text>
							</view>

							<view class="item-text-lay" style="margin-top: 10px;">
								<text class="item-lay-text1">序列号：</text>
								<text class="item-lay-text2">{{item.code}}</text>
							</view>
						</view>


					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				params: {
					sid: "",
					// sid: "",
					wxCode: "",
				},

				info: {
					warehouseSid: "",
					warehouseName: "",
					exceptionTime: "",
					linkers: [],
					dataList: [
						// {
						// 	name: "摄像头1",
						// 	code: "sak-545-an-5464",
						// 	state: "断网"
						// },
						// {
						// 	name: "摄像头2",
						// 	code: "sak-545-an-5464",
						// 	state: "断网"
						// },
						// {
						// 	name: "摄像头3",
						// 	code: "sak-545-an-5464",
						// 	state: "断网"
						// },
						// {
						// 	name: "摄像头4",
						// 	code: "sak-545-an-5464",
						// 	state: "断网"
						// },
						// {
						// 	name: "摄像头5",
						// 	code: "sak-545-an-5464",
						// 	state: "断网"
						// },
						// {
						// 	name: "摄像头6",
						// 	code: "sak-545-an-5464",
						// 	state: "断网"
						// },
						// {
						// 	name: "摄像头7",
						// 	code: "sak-545-an-5464",
						// 	state: "断网"
						// },
						// {
						// 	name: "摄像头8",
						// 	code: "sak-545-an-5464",
						// 	state: "断网"
						// },
						// {
						// 	name: "摄像头9",
						// 	code: "sak-545-an-5464",
						// 	state: "断网"
						// },
						// {
						// 	name: "摄像头10",
						// 	code: "sak-545-an-5464",
						// 	state: "断网"
						// }

					]
				}
			}
		},
		onLoad(option) {

			// this.sid = option.sid

			this.params = {
				sid: option.sid
			}
			console.log("sid", this.params.sid)

			wx.hideHomeButton()
			this.init()


		},
		methods: {
			// 禁止滑动
			preventHandler() {
				return
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			init() {
				let that = this
				wx.login({
					success: function(res) {
						if (res.code) {
							console.log('Http网络请求信息', {
								"wxCode": res.code
							})

							that.params.wxCode = res.code
							that.getData(that.params)
						}
					},
					fail: function(res) {
						uni.showToast({
							title: "网络错误，请退出后重新进入。",
							icon: 'none'
						})
					}
				});
			},

			getData(data) {
				console.log("data", data)
				this.$api.getDeviceExceptionInfo(data).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)

					this.info.warehouseSid = resp.shSid
					this.info.warehouseName = resp.shName
					this.info.exceptionTime = resp.messageTime
					this.info.linkers = resp.linkers

					var str = resp.text.substring(1, (resp.text.length - 1))

					console.log('1111', str)

					var str2 = str.split("Device")
					console.log('222', str2)

					for (var i = 0; i < str2.length; i++) {

						var item = str2[i]

						if (item) {

							var str3 = item.split(", ")
							console.log('3333', str3)


							var name = str3[0].substring(6)
							console.log('name', name)

							var code = str3[1].substring(13)
							console.log('code', code)

							var state = str3[2].substring(7, str3[2].length - 1)
							console.log('state', state)

							this.info.dataList.push({
								name: name,
								code: code,
								state: state,
							})

						}
					}


				}).catch(e => {
					console.log('eeeee', e)
				})
			},
			textClick(index) {
				switch (index) {
					case "1":
						// 联系库房
						// uni.showToast({
						// 	icon: "none",
						// 	title: '联系库房',
						// 	duration: 2000,
						// });
						uni.navigateTo({
							url: '../index/ContactWarehouse?info=' + JSON.stringify(this.info),
						});
						break;
					case "2":
						// 工作派单
						uni.showToast({
							icon: "none",
							title: '工作派单',
							duration: 2000,
						});
						// uni.navigateTo({
						// 	url: '../index/ReadWork'
						// });
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	.pages {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: fixed;
		overflow: auto;

		.top {
			display: flex;
			flex-direction: column;
			padding: 15px 20px;

			.top-item {
				display: flex;
				flex-direction: row;
				align-items: center;

				.top-item-drop {
					background: #1684FC;
					border-radius: 50%;
					width: 8px;
					height: 8px;
				}

				.top-item-text {
					margin-left: 10px;
					display: flex;
					flex-direction: row;
					align-items: center;

					.top-item-text1 {
						font-size: 15px;
						color: #666;
					}

					.top-item-text2 {
						font-size: 18px;
						color: #000;
						font-weight: 600;
						font-family: sans-serif;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}

				.top-item-bom {
					display: flex;
					flex-direction: row;
					width: 100%;
					margin-left: 30px;
					margin-right: 30px;
					justify-content: space-between;

					.top-item-bom-text1 {
						padding: 5px 20px;
						color: #2F96E1;
						font-size: 14px;
						border: 1px solid #2F96E1;
						border-radius: 5px;

					}

					.top-item-bom-text2 {
						padding: 5px 20px;
						color: #fff;
						font-size: 14px;
						background: #2F96E1;
						border-radius: 5px;
					}
				}
			}
		}

		.scroll-Y {
			overflow-y: hidden;
			height: 90vh;

			.newslist {
				margin-top: 10px;
				display: flex;
				flex-direction: column;
				padding-left: 10px;
				padding-right: 10px;

				.list-item {
					margin-top: 10px;
					display: flex;
					flex-direction: row;
					background: #fff;
					border-radius: 5px;
					align-items: center;
					padding: 20px 25px;


					.item-lift {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.item-img {
							width: 30px;
							height: 30px;
						}

						.item-state {
							font-size: 12px;
							color: #fff;
							margin-top: 5px;
							background: #41CAC0;
							border-radius: 15px;
							padding: 2px 15px;
						}
					}

					.item-text {
						margin-left: 20px;
						flex: 1;
						display: flex;
						flex-direction: column;

						.item-text-lay {
							display: flex;
							flex-direction: row;
							align-items: center;

							.item-lay-text1 {
								font-size: 14px;
								color: #9F9F9F;
							}

							.item-lay-text2 {
								flex: 1;
								font-size: 16px;
								color: #000;
								// font-weight: 600;
								// font-family: sans-serif;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}
						}

					}



					// .list-item-text {
					// 	margin-top: 5px;
					// 	display: flex;
					// 	flex-direction: row;
					// 	align-items: center;

					// 	.list-item-text1 {
					// 		font-size: 15px;
					// 		color: #666;
					// 	}

					// 	.list-item-text2 {
					// 		font-size: 18px;
					// 		color: #000;
					// 		font-weight: 600;
					// 		font-family: sans-serif;
					// 		overflow: hidden;
					// 		text-overflow: ellipsis;
					// 		display: -webkit-box;
					// 		-webkit-line-clamp: 1;
					// 		-webkit-box-orient: vertical;
					// 	}
					// }
				}

			}
		}
	}
</style>