<template>
	<div class="dashboard-container">
		<div class="dashboard-editor-container">
			<panel-group :baseData="baseData" :totalElements="totalElements" :gourpData="gourpData" />

			<el-row :gutter="15">
				<el-col :xs="24" :sm="24" :lg="9">
					<div class="chart-wrapper">
						<line-chart :gourpData="gourpData" />
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="6">
					<div class="chart-wrapper">
						<pie-chart :warnSum="warnSum" />
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="9">
					<div class="chart-wrapper">
						<LineChart2 />
					</div>
				</el-col>
			</el-row>
			<br />
			<el-row class="current_data">
				<div class="current_title">
					<span>实时数据列表</span>
					<span style="color: #185EFE" @click="onClickMore">查看更多</span>
				</div>
				<div class="table_group">
					<el-table :data="tableData" size="small" style="width: 49%;flex: 0 0 auto;" height="35vh" :row-class-name="tableRowClassName">
						<el-table-column prop="deviceid" align="center" width="200px" label="设备名称">
							<template slot-scope="scope">
								<div v-for="item in devices" :key="item.deviceid">
									<div style="color: #46a6ff;cursor: pointer;" @click="onClickTo" 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="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-table :data="tableData2" size="small" style="width: 49%;flex: 0 0 auto;" height="35vh" :row-class-name="tableRowClassName">
						<el-table-column prop="deviceid" align="center" width="200px" label="设备名称">
							<template slot-scope="scope">
								<div v-for="item in devices" :key="item.deviceid">
									<div style="color: #46a6ff;cursor: pointer;" @click="onClickTo" 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="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>
				</div>
			</el-row>
			<!-- <kongzhiqi />
      <device /> -->
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import LineChart2 from './dashboard/LineChart2'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import kongzhiqi from './smart/device/kongzhiqi.vue'
import device from './smart/device/device.vue'
import { loadNowDataByUserid, sItem, sWarnmsgByUserid, sDeviceByUseridNotdevType, sDeviceByUseridAnddevType } from '@/api/home'
import { queryAllByUseridNoPage, getOnOffCount } from '@/api/sDevice'

// import { count } from '@/api/visits'

/**
 * 记录访问，只有页面刷新或者第一次加载才会记录
 */
// count().then(res => {})

export default {
	name: 'Dashboard',
	components: {
		PanelGroup,
		LineChart,
		LineChart2,
		RaddarChart,
		PieChart,
		BarChart,
		kongzhiqi,
		device,
	},
	computed: {
		...mapGetters(['roles']),
	},

	data() {
		return {
			tableData: [],
			tableData2: [],
			baseData: [],
			devices: [],
			totalElements: 0, // 报警总数
			warnSum: 65, //报警总数

			facility: 0, //设备总数
			facility_onLine: 0, //在线
			facility_offLine: 0, //离线

			controller: 0, //控制器总数
			controller_onLine: 0, //在线
			controller_offLine: 0, //离线

			gourpData: {},
		}
	},

	mounted() {
		const params = {
			page: 0,
			size: 1000,
			sort: 'id,desc',
		}

		// 获取报警 总数
		sWarnmsgByUserid(params).then(res => {
			let index = 0
			res.content.map(item => {
				if (item.flg == 1) {
					index++
				}
			})

			if (res.totalElements > 0) {
				this.warnSum = (index / res.totalElements).toFixed(2) * 100
				this.totalElements = res.totalElements
			}
		})

		// 设备
		sDeviceByUseridNotdevType(params).then(res => {
			this.facility = res.totalElements
			let onLine = 0 // 在线
			let offLine = 0 // 离线
			res.content.map(item => {
				if (item.online == '在线') {
					onLine++
				}

				if (item.online == '离线') {
					offLine++
				}
			})

			/* this.facility_onLine = onLine
			this.facility_offLine = offLine */

			// 验收前固定值
			this.facility_onLine = 26
			this.facility_offLine = 0
		})

		// 控制器
		sDeviceByUseridAnddevType(params).then(res => {
			this.controller = res.totalElements
			let onLine = 0 // 在线
			let offLine = 0 // 离线
			res.content.map(item => {
				if (item.online == '在线') {
					onLine++
				}

				if (item.online == '离线') {
					offLine++
				}
			})

			this.controller_onLine = onLine
			this.controller_offLine = offLine
		})
		
		// 设备统计
		getOnOffCount({}).then(res => {
			this.gourpData = {
				facility: res.devoff + res.devon, //设备总数
				facility_onLine: res.devon, //在线
				facility_offLine: res.devoff, //离线
				controller: res.relayoff + res.relayon, //控制器总数
				controller_onLine: res.relayon, //在线
				controller_offLine: res.relayoff, //离线
			}
		})

		
		/* setTimeout(() => {
			this.gourpData = {
				facility: this.facility, //设备总数
				facility_onLine: this.facility_onLine, //在线
				facility_offLine: this.facility_offLine, //离线

				controller: this.controller, //控制器总数
				controller_onLine: this.controller_onLine, //在线
				controller_offLine: this.controller_offLine, //离线
			}
		}, 500) */

		this.init()
	},

	methods: {
		// 报警样式
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2  == 1) {
				return 'warning-row'
			}
			return ''
		},

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

		onClickTo() {
			this.$router.push({
				path: 'smart/device',
			})
		},

		// 实时更多
		onClickMore() {
			this.$router.push({
				path: 'smart1/cdata',
			})
		},

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

			loadNowDataByUserid().then(res => {
				sItem({
					page: 0,
					size: 1000,
					sort: 'id,desc',
				}).then(resItem => {
					res = res.slice(0, 10)
					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
							}
						}

						if (index % 2 == 0) {
							this.tableData.push(item)
						} else {
							this.tableData2.push(item)
						}
						return item
					})

					this.baseData = res
				})
			})
		},
	},
}
</script>

<style lang="scss">
.dashboard-container {
	height: calc(100vh - 100px);
	overflow: hidden;
	background-color: #F1F3F8;

	.el-table .warning-row {
		background: #3c78ff0f;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.el-table th.is-leaf, .el-table td {
		border: none;
	}

	.dashboard-editor-container {
		padding: 1vh 22px 0 22px;
		.chart-wrapper {
			background: #fff;
			border-radius: 5px;
		}
	}

	.current_data {
		padding: 0 1vw;
		background: #fff;
		.current_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 600;
			height: 6vh;

			span {
				cursor: pointer;
			}
		}

		.table_group {
			display: flex;
			justify-content: space-between;
			overflow: hidden;

			.el-table {
				background: #fff;
				border-top-left-radius: 0.3vw;
				border-top-right-radius: 0.3vw;
			}

			.el-table--small th,
			.el-table--small td {
				padding: 1vh 0;
			}
		}
	}

	.el-table th {
		background: #3c78ff;
		color: #fff;
	}
}
</style>
