<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">
				<!-- <div>{{ monthDay }}</div>
        <div>{{ dataType[dayOfWeek] }}</div> -->
				<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="
                (readStatus && item.key == 3) || (dispatchStatus && item.key ==5 && limit == 0) ||
                (limit == 1 && readYjStatus && item.key == 5)
              "></div>
					</div>
					<div class="navTxt">{{ item.value }}</div>
				</div>
			</div>
		</view>
		<view class="warn">
			<!--  <image
        style="
          width: 18rpx;
          height: 22rpx;
          margin-right: 16rpx;
          vertical-align: middle;
        "
        src="../../static/tabs/ld.png"
        mode="aspectFit"
      ></image
      ><span style="color: #000">当前防汛应急响应：</span>
      <span style="color: #59a7ff">{{ !level || !yjStatus ? '无' : level }}</span> -->
			<sk-info />
		</view>
		<view class="warn" v-for="item in Ylzlist">
			<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>
	const dataType = {
		Monday: '星期一',
		Tuesday: '星期二',
		Wednesday: '星期三',
		Thursday: '星期四',
		Friday: '星期五',
		Saturday: '星期六',
		Sunday: '星期天'
	}

	import moment from 'moment'
	import {
		level
	} from '../../pages/utils/dicType'
	import {
		disType
	} from '../utils/dicType.js'
	import drpOption from './chartOption.js'
	import {
		restm
	} from '../utils/tool'
	import SkInfo from '../skInfo/index.vue'
	import YlzList from '../ylzList/index.vue'

	export default {
		components: {
			SkInfo,
			YlzList
		},
		data() {
			return {
				Ylzlist:[],
				monthDay: '',
				dayOfWeek: '',
				dataType,
				userList: uni.getStorageSync('value').data,
				changeBool: false,
				tableData: [],
				loading: false,
				list: {},
				date: '',
				ydate: '',
				showTextTypeTab: 1,
				tableData: {},
				tm: '',
				level: '',
				yjStatus: 0,
				// limit: disType(uni.getStorageSync('value').adcd),
				limit: 1,
				value1: 3,
				rainChartData: [],
				formData: {
					stm: moment()
						.subtract(1, 'days')
						.startOf('day')
						.set({
							hour: 8,
							minute: 0
						}),
					etm: moment().startOf('day').set({
						hour: 8,
						minute: 0
					})
				},
				rainChartData: [],
				chartData: {},
				current: 0,
				hdList: [],
				skList: [],
				readStatus: false, //工灾情状态
				readYjStatus: false, //预警状态
				dispatchStatus: false, //调令状态
				default_src: uni.getStorageSync('avatar'),
				imgList: {},
				imgtm: moment().format('YYYYMMDD'),
				imgData: [],
				imgHours: '',
				imgHourstm: [],
				imgHoursList: {
					url: ''
				},
				interval: null,
				numPic: 0,
				allStatus: false,
				messagelist:[],
				ylzList:[],
			}
		},
		onPullDownRefresh() {
			// this.getSwiperList()
			this.getOverview()
			this.getDataTime()
			this.getResponseLevel()
			this.getDispatchStatus()
			this.getReadStatus()
			if (this.limit == 1) {
				this.getYjRead()
				// this.getInterval()
				this.getImgs()
				this.getHoursImg()
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		computed: {
			getNavList() {
				return [
					{
						value: '巡查任务',
						key: 1,
						icon: '../../static/tabs/yujing_icon@2x2.png',
						url: '/pages/xcrw/index'
					},
					{
						value: '维修养护',
						key: 2,
						icon: '../../static/tabs/yujing_icon@2x2.png',
						url: '/pages/wxyh/index'
					},
					{
						value: '问题处理',
						key: 3,
						icon: '../../static/tabs/yujing_icon@2x2.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/yujing_icon@2x2.png',
						url: '/pages/spjk/index'
					},
						{
						value: '生态流量监控',
						key: 6,
						icon: '../../static/tabs/yujing_icon@2x2.png',
						url: '/pages/stlljk/index'
					},
					{
						value: '安全监测',
						key: 7,
						icon: '../../static/tabs/yujing_icon@2x2.png',
						url: '/pages/aqjc/index'
					},
				]
			}
		},
		watch: {
			rainChartData(newValue) {
				this.chartData = {
					...drpOption(newValue)
				}
			},
			limit: {
				handler(newValue) {
					if (!newValue) {
						this.getRainList()
					}
				},
				immediate: true
			},
			current: {
				handler(newValue) {
					if (newValue == 0) {
						this.getHdList()
					} else {
						this.getSkList()
					}
				},
				immediate: true
			},
			allStatus: {
				handler(newValue) {
					const newArr = this.getNavList()

				},
				immediate: true
			}
		},
		methods: {
			getYlzList(){
				
				uni.$http.post('/gunshiApp/xyt/stPptnRReal/list').then(res => {
							
					if (res.data.code == 200) {
						this.Ylzlist = res.data.data
							
					}
				})
			},
			getList() {
				console.log(111);
				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 getImgs() {
				let h = moment().format('HH')
				let m = moment().format('mm')
				uni.request({
					url: 'http://223.75.53.124:8005/grb/latest',
					success: res => {
						const myTm = res.data.data.tm
						if (myTm) {
							uni.request({
								url: 'http://223.75.53.124:8005/grb/rainimglist',
								data: {
									tm: moment(myTm).format('YYYYMMDDHH')
								},
								success: res => {
									console.log(res.data.data)
									this.imgList = res.data.data

									// let inx = restm(h)

									// this.imgHours = res.data.data.imgHours[inx]

									let tm = moment().add(1, 'days').format('MM月DD日')
									let tm2 = moment().format('MM月DD日')
									this.imgData = [`${tm2}08时`, `${tm}08时`]
									// this.imgHourstm = [`${tm2}${h + 1}时`, `${tm2}${h + 2}时`]
								}
							})
						}
					}
				})
			},
			getTmData() {
				let hn = this.numPic > 0 ? this.numPic : 1
				let h = moment().subtract(hn, 'hours').format()
				let m = moment().format('mm')
				console.log('hhh--', h, m, this.numPic)
				let tms = null,
					mm = null
				let h1 = Number(h) - 1
				if (h1 < 9) {
					h1 = Number(h) - this.numPic
				}
				if (h1 < 10) {
					h1 = `0${h1}`
				}
				if (m > 30) {
					h1 = Number(h) - 1
					let m1 = h > 10 ? h : `0${h}`
					tms = `${this.imgtm}${m1}30`
					mm = '30'
				} else if (m < 10) {
					tms = `${this.imgtm}${h1}`
					mm = '00'
				} else {
					tms = `${this.imgtm}${h1}30`
					mm = '30'
				}
			},
			async getHoursImg() {
				let h = moment().format('HH')
				let m = moment().format('mm')
				console.log('hhh--', h, m, this.numPic)
				let tms = null,
					mm = null
				let h1 = Number(h) - 1

				if (h1 < 10) {
					let t = Number(h1) - Number(this.numPic)
					h1 = `0${t}`
				}
				if (m > 30) {
					h1 = Number(h) - 1
					let t3 = Number(h) - this.numPic
					if (this.numPic <= 0) {
						let m3 = h1 > 10 ? h1 : `0${h1}`
						tms = `${this.imgtm}${m3}30`
					} else {
						t3 = t3 < 10 ? `0${t3}` : t3
						tms = `${this.imgtm}${t3}30`
					}
					mm = '30'
				} else if (m < 10) {
					tms = `${this.imgtm}${h1}00`
					mm = '00'
				} else {
					tms = `${this.imgtm}${h1}30`
					mm = '30'
				}

				console.log('小时', h1)
				console.log('需要参数', tms)

				uni.request({
					url: 'http://223.75.53.124:8005/radar/latest',
					success: res => {
						let tm = moment(res.data.data.tm);
						let subfix = '?rainFile=' + res.data.data.rainFile;
						let url =
							`http://shqxjs.cloudowr.cn/yj_folder/rain/radar/${tm.format('YYYYMM')}/${tm.format('DD')}/${tm.format('YYYYMMDDHHmm')}+00.02.jpg${subfix}`;
						console.log(222222222227, url)

						console.log('pic---', tms, res.data.data)
						this.imgHoursList = {
							'url': url
						}
						let m = moment().format('MM月DD日')

						console.log('am222', this.imgHoursList)
						let m1 = Number(h1) + 2
						this.imgHourstm = [`${m}${h1}时${mm}分`, `${m}${m1}时${mm}分`]

						if (url == null) {
							this.numPic++
							setTimeout(() => {
								this.getHoursImg()
							}, 10 * 1000)
						} else {
							this.numPic = 0
							return
						}
					}
				})
			},

			// async getInterval () {
			//   this.interval = setInterval(() => {
			//     this.getHoursImg()
			//   }, 60 * 1000)
			// },
			async getYjRead() {
				try {
					const {
						data
					} = await uni.$http.get(
						'/gunshiApp/xfflood/current/situation/flag'
					)
					if (data.code == 200) {
						this.readYjStatus = data.data
					}
				} catch (error) {
					uni.$showMsg()
				}
			},
			async getReadStatus() {
				try {
					const {
						data
					} = await uni.$http.get(
						'/gunshiApp/xfflood/xfProjectRun/has/read'
					)
					if (data.code == 200) {
						this.readStatus = Object.values(data.data).some(item => item == true)
					}
				} catch (error) {
					uni.$showMsg()
				}
			},
			async getDispatchStatus() {
				try {
					const res = await uni.$http.post('/gunshiApp/xfflood/xfEmerDispatchR/app/list', {
						status: 1,
						dispatchTypeList: ["0", "1"]
					})
					if (res.data.code == 200) {
						this.dispatchStatus = res.data.data.length > 0 ? true : false
					}
				} catch (error) {
					console.log(error);
				}
			},
			async setInsert(menu2) {
				try {
					const params = {
						createId: uni.getStorageSync('value').userId,
						loginType: 1,
						menu1: '首页',
						menu2: menu2 || '首页',
					}

					const {
						data
					} = await uni.$http.post('/gunshiApp/xfflood/visitMenuLog/insert', params)
					console.log('用户行为', params, data)
				} catch (error) {}
			},
			jumpHdDetail(params) {
				uni.navigateTo({
					url: `/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}`
				})
			},
			jumpSkDetail(params) {
				uni.navigateTo({
					url: `/pages/skDetail/skDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&afsltdz=${params.afsltdz}&flLowLimLev=${params.flLowLimLev}&desFloodLev=${params.desFloodLev}&calFloodLev=${params.calFloodLev}&resCode=${params.resCode}`
				})
			},
			async getSkList() {
				try {
					const {
						data
					} = await uni.$http.post(
						'/gunshiApp/xfflood/reservoir/water/list', {
							sources: ['SW', 'SK'],
							adcd: uni.getStorageSync('value').adcd
						}
					)
					if (data.code == 200) {
						this.skList = data.data
					}
				} catch (error) {
					uni.$showMsg()
				}
			},
			async getHdList() {
				try {
					const {
						data
					} = await uni.$http.post(
						'/gunshiApp/xfflood/river/water/list', {
							sources: ['SH', 'SW'],
							adcd: uni.getStorageSync('value').adcd
						}
					)
					if (data.code == 200) {
						this.hdList = data.data
					}
				} catch (error) {
					uni.$showMsg()
				}
			},
			subChange(e) {
				this.current = e
			},
			async getRainList() {
				try {
					const {
						data
					} = await uni.$http.post(
						'/gunshiApp/xfflood/real/rain/home/list', {
							start: this.formData.stm.format('YYYY-MM-DD HH:mm:ss'),
							end: this.formData.etm.format('YYYY-MM-DD HH:00:00')
						}
					)
					if (data.code == 200) {
						console.log('rainChartData0,', data)
						this.rainChartData = data.data
					}
				} catch (error) {
					uni.$showMsg()
				}
			},
			changeTime(params) {
				let tmValue = []
				if (params === 1) {
					tmValue = [
						moment()
						.subtract(1, 'days')
						.startOf('day')
						.set({
							hour: 8,
							minute: 0
						}),
						moment()
					]
				} else if (params === 2) {
					tmValue = [
						moment().startOf('day').set({
							hour: 8,
							minute: 0
						}),
						moment()
					]
				} else if (params === 3) {
					tmValue = [
						moment()
						.subtract(1, 'days')
						.startOf('day')
						.set({
							hour: 8,
							minute: 0
						}),
						moment().startOf('day').set({
							hour: 8,
							minute: 0
						})
					]
				} else if (params === 4) {
					tmValue = [moment().subtract(1, 'hours'), moment()]
				} else if (params === 5) {
					tmValue = [moment().subtract(3, 'hours'), moment()]
				} else if (params === 6) {
					tmValue = [moment().subtract(6, 'hours'), moment()]
				} else if (params === 7) {
					tmValue = [moment().subtract(12, 'hours'), moment()]
				} else if (params === 8) {
					tmValue = [moment().subtract(24, 'hours'), moment()]
				}
				this.formData.stm = tmValue[0]
				this.formData.etm = tmValue[1]
				this.getRainList()
			},
			todetail(val) {
				console.log('val', val)
				if (val == 1) {
					uni.navigateTo({
						url: '/pages/rain/index'
					})
				}
				if (val == 3) {
					uni.navigateTo({
						url: '/pages/gqzq/index'
					})
				}
			},
			tabChange(val) {
				this.showTextTypeTab = val
				if (val == 1) {
					this.getWeather()
				} else {
					this.getWeatherArea()
				}
			},
			changeTable(val) {
				this.changeBool = !this.changeBool
				if (val) {
					this.getWeather()
				}
				console.log('this.changeBool', this.changeBool)
			},
			// 区域 /weather/area
			async getWeatherArea() {
				try {
					const res = await uni.$http.post('/gunshiApp/xfflood/weather/area', {
						tm: this.tm
					})
					console.log('--44-', res)
					this.tableData = res
					// this.userList = res.data

					// console.log('--333-', this.tableData)
				} catch (e) {
					uni.$showMsg()
				}
			},
			// 水库 /weather/res
			async getWeather() {
				try {
					const res = await uni.$http.post('/gunshiApp/xfflood/weather/res', {
						tm: this.tm
					})
					console.log('--3-', res)
					this.tableData = res
					// this.userList = res.data

					console.log('--333-', this.tableData)
				} catch (e) {
					uni.$showMsg()
				}
			},
			async getSwiperList() {
				try {
					const res = await uni.$http.get('/gunshiApp/xfflood/getLoginInfo')
					console.log('--1-', res.data)
					this.userList = res.data

					console.log('--1-', this.userList)
				} catch (e) {
					uni.$showMsg()
				}
			},
			async getOverview() {
				try {
					let res = await uni.$http.get('/gunshiApp/xfflood/real/rain/overview')
					console.log('--2-', res)
					this.list = res.data

					console.log('--2-', res)
				} catch (e) {
					uni.$showMsg()
				}
			},

			getDataTime() {
				this.monthDay = moment().format('MM月DD日')
				this.dayOfWeek = moment().format('dddd')
				this.date = moment().format('MM月DD日HH时')
				this.ydate = moment().subtract(1, 'days').format('MM月DD日HH时')
				console.log('moment11', this.date, this.ydate)
				let d1 = moment().format('YYYYMMDD')
				let h1 = moment().format('HH') >= 20 ? '20' : '08'

				this.tm = d1 + h1
			},
			async getResponseLevel() {
				try {
					const {
						data
					} = await uni.$http.post(
						'/gunshiApp/xfflood/xfEmerRespR/page', {
							pageSo: {
								pageSize: 10,
								pageNumber: 1
							},
							year: moment().format('YYYY')
						}
					)
					if (data.code == 200) {
						if (data.data.records.length > 0) {
							console.log('1111111data', data)
							this.level = level(data.data.records[0].level)
							this.yjStatus = data.data.records[0].status
						} else {
							this.level = '无'
						}
					}
				} catch (e) {
					uni.$showMsg()
				}
			},
			myNavigateTo(url, menu2) {
				uni.navigateTo({
					url: url // 跳转到对应路径的页面
				})
				console.log(url);

				this.setInsert(menu2)
			}
			// 响应级别
		},
		onLoad() {
			// this.getSwiperList()
			this.getOverview()
			this.getDataTime()
			this.getResponseLevel()
			this.getList()
			this.getYlzList()
			this.userList = uni.getStorageSync('value')
			console.log(this.userList.userName, uni.getStorageSync('value'), '=============777777');

		},

		onShow() {
			this.getReadStatus()
			this.getResponseLevel()
			this.getDispatchStatus()
			this.setInsert()
			// this.userList=uni.getStorageSync('value')
			// 
			// console.log(this.userList.userName,uni.getStorageSync('value'),'=============777777');
			if (this.limit == 1) {
				this.getYjRead()
				// this.getInterval()
				this.getImgs()
				this.getHoursImg()
			}
		}
		// onUnload () {
		//   clearInterval(this.interval)
		//   this.interval = null
		// }
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
		background-color: #f3f5f8;
	}

	.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 {
		background-color: #fff;
		padding: 18rpx 20rpx;
		text-align: left;
		margin-bottom: 12rpx;
	}

	/* 24小时 */
	.chartChange {
		text-align: center;
		margin: 16rpx 0;
	}

	.chart_tit {
		width: 129rpx;
		height: 43rpx;
		background: #d3e1ff;
		border-radius: 20rpx;
		color: #3380ff;
	}

	.chart_tit image {
		margin-right: 10rpx;
		width: 36rpx;
		height: 30rpx;
	}

	.table_h {
		display: flex;
		text-align: center;
		height: 24px;
		/* position: absolute;
    top: 0;
    right: 0; */
	}

	/* info_24 */
	.info_24 {
		padding: 15px;
		background-color: #fff;
		margin-bottom: 12rpx;
	}

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

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

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