<template>
	<view class="container">
		<!-- 个人信息 -->
		<view class="info">
			<div class="left">
				<div class="icon">
					<image style="width: 100%; height: 100%; border-radius: 50%" :src="default_src" mode="aspectFill">
					</image>
				</div>
				<div class="info_name">
					<div v-if="userList.userName">{{ userList.nickName }}</div>
					<div v-if="userList.dept">
						{{ userList.dept.deptName || '' }}
					</div>
				</div>
			</div>
			<div class="right">
				<u-icon name="bell-fill" size="30" color="#fff" @click="todetailmessgae()">

				</u-icon>
				<u-badge bgColor=" #de2433" :offset='[25,20]' :value="messagelist.length" :absolute='true'></u-badge>
			</div>
		</view>
		<!-- nav -->
		<view class="navBar" style="display: flex;flex-wrap: wrap;">
			<div class="navList" v-for="(item, index) in getNavList" :key="index">
				<div @click="myNavigateTo(item.url,item.value)"
					style="display:flex;flex-direction: column;align-items: center;">
					<div class="navIcon">
						<image style="width: 100%; height: 100%" :src="item.icon" mode="aspectFit"></image>
						<div class="readStatus" v-show="
                (xcStatus && item.key == 1) || (handleStatus && item.key ==3) ||
                (warnStatus && item.key == 4)
              "></div>
					</div>
					<div class="navTxt">{{ item.value }}</div>
				</div>
			</div>
		</view>
		<view class="warn">
			<sk-info />
		</view>
		<view class="warn1" v-for="item in Ylzlist" :key="item.stnm">
			<ylz-list :item='item' />
		</view>
		<view class="info_24"
			:style="{display:'flex',justifyContent:'center',alignItems:'center',padding:'5px 0',margin:'0'}">
			<image :style="{width:'20px',height:'20px',marginRight:'10px'}" src="../../static/logoc.png"></image>
			<div>技术支持: 湖北鲧石物联科技有限公司</div>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	const stm = moment().startOf('year').format("YYYY-MM-DD HH:mm:ss");
	const etm = moment().format("YYYY-MM-DD HH:mm:ss");
	const warnStm = moment().subtract(1, "days").format("YYYY-MM-DD HH:mm:ss")
	const warnetm = moment().format("YYYY-MM-DD HH:mm:ss")
	import SkInfo from '../skInfo/index.vue'
	import YlzList from '../ylzList/index.vue'
	let timer = null;
	export default {
		components: {
			SkInfo,
			YlzList
		},
		data() {
			return {
				Ylzlist: [],
				userList: uni.getStorageSync('value'),
				default_src: uni.getStorageSync('avatar'),
				messagelist: [],
				ylzList: [],
				xcStatus: false, //巡查任务状态
				handleStatus: false, //问题处理
				warnStatus: false, //预警
			}
		},
		onPullDownRefresh() {
			this.getXcrwData();
			this.getHandleData();
			this.getYjData();
			uni.$showMsg("刷新成功");
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		computed: {
			getNavList() {
				return [{
						value: '巡查任务',
						key: 1,
						icon: '../../static/tabs/xcrw.png',
						url: '/pages/xcrw/index'
					},
					{
						value: '维修养护',
						key: 2,
						icon: '../../static/tabs/wxyh.png',
						url: '/pages/wxyh/index'
					},
					{
						value: '问题处理',
						key: 3,
						icon: '../../static/tabs/wtcl.png',
						url: '/pages/wtcl/index'
					},
					{
						value: '预警',
						key: 4,
						icon: '../../static/tabs/yujing_icon@2x2.png',
						url: '/pages/yj/index'
					},
					{
						value: '视频监控',
						key: 5,
						icon: '../../static/tabs/spjk.png',
						url: '/pages/spjk/index'
					},
					{
						value: '生态流量监控',
						key: 6,
						icon: '../../static/tabs/stlljk.png',
						url: '/pages/stlljk/index'
					},
					{
						value: '安全监测',
						key: 7,
						icon: '../../static/tabs/aqjc.png',
						url: '/pages/aqjc/index'
					},
				]
			}
		},
		methods: {

			getYlzList() {
				uni.$http.post('/gunshiApp/xyt/stPptnRReal/list').then(res => {
					if (res.data.code == 200) {
						this.Ylzlist = res.data.data
					}
				})
			},
			getList() {
				uni.$http.post('/gunshiApp/xyt/messageCenter/list', {
					start: '',
					end: ''
				}).then(res => {
					if (res.data.code == 200) {
						this.messagelist = res.data.data
					}
				})
			},
			todetailmessgae() {
				uni.navigateTo({
					url: '/pages/messageList/index'
				})
			},

			async setInsert(menu2) {
				try {
					const params = {
						createId: uni.getStorageSync('value').userId,
						loginType: 1,
						menu1: '首页',
						menu2: menu2 || '首页',
					}
					const {
						data
					} = await uni.$http.post('/gunshiApp/xyt/visitMenuLog/insert', params)
				} catch (error) {}
			},
			myNavigateTo(url, menu2) {
				uni.navigateTo({
					url: url // 跳转到对应路径的页面
				})
				this.setInsert(menu2)
			},

			// 巡查任务
			async getXcrwData() {
				const userId = uni.getStorageSync('value').userId
				const params = {
					dateRangeSo: {
						start: stm,
						end: etm,
					},
					inspectUserId: userId,
					statusList: [0, 1]
				}
				try {
					const res = await uni.$http.post("/gunshiApp/xyt/inspect/task/list", params)
					if (res.data.data.length > 0) {
						this.xcStatus = true
					}
				} catch (error) {
					uni.$showMsg();
				}
			},

			// 问题处理
			async getHandleData() {
				let params = {
					"pageSo": {
						"pageSize": 10,
						"pageNumber": 1
					},
					"dateTimeRangeSo": {
						start: stm,
						end: etm
					},
					"isHandle": 0,
					"inspectUserId": uni.getStorageSync('value').userId
				}
				try {
					const res = await uni.$http.post("/gunshiApp/xyt/inspect/detail/page", params)
					if (res.data.data.records.length > 0) {
						this.handleStatus = true
					}
				} catch (error) {
					uni.$showMsg();
				}
			},
			// 预警
			async getYjData() {
				const params = {
					start: warnStm,
					end: warnetm
				}
				try {
					const res = await uni.$http.post("/gunshiApp/xyt/stQxWarnR/home/warn", params)
					const {
						flowWarn,
						pressWarn,
						qxWarn,
						shiftWarn
					} = res.data.data
					const arr = [...flowWarn, ...pressWarn, ...qxWarn, ...shiftWarn]
					if (arr.length > 0) {
						this.warnStatus = true
					}
				} catch (error) {
					uni.$showMsg();
				}
			},
		},

		onLoad() {
			this.getYlzList();
		},

		onShow() {
			var that = this;
			that.getList();
			timer = setInterval(function () {
				that.getList();
			}, 10000);

			this.setInsert()
			this.getXcrwData();
			this.getHandleData();
			this.getYjData();
		},
		onHide() {
			clearInterval(timer)
			timer = null;
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		font-size: 14px;
		line-height: 24px;
		background-color: #f3f5f8;
		height: 100%;
		overflow: auto;

	}

	.info {
		height: 100rpx;
		background-color: #007afd;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		color: #fff;
	}

	.left {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.icon {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #fff;
		text-align: center;
		color: #007afd;
		line-height: 50px;
	}

	.info_name {
		margin-left: 16rpx;
	}

	.right {
		text-align: center;
	}

	.navBar {
		padding: 13px;
		padding-bottom: 0;
		/* text-align: center; */
		display: flex;
		background-color: #fff;
		// justify-content: center;
		margin-bottom: 10px;
	}

	.navList {
		text-align: center;
		margin-right: 0px;
		margin-bottom: 10px;
	}

	.navIcon {
		position: relative;
		width: 84px;
		height: 50px;
	}

	.readStatus {
		position: absolute;
		top: 0;
		right: 17px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #de2433;
	}

	.warn {
		padding: 18rpx 20rpx;
		text-align: left;
		margin-bottom: 12rpx;
		background: #fff;
	}

	.warn1 {
		padding: 18rpx 20rpx;
		text-align: left;
		// margin-bottom: 12rpx;
		background: #fff;
	}

	.info_24 {
		width: 100%;
		// position: fixed;
		// padding: 15px;
		background-color: #fff;
		// margin-bottom: 12rpx;
		height: 100px;
	}

	.title .line {
		border: 2px solid #3380ff;
		border-radius: 3rpx;
		margin-right: 20rpx;
	}

	.title .h4 {
		font-weight: 400;
		font-size: 32rpx;
		color: #121b3d;
	}

	.time {
		font-weight: 400;
		font-size: 24rpx;
		color: #a2a2a2;
	}

	.g1 {
		color: #545556;
	}

	.ye {
		color: #ff1717;
		/* font-weight: 600; */
	}

	.b1 {
		color: #3380ff;
		padding: 0 2px;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	/* 表格 */
	.tableBox {
		width: 100%;
		position: relative;
	}

	.leftTab {
		width: 80px;
		/* border-bottom: 1px solid #ccc; */
	}

	.rightTab {
		width: 80px;
		/* border: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    border-left: 0; */
	}

	.activetextTypeTab,
	.activetextTypeTab:hover {
		border-bottom: 3rpx solid #2286f6;
		color: #026be0;
	}

	.table_div {
		widows: 100%;
		height: 100%;
		max-width: calc(100% - 0px);
		max-height: calc(100vh - 24px);
		flex: 1;
		padding-top: 30px;
		overflow-x: scroll;
	}

	/*table样式*/
	.table_cur {
		width: 100%;
		empty-cells: show;
		border-collapse: collapse;
		font-size: 14px;
	}

	.table_cur tr {
		display: flex;
		line-height: 56rpx;
	}

	.table_cur th {
		height: 56rpx;
		color: #2f4056;
		background: #f5f6f8;
		font-size: 14px;
		font-weight: bold;
		padding: 0 10px;
		box-sizing: border-box;
		white-space: nowrap;
		text-align: center !important;
	}

	.table_cur td {
		height: 56rpx;
		border-bottom: 1px solid #e5e9f2;
		font-size: 14px;
		color: #2f4056;
		padding: 0 10px;
		box-sizing: border-box;
		white-space: nowrap;
		text-align: center !important;
	}

	/*table样式 end*/
	.noData {
		width: 100px;
	}
</style>