<template>
	<div class="app_current_data">
		<el-table :data="baseData" size="small">
			<el-table-column prop="deviceid" align="center" label="设备id" />
			<el-table-column prop="deviceid" align="center" label="设备名称">
				<template slot-scope="scope">
					<div v-for="item in devices" :key="item.deviceid">
						<div v-if="scope.row.deviceid === item.deviceid">{{ item.name }}</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="itemName" align="center" label="监测项" />
			<el-table-column align="center" label="监测值">
				<template slot-scope="scope">
					<span v-if="scope.row.itemName != '风向'">
						{{ scope.row.data }}
					</span>
					{{ scope.row.unit }}
				</template>
			</el-table-column>
			<el-table-column prop="dtime" align="center" label="时间" />

			<el-table-column prop="data" align="center" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="onOpenRouter(scope.row)">查看历史</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--分页组件-->
		<!-- <el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" /> -->
	</div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { del } from '@/api/sData'
import { deptByUseridNoPage } from '@/api/dept'
import { loaddevice } from '@/api/sDevice'
import { getData } from '@/api/sData'
import { parseTime, timeParse } from '@/utils/index'

import { loadNowDataByUserid, sItem } from '@/api/home'
import { queryAllByUseridNoPage } from '@/api/sDevice'

export default {
	data() {
		return {
			delLoading: false,
			depts: '',
			devices: '',
			items: [],
			sub: {},
			queryData: '',
			deptparam: '',
			deviceparam: '',
			itemparam: '',
			loading: false,
			data: [],
			page: 1,
			size: 10,
			total: 0,
			url: '',
			params: {},
			dtime: [],

			starttime: '', //开始时间
			endtime: '', //结束时间
			devicesCopy: '', // 获取设备名称
			baseData: '', //实时数据
		}
	},
	created() {
		this.$nextTick(() => {
			this.loaddeptByUserid()
		})
	},

	mounted() {
		let day = 15 * 1 * 86400 * 1000
		let dateCur = Date.parse(new Date())
		this.starttime = timeParse(dateCur - day) // 开始时间
		this.endtime = timeParse() // 结束时间

		this.init()
	},

	methods: {
		parseTime,
		checkPermission,

		onOpenRouter(e) {
			console.log(e)
			this.$router.push({
				path: 'smart1/smart',
				query: {
					deviceid: e.deviceid,
					item: e.item,
				},
			})
		},

		init() {
			queryAllByUseridNoPage().then(response => {
				this.devicesCopy = response
			})

			loadNowDataByUserid().then(res => {
				sItem({
					page: 0,
					size: 1000,
					sort: 'id,desc',
				}).then(resItem => {
					res.map((item, index) => {
						for (let i of resItem.content) {
							if (i.code == item.item) {
								if (i.subject == '风向') {
									if (i.unit == 0) {
										i.unit = '北风'
									}

									if (i.unit == 1) {
										i.unit = '东北风'
									}

									if (i.unit == 2) {
										i.unit = '东风'
									}

									if (i.unit == 3) {
										i.unit = '东南风'
									}

									if (i.unit == 4) {
										i.unit = '南风'
									}

									if (i.unit == 5) {
										i.unit = '西南风'
									}

									if (i.unit == 6) {
										i.unit = '西风'
									}

									if (i.unit == 7) {
										i.unit = '西北风'
									}
								}

								item.itemName = i.subject
								item.unit = i.unit
							}
						}
						return item
					})

					this.baseData = res
				})
			})
		},

		// 获取部门ID
		loaddeptByUserid() {
			deptByUseridNoPage().then(response => {
				this.depts = response
				this.deptparam = this.depts[0].id
				this.loaddevice()
			})
		},

		// 获取设备列表
		loaddevice() {
			loaddevice(this.deptparam).then(response => {
				this.devices = response
				this.deviceparam = response[0].deviceid
				this.loaditem()
			})
		},

		// 设备列表下面的子选项
		loaditem() {
			this.items = []
			for (var i = 0; i < this.devices.length; i++) {
				if (this.deviceparam === this.devices[i].deviceid) {
					var code = this.devices[i].code.split(',')
					var subject = this.devices[i].subject.split(',')
					for (var j = 0; j < code.length; j++) {
						this.sub = {}
						this.sub.code = code[j]
						this.sub.subject = subject[j]
						this.items[j] = this.sub
					}
				}
			}
			this.itemparam = this.items[0].code

			const query = this.$route.query
			if (query.item) {
				this.deviceparam = query.deviceid
				this.itemparam = query.item
			}

			this.QueryDataStart()
		},

		// 点击搜索
		QueryDataStart() {
			this.page = 1
			this.QueryData()
		},

		QueryData() {
			const sort = 'dtime,esc'
			// if (this.deviceparam === '' || this.itemparam === '' || this.starttime === '' || this.endtime === null) {
			// 	this.$notify({
			// 		title: '请选择查询信息！',
			// 		type: 'warning',
			// 		duration: 2500,
			// 	})
			// 	return
			// }

			// 时间跨度不能超过14天！
			// var s = new Date(this.endtime.replace(/-/g, '/')) - new Date(this.starttime.replace(/-/g, '/'))
			// var day = s / 1000 / 60 / 60 / 24
			// if (day > 14) {
			// 	this.$notify({
			// 		title: '时间跨度不能超过14天！',
			// 		type: 'warning',
			// 		duration: 2500,
			// 	})
			// 	return
			// }

			this.loading = true
			this.params = { page: this.page, size: this.size, sort: sort }
			getData(this.deviceparam, this.itemparam, this.starttime, this.endtime, this.params).then(response => {
				this.data = response.data
				this.total = response.total
				this.dataNopage = response.dataNopage
				this.loading = false
				if (this.data.length === 0) {
					this.$notify({
						title: '没有数据！',
						type: 'warning',
						duration: 2500,
					})
					return
				}
				this.dtime = response.dataNopage.map(function(data) {
					return data.dtime
				})
			})
		},
		pageChange(e) {
			this.page = e
			this.QueryData()
		},
		sizeChange(e) {
			this.page = 0
			this.size = e
			this.QueryData()
		},
		subDelete(id) {
			this.delLoading = true
			del(id)
				.then(res => {
					this.delLoading = false
					this.$refs[id].doClose()
					this.dleChangePage()
					this.$notify({
						title: '删除成功',
						type: 'success',
						duration: 2500,
					})
				})
				.catch(err => {
					this.delLoading = false
					this.$refs[id].doClose()
				})
		},
	},
}
</script>

<style lang="scss">
.app_current_data {
	padding: 2vh 4vh;
	.el-table th {
		background: #3c78ff;
		color: #fff;
	}
}
</style>
