<template>
	<view class="page" @touchome.stop.prevent="preventHandler">

		<view class="search">

			<view class="search-input">
				<image class="search-input-img" src="../../static/baseIcon/search.png" mode="aspectFill"></image>
				<input class="search-input-text" placeholder="请输入仓库名称" @input="searchInput" :disabled="false" />
			</view>

			<text class="search-text" @click="drawerClick">筛选</text>

		</view>

		<scroll-view class="scrollviewCss" scroll-y="false" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="45" refresher-background="#f8f8f8" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrollBottem">

			<view>
				<view v-for="(item,index) in dataList" class="newslist" @click="itemClick(item)">

					<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">{{item.messageTime}}</text>
						</view>
					</view>

					<view class="top-item" style="margin-top: 12px;">
						<view class="top-item-drop"></view>
						<view class="top-item-text">
							<text class="top-item-text1">仓库名称：</text>
							<view class="top-item-text2" v-html="highLight(item.templateMessageVo.shName)">
								{{item.templateMessageVo.shName}}
							</view>
							<!-- <text class="top-item-text2">{{item.message[0]}}</text> -->
						</view>
					</view>

					<view class="bomLay">

						<!-- 	<view class="bomLay-item">

							<image class="bomLay-item-img" src="https://supervise.yxtsoft.com/img/newApp/alarm-blue.png" />
							<text class="bomLay-item-text">item.type</text>
						</view> -->

						<view class="bomLay-item" v-if="item.isImg=='2'">
							<image class="bomLay-item-img" src="https://supervise.yxtsoft.com/img/newApp/goods.png" />
							<text class="bomLay-item-text">{{item.type}}</text>
						</view>

						<view class="bomLay-item" v-else="item.isImg=='1'">
							<image class="bomLay-item-img"
								src="https://supervise.yxtsoft.com/img/newApp/cloud_disabled.png" />
							<text class="bomLay-item-text">{{item.type}}</text>
						</view>

						<view class="bomLay-item">
							<image class="bomLay-item-img" src="https://supervise.yxtsoft.com/img/newApp/risk.png" />
							<text class="bomLay-item-text">{{item.riskLevel}}</text>
						</view>
					</view>

					<view class="bombtn">
						<view style="flex: 1;"></view>
						<text class="bombtn-item" @click="textClick(item,'1')">联系库房</text>
						<text class="bombtn-item" @click="textClick(item,'2')">工作派单</text>
					</view>

				</view>

				<!-- <uni-load-more :status="loadingType"></uni-load-more> -->

			</view>
			<!-- 加载....没有更多 -->
			<view style="line-height: 60rpx;margin-bottom: 50rpx;">
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>
		</scroll-view>

		<uni-drawer ref="drawer" width="320" mode="right">

			<view class="drawerView">
				<text style="color: #101010;font-size: 16px;font-weight: 600;font-family: sans-serif;">告警日期</text>
				<view class="drawerView-date">
					<input class="drawerView-date-text" v-model="listQuery.params.startDate" placeholder="开始日期"
						:disabled="true" @click="openDate(1)">
					<text style="margin-left: 10px;margin-right: 10px;color: #777;">至</text>
					<input class="drawerView-date-text" v-model="listQuery.params.endDate" placeholder="结束日期"
						:disabled="true" @click="openDate(2)">
				</view>

				<!-- <text
					style="color: #101010;font-size: 16px;font-weight: 600;font-family: sans-serif; margin-top: 20px;">发起人</text> -->

				<!-- 		<uni-data-checkbox @change="checkboxChange"  selectedColor="#007AFF" mode="list" :localdata="personnelList" :multiple="false" >
					
				</uni-data-checkbox> -->

				<!-- 	<scroll-view scroll-y :show-scrollbar="true"
					style="display: flex;flex-direction: column; margin-top: 20px;width: 100%; height:50%; overflow:auto;">

					<view class="to_do_content_list" :class="{'to_do_finish':item.checked}"
						v-for="(item,index) in personnelList" :key="index" @click="select(item.id)">
						<view class="to_do_content_list_checkbox">
							<view class="checkbox"></view>
						</view>
						<view class="to_do_content_list_cont">{{item.name}}</view>
					</view>



				</scroll-view> -->




				<view class="drawerView-bom">
					<text class="drawerView-bom-text1" @click="resetClik">重置</text>
					<text class="drawerView-bom-text2" @click="assignClick">确定</text>

				</view>

				<u-datetime-picker ref="datetimePicker" :closeOnClickOverlay='true' @close="cancelClick"
					@cancel="cancelClick" @confirm="confirmClick" :show="datetimeShow" v-model="selectDate" mode="date"
					:formatter="formatter">

				</u-datetime-picker>

			</view>

		</uni-drawer>
	</view>


</template>

<script>
	import {
		formatTimeTwo,
		beforeDay
	} from "@/utils/index";
	export default {
		data() {
			return {
				selectDate: beforeDay(null, 0),
				datetimeShow: false,
				datetimeIndex: "1",
				personnelList: [

				],
				triggered: true,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '拉也没用，没有了'
				},
				listQuery: {
					current: 1,
					size: 10,
					params: {
						shName: "",
						startDate: "",
						endDate: "",
						userSid: "",
						woekName: "",
					}
				},
				loadingType: 'more', //加载更多状态
				dataList: [

				],
				info: {
					warehouseSid: "",
					warehouseName: "",
					exceptionTime: "",
					linkers: [],
					dataList: []
				}

			};
		},

		created() {
			this.$bus.$on('wholeSpin', msg => {
				//这里获取到http工具js文件中传过来的wholeSpin值
				console.log(">>>>>", this.isShow)

				var userSid = getApp().globalData.sid
				console.log(">>>>>", userSid)
				this.listQuery.params.userSid = userSid
				this.loadData();
			});
		},


		onLoad() {

		},

		onShow() {
			console.log('onShow', getApp().globalData.isLogin)

			let token = uni.getStorageSync("Global-Auth-Token")
			if (token != null && token.length != 0) {
				getApp().globalData.token = token
			}
			let isLogin = uni.getStorageSync("isLogin")
			if (isLogin != null && isLogin == 1) {
				getApp().globalData.isLogin = isLogin
			}
			let sid = uni.getStorageSync("sid")
			if (sid != null && sid.length != 0) {
				getApp().globalData.sid = sid
			}

			console.log('用户Sid', getApp().globalData.sid)
			console.log('token', getApp().globalData.token)
			console.log('是否登陆', getApp().globalData.isLogin)

			// setTimeout(() => {
			if (getApp().globalData.isLogin) {
				var userSid = getApp().globalData.sid
				console.log(">>>>>", userSid)
				this.listQuery.params.userSid = userSid
				this.dataList = []
				this.loadData();
				// uni.setTabBarBadge({ //显示数字
				// 	index: 0, //tabbar下标
				// 	text: '100' //数字
				// })
			} else {

				/*  #ifdef  MP-WEIXIN */
				this.WxSilentLogin()
				/* #endif */

				/*  #ifdef APP-PLUS */
				uni.redirectTo({
					url: '../login/login'
				})
				/* #endif */
			}
		},

		onReady() {
			/*  #ifdef  MP-WEIXIN */
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
			/* #endif */
		},
		methods: {
			// 禁止滑动
			preventHandler() {
				return
			},
			/* 滚动到底部 */
			scrollBottem() {
				console.log("滚动高度")
				this.listQuery.current = this.listQuery.current + 1
				this.loadData();
			},
			onRefresh() {
				setTimeout(() => {
					this.triggered = false;
				}, 2000)
				console.log("进入");
			},
			/* 下拉被复位 */
			onRestore() {
				this.triggered = true; // 需要重置
				console.log(this.triggered);
				console.log("停止");
			},
			/* 下拉被中止，没下拉完就松手就会触发 */
			onAbort() {
				console.log("onAbort");
			},
			searchInput(e) {
				this.listQuery.params.shName = e.detail.value
				this.dataList = []
				this.listQuery.current = 1,
					this.listQuery.size = 10,

					this.loadData()
			},
			highLight(value) {
				console.log("highLight》》》", value);
				if (value == '' || value == undefined || value == null)
					return
				if (value.includes(this.listQuery.params.shName)) {
					value = value.replace(
						this.listQuery.params.shName,
						"<font style='color:red!important'>" + this.listQuery.params.shName + "</font>"
					)
					return value
				} else {
					return value
				}
			},
			drawerClick() {
				this.$refs['drawer'].open()
			},
			openDate(type) {
				switch (type) {
					case 1:
						this.datetimeIndex = "1"
						this.datetimeShow = true
						break;
					case 2:
						this.datetimeIndex = "2"
						this.datetimeShow = true
						break;
					default:
						break;
				}
			},
			formatter(type, value) {

				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			cancelClick() {
				this.datetimeShow = false
			},
			confirmClick(date) {
				console.log('confirmClick', date)
				console.log('confirmClick', formatTimeTwo((new Date(date.value)).getTime(), "Y-M-D"))

				switch (this.datetimeIndex) {
					case "1":
						this.listQuery.params.startDate = formatTimeTwo((new Date(date.value)).getTime(), "Y-M-D")
						break;
					case "2":
						this.listQuery.params.endDate = formatTimeTwo((new Date(date.value)).getTime(), "Y-M-D")
						break;
					default:
						break;
				}
				this.datetimeShow = false

			},
			// 点击item 选中
			select(id) {

				for (var i = 0; i < this.personnelList.length; i++) {
					let item = this.personnelList[i]

					if (item.id == id) {
						item.checked = !item.checked
					} else {
						item.checked = false
					}

				}

				let index = this.personnelList.findIndex((item) => item.id == id)
				console.log("我被点击了", this.personnelList[index].name);

				this.search.promoter = this.personnelList[index].checked ? this.personnelList[index].name : ""
				console.log("promoter", this.search.promoter);

				// 	this.personnelList[index].checked = !this.personnelList[index].checked
			},
			resetClik() {
				this.listQuery.params.startDate = ""
				this.listQuery.params.endDate = ""
			},

			assignClick() {
				console.log('confirm', this.listQuery.params)
				this.datetimeShow = false

				this.$refs['drawer'].close()

				this.dataList = []
				this.listQuery.current = 1,
					this.listQuery.size = 10,

					this.loadData()

				// uni.showToast({
				// 	icon: "none",
				// 	title: JSON.stringify(this.listQuery.params),
				// 	duration: 5000,
				// });
			},

			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.status === 'nomore') {
						return;
					}
					this.status = 'loading';
				} else {
					this.status = 'more';
				}

				var list = []
				console.log('listQuery', this.listQuery)
				this.$api.RiskAlertPage(this.listQuery).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)

					// this.listQuery = {
					// 	current: resp.current,
					// 	size: 10,
					// 	params: {

					// 	}
					// }

					list = resp.records

					console.log("消息列表", list)

					if (type === 'refresh') {
						this.dataList = [];
					}

					this.dataList = this.dataList.concat(list);
					console.log("消息列表>>>>>", this.dataList.length)
					console.log("list.total>>>>>", resp.total)
					//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
					this.status = this.dataList.length > resp.total ? 'nomore' : 'more';
					if (type === 'refresh') {
						if (loading == 1) {
							uni.hideLoading();
						} else {
							uni.stopPullDownRefresh();
						}
					}

				}).catch(e => {
					console.log('eeeee', e)
				})

			},

			itemClick(item) {
				console.log('item', item)
				console.log('item', item.type)


				if ('图片对比异常' == item.type) {
					// 设备离线
					uni.navigateTo({
						url: "/pages/index/GoodsException?sid=" + item.riskSid
					})
				} else if ('设备离线' == item.type) {
					// 设备离线
					uni.navigateTo({
						url: "/pages/index/DeviceException?sid=" + item.riskSid
					})
				} else if ('设备离线解除' == item.type) {
					// 设备离线解除
					uni.navigateTo({
						url: "/pages/index/DeviceException?sid=" + item.riskSid
					})
				} else if ('系统异常' == item.type) {
					// 系统故障
					uni.navigateTo({
						url: "/pages/index/SystemFailure?date=" + item.messageTime
					})
				} else {
					uni.showToast({
						icon: "none",
						title: '暂不支持',
						duration: 2000,
					});
					return
				}
			},
			textClick(resp,index) {
				
					console.log('resp', resp)
					console.log('index', index)
					
				this.info.warehouseSid = resp.shSid
				this.info.warehouseName = resp.templateMessageVo.shName
				this.info.exceptionTime = resp.messageTime
				this.info.linkers = resp.linkers
				
				
				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">
	.popup-show {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.page {
		width: 100%;
		height: 100%;

		.drawerView {
			height: 100%;
			display: flex;
			flex-direction: column;
			padding: 15px 20px;
			background: #fff;

			.drawerView-date {
				margin-top: 20px;
				display: flex;
				flex-direction: row;
				align-items: center;

				.drawerView-date-text {
					text-align: center;
					background-color: #F4F5F9;
					border-radius: 20px;
					padding: 10px 20px;
					font-size: 14px;
				}
			}

			.to_do_content_list {
				position: relative;
				padding: 15px;
				margin: 15px;
				border-radius: 5px;
				background: #eee;
				color: #666;
				overflow: hidden;
				display: flex;
				align-items: center;
			}

			// .to_do_content_list::after {
			// 	position: absolute;
			// 	content: "";
			// 	top: 0;
			// 	bottom: 0;
			// 	left: 0;
			// 	width: 10px;
			// 	background: #2C405A;

			// }

			.to_do_content_list_checkbox {
				padding-right: 20px;
				padding-left: 10px;
			}

			.checkbox {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: #FFFFFF;
			}

			.to_do_finish .checkbox {
				position: relative;
				background: #FFFFFF;
			}

			.to_do_finish .checkbox:after {
				position: absolute;
				content: "";
				height: 10px;
				width: 10px;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				border-radius: 50%;
				background: #007AFF;
			}

			.to_do_finish .to_do_content_list_cont {
				color: #007AFF;
			}

			// .to_do_finish.to_do_content_list:before {

			// 	position: absolute;
			// 	content: "";
			// 	left: 40px;
			// 	right: 10px;
			// 	top: 0;
			// 	bottom: 0;
			// 	height: 2px;
			// 	margin: auto 0;
			// 	background: #007AFF;
			// }

			.to_do_finish.to_do_content_list::after {
				background: #C35CDF;
			}


			.drawerView-bom {
				width: 85%;
				position: fixed;
				display: flex;
				flex-direction: row;
				align-items: center;
				bottom: 0;
				min-height: 40px;
				margin-bottom: 50px;
				background: #EA4726;
				border-radius: 20px;
				padding: 1px;

				.drawerView-bom-text1 {
					flex: 1;
					text-align: center;
					min-height: 38px;
					line-height: 38px;
					color: #EA4726;
					background: #fff;
					font-size: 14px;
					border-radius: 20px 0px 20px 20px;
					// border-top-left-radius: 20px;
					// border-bottom-left-radius: 20px;
					// border-bottom-right-radius:20px;
				}

				.drawerView-bom-text2 {
					flex: 1;
					line-height: 38px;
					color: #fff;
					font-size: 14px;
					text-align: center;
				}
			}

		}

		.search {
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #007AFF;
			width: 100%;
			padding: 10px;

			.search-input {
				flex: 1;
				margin-left: 15px;
				background: #fff;
				border-radius: 30px;
				padding: 5px;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 20px;

				.search-input-img {
					margin-left: 10px;
					width: 20px;
					height: 20px;
				}

				.search-input-text {
					margin-left: 10px;
					font-size: 14px;
					color: #000;
				}
			}

			.search-text {
				margin-right: 30px;
				font-size: 15px;
				color: #fff;
			}
		}

		.scrollviewCss {
			overflow-y: hidden;
			height: 90vh;

			.newslist {
				display: flex;
				flex-direction: column;
				background: #fff;
				margin-left: 12px;
				margin-right: 12px;
				margin-top: 12px;
				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: 14px;
							color: #434343;
						}

						.top-item-text2 {
							font-size: 14px;
							color: #434343;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}

				}

				.bomLay {
					margin-top: 15px;
					display: flex;
					flex-direction: row;

					.bomLay-item {
						flex: 1;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.bomLay-item-img {
							width: 15px;
							height: 15px;
						}

						.bomLay-item-text {
							color: #777;
							margin-left: 3px;
							font-size: 12px;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
				}

				.bombtn {
					margin-top: 15px;
					display: flex;
					flex-direction: row;

					.bombtn-item {
						margin-left: 20px;
						padding: 5px 20px;
						color: #fff;
						font-size: 14px;
						background: #2F96E1;
						border-radius: 5px;
					}
				}
			}

		}
	}
</style>