<template>
	<el-dialog class="dialog_table" :visible.sync="dialogVisible" top="10vh" width="70%" :before-close="handleClose">
		<br />
		<div class="tools-wrapper">
			<div class="device-wrapper">
				<span>设备标识:&nbsp;&nbsp;</span>
				<el-select v-model="curSelectDeviceId" placeholder="请选择设备" @change="changeDevice">
					<el-option
						v-for="item in deviceIds"
						:key="item"
						:label="item"
						:value="item"
					></el-option>
				</el-select>
				<el-button type="success" size="medium" @click="queryCore">查询</el-button>
			</div>
			<div class="switch-wrapper">
				<el-button type="primary" size="medium" @click.stop="clickToSwitchTable">切换</el-button>
			</div>
		</div>
		<div v-show="switchTable">
			<el-table :data="tableData" style="width: 100%" height="55vh">
				<el-table-column prop="company" label="企业站点">
					<template>
						<span>{{ companyName }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="location" label="采集站"></el-table-column>
				<el-table-column prop="item" label="检测项"></el-table-column>
				<el-table-column prop="value" label="数据值">
					<template slot-scope="scope">
						{{scope.row.value.trim() !== void 0 ? scope.row.value.trim() +' '+ (itemUnit[scope.row.item.trim()] || '') : ''}}
					</template>
				</el-table-column>
				<el-table-column prop="deviceid" label="设备标识"></el-table-column>
				<el-table-column prop="insertTime" label="采集时间"></el-table-column>
			</el-table>
			<el-pagination layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
		</div>
		<div v-show="!switchTable" id="enterStatistics" style="width: 100%; height: 55vh">

		</div>
	</el-dialog>
</template>

<script>
import { timeParse, randNum, getValueUnit } from '@/utils'
import { environment, findAllDeviceId, analyzeTrend } from '@/api/weikuangku'
export default {
	data() {
		return {
			dialogVisible: false,
			inputItem: '',
			start_time: '',
			stop_time: '',
			tableData: [],
			total: 0,
			page: 0,
			companyName: '',
			itemUnit:getValueUnit(),
			// 设备标识
			deviceIds: [],
			// 当前选中的设备
			curSelectDeviceId: '',
			// 切换
			switchTable: true
		}
	},
	methods: {
		core() {
			const compony_info = this.$store.state.compony_info
			this.companyName = compony_info.name
			environment({
				page: this.page,
				size: 10,
				sort: 'id,desc',
				deviceId: this.curSelectDeviceId,
				companycode: compony_info.companycode,
			}).then(res => {
				this.tableData = [...res.content]
				this.total = res.totalElements
			})

			this.dialogVisible = true
		},

		onVisual() {
			this.$store.commit('set_is_show_huan_jing_jian_ce', randNum(12, 100, 1))
		},

		// 开始时间
		onChangeStart(e) {
			this.start_time = timeParse(e) // 开始时间
		},

		// 结束时间
		onChangeStop(e) {
			this.stop_time = timeParse(e) // 开始时间
		},

		handleClose() {
			this.dialogVisible = false
		},

		handleCurrentChange(e) {
			this.page = e - 1
			this.core()
		},

		clickToSwitchTable() {
			if (!this.curSelectDeviceId ) {
				this.$message.error("请选择设备")
				return
			}
			this.switchTable = !this.switchTable
			analyzeTrend(this.$store.state.compony_info.companycode, this.curSelectDeviceId).then(res => {
				console.log(res, 'res , analyzeTrend')
				const xData = res.map(item => item.acquisitionDate)
				const yData = res.map(item => item.value)
				// 切换图标
				if (this.switchTable === false) {
					this.$nextTick(() => {
						// 画图表
						const mychart = echarts.init(document.getElementById('enterStatistics'))
						mychart.clear()
						const option = {
							xAxis: {
								type: 'category',
								data: xData
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{
									data: yData,
									type: 'line'
								}
							]
						}
						mychart.setOption(option)
					})
				}
			})

		},

		changeDevice() {
			if (this.switchTable === false) {
				analyzeTrend(this.$store.state.compony_info.companycode, this.curSelectDeviceId).then(res => {
					console.log(res, 'res , analyzeTrend')
					const xData = res.map(item => item.acquisitionDate)
					const yData = res.map(item => item.value)
					// 切换图标
					if (this.switchTable === false) {
						this.$nextTick(() => {
							// 画图表
							const mychart = echarts.init(document.getElementById('enterStatistics'))
							mychart.clear()
							const option = {
								xAxis: {
									type: 'category',
									data: xData
								},
								yAxis: {
									type: 'value'
								},
								series: [
									{
										data: yData,
										type: 'line'
									}
								]
							}
							mychart.setOption(option)
						})
					}
				})
			}
		},

		queryCore() {
			this.core()
		}
	},

	computed: {
		is_show_huan_jing_jian_ce_table() {
			return this.$store.state.is_show_huan_jing_jian_ce_table
		},
	},

	watch: {
		is_show_huan_jing_jian_ce_table() {
			this.core()
		},
		dialogVisible(newVal, oldVal) {
			if (newVal === true) {
				findAllDeviceId(this.$store.state.compony_info.companycode).then(res => {
					this.deviceIds = [...res]
				})
			}
			
		}
		
	},
}
</script>

<style lang="scss">
.dialog_table {
	.el-table::before {
		height: 0;
	}

	.el-dialog__body {
		padding-top: 0;

		.func_comm {
			margin-bottom: 1vh;

			strong {
				margin-right: 0.5vw;
			}

			.el-button {
				padding: 0;
				width: 5vw;
				height: 40px;
			}
		}
	}
}
.tools-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.device-wrapper {
		margin-left: 40px;
	}
	.switch-wrapper {
		margin-right: 40px;
	}
	margin-bottom: 10px;
}
</style>
