<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>测报系统</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/index/tccb' }"
				>糖醋测报</el-breadcrumb-item
			>
			<el-breadcrumb-item>数据详情</el-breadcrumb-item>
		</el-breadcrumb>
		<el-button type="success" size="small" @click="goBackPage()"
			><i class="el-icon--left el-icon-d-arrow-left"></i>返回</el-button
		>
		<div class="equipInfo">
			<div class="detail">
				<span>设备ID：{{ 4456 }}</span>
				<span>设备名称：无</span>
				<span>位置：黑龙江省，鸡西市，鸡东县</span>
				<span>已培养时间(h)：0</span>
			</div>
			<div class="time-check">
				<el-button type="primary" size="mini" @click="equipBtnControl('status')"
					>刷新</el-button
				>
			</div>
		</div>
		<el-card class="box-card">
			<div class="statusBox">
				<div class="equipStatus">
					<div class="equipIcon">
						<img src="@/assets/images/forecasting/cbd/staticIcon1.png" alt />
					</div>
					<div class="equipParams">
						<strong>{{
							equipStatus.device_status == 1 ? '在线' : '离线'
						}}</strong>
						<p>在线状态</p>
					</div>
				</div>
				<div class="equipStatus">
					<div class="equipIcon">
						<img src="@/assets/images/forecasting/cbd/staticIcon2.png" alt />
					</div>
					<div class="equipParams">
						<strong>{{ equipStatus.device_name }}</strong>
						<p>设备名称</p>
					</div>
				</div>
				<div class="equipStatus">
					<div class="equipIcon">
						<img src="@/assets/images/forecasting/cbd/staticIcon3.png" alt />
					</div>
					<div class="equipParams">
						<strong>糖醋测报</strong>
						<p>设备类型</p>
					</div>
				</div>
				<div class="equipStatus">
					<div class="equipIcon">
						<img src="@/assets/images/forecasting/cbd/staticIcon4.png" alt />
					</div>
					<div class="equipParams">
						<strong>{{
							equipStatus.batstatus == 0 ? '正常' : '电量过低'
						}}</strong>
						<p>电池状态</p>
					</div>
				</div>
				<div class="equipStatus">
					<div class="equipIcon">
						<img src="@/assets/images/forecasting/cbd/staticIcon5.png" alt />
					</div>
					<div class="equipParams">
						<strong>{{ equipStatus.vbat }}</strong>
						<p>电压(V)</p>
					</div>
				</div>
				<div class="equipStatus">
					<div class="equipIcon">
						<img src="@/assets/images/forecasting/cbd/staticIcon6.png" alt />
					</div>
					<div class="equipParams">
						<strong>{{ equipStatus.ah }}</strong>
						<p>环境湿度(RH)</p>
					</div>
				</div>
				<div class="equipStatus">
					<div class="equipIcon">
						<img src="@/assets/images/forecasting/cbd/staticIcon7.png" alt />
					</div>
					<div class="equipParams">
						<strong>{{ equipStatus.at }}</strong>
						<p>环境温度(℃)</p>
					</div>
				</div>
				<div class="equipStatus">
					<div class="equipIcon">
						<img src="@/assets/images/forecasting/cbd/staticIcon8.png" alt />
					</div>
					<div class="equipParams">
						<strong>{{ equipStatus.csq }}</strong>
						<p>信号强度</p>
					</div>
				</div>
				<div class="equipStatus">
					<div class="equipIcon">
						<img src="@/assets/images/forecasting/cbd/staticIcon9.png" alt />
					</div>
					<div class="equipParams">
						<strong>{{ equipStatus.dver }}</strong>
						<p>设备版本</p>
					</div>
				</div>
			</div>
		</el-card>
		<div style="margin-top: 10px">
			<SearchBar @fun="getDisplayType">
				<div slot="search-common">
					<DateSearch @dateChange="dateChange"></DateSearch>
				</div>
			</SearchBar>
		</div>
		<template v-if="displayType == 1">
			<el-card class="box-card">
				<div class="charts">
					<highcharts :options="option1"></highcharts>
				</div>
			</el-card>
		</template>
		<template v-if="displayType == 2">
			<el-card class="box-card">
				<el-table :data="tableData" stripe style="width: 100%">
					<el-table-column
						v-for="(item, index) in tableHeadTxt"
						:key="index"
						:prop="item[1]"
						:label="item[0]"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">{{
							scope.row[scope.column.property]
						}}</template>
					</el-table-column>
				</el-table>
				<el-pagination
					background
					layout="prev, pager, next"
					:total="total"
					:current-page="queryInfo.page"
					@current-change="changePage"
				></el-pagination>
			</el-card>
		</template>
	</div>
</template>

<script>
import DateSearch from '@/components/DateSearch'
import SearchBar from '@/components/SearchBar'
export default {
	data() {
		return {
			equipStatus: {},
			displayType: 1,
			total: 0,
			queryInfo: {
				begin: '',
				end: '',
				e_id: this.$route.params.e_id,
				d_id: this.$route.params.d_id,
				page: 1
			},
			option1: {},
			tableHeadTxt: [
				['环境温度(℃)', 'at'],
				['环境湿度(RH)', 'ah'],
				['信号强度', 'csq'],
				['电池状态', 'batstatus'],
				['电压(V)', 'vbat'],
				['设备版本', 'dver'],
				['上报时间', 'addtime']
			],
			// 表格数据
			tableData: []
		}
	},
	mounted() {
		this.getStatus()
	},
	methods: {
		//获取折线数据
		getChartDataList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
				data: this.qs.stringify({
					device_type_id: 9,
					d_id: this.queryInfo.d_id,
					start_time: this.queryInfo.begin,
					end_time: this.queryInfo.end
				})
			}).then((res) => {
				if (res.data.message == '') {
					var ChartData = [
						{
							name: '温度（°C）',
							dat: []
						},
						{
							name: '湿度（RH）',
							dat: []
						},
						{
							name: '信号强度',
							dat: []
						}
					]
					var data = res.data.data
					for (let item of data) {
						ChartData[0].dat.unshift([
							item.addtime * 1000 + 8 * 3600000,
							item.temperature
						])
						ChartData[1].dat.unshift([
							item.addtime * 1000 + 8 * 3600000,
							item.humidity
						])
						ChartData[2].dat.unshift([
							item.addtime * 1000 + 8 * 3600000,
							item.others
						])
					}
					this.option1 = {
						chart: {
							zoomType: 'x'
						},
						title: {
							text: '历史数据',
							align: 'left'
						},
						subtitle: {
							text: ''
						},
						xAxis: {
							crosshair: true, //十字基准线
							type: 'datetime',
							dateTimeLabelFormats: {
								//根据时间间距X轴自动显示哪种格式
								millisecond: '%H:%M:%S.%L',
								second: '%H:%M:%S',
								minute: '%H:%M',
								hour: '%H:%M',
								day: '%m-%d',
								week: '%m-%d',
								month: '%Y-%m',
								year: '%Y'
							}
						},
						yAxis: {
							title: {
								text: ''
							}
						},
						legend: {
							// layout: 'vertical',
							align: 'right',
							verticalAlign: 'top'
						},
						plotOptions: {
							series: {
								label: {
									connectorAllowed: false
								},
								pointStart: 2010 //该参数定义了数据点的起点
							}
						},
						series: [
							{
								name: ChartData[0].name,
								data: ChartData[0].dat
							},
							{
								name: ChartData[1].name,
								data: ChartData[1].dat
							},
							{
								name: ChartData[2].name,
								data: ChartData[2].dat
							}
						],
						colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
						credits: {
							//去掉默认的highcharts.com
							enabled: false
						},
						tooltip: {
							// crosshairs: true,
							shared: true, //折线共享
							headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>'
						},
						responsive: {
							rules: [
								{
									condition: {
										maxWidth: 500
									},
									chartOptions: {
										legend: {
											layout: 'horizontal',
											align: 'center',
											verticalAlign: 'bottom'
										}
									}
								}
							]
						}
					}
				}
			})
		},
		//获取表格数据
		getHisDataList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.device_history_data',
				data: this.qs.stringify({
					device_type_id: 9,
					device_id: '300151',
					start_time: this.queryInfo.begin,
					end_time: this.queryInfo.end,
					page: this.queryInfo.page
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.total = res.data.data.counts
					var data = res.data.data.data
					if (data.length > 0) {
						this.tableData = []
						for (var i = 0; i < data.length; i++) {
							var dht = data[i].d_h_t
							dht.ah = dht.ah
							dht.at = dht.at
							dht.csq = dht.csq
							dht.batstatus = dht.bat_sta == 0 ? '正常' : '电量过低'
							dht.vbat = dht.vbat
							dht.dver = dht.dver
							dht.addtime = this.formatTime(dht.addtime * 1000)
							this.tableData.push(dht)
						}
					}
				}
			})
		},
		//获取设备最新状态
		getStatus() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.tccb_device',
				data: this.qs.stringify({
					device_id: '300151'
				})
			}).then((res) => {
				if (res.data.message == '') {
					var data = res.data.data[0]
					this.equipStatus = data
				}
			})
		},

		dateChange(data) {
			console.log(data)
			this.queryInfo.page = 1
			this.queryInfo.begin = data.begin
			this.queryInfo.end = data.end
			this.getChartDataList()
			this.getHisDataList()
		},
		getDisplayType(data) {
			console.log(data)
			this.displayType = data
		},
		changePage(val) {
			this.queryInfo.page = val
		},
		equipBtnControl(cmd) {
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=forecast.send_control.tccbd_device_control',
				data: this.qs.stringify({
					cmd,
					device_type_id: 9,
					d_id: this.queryInfo.d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('指令下发成功!')
				}
			})
		},
		//返回上一页
		goBackPage() {
			this.$router.go(-1)
		}
	},
	components: {
		DateSearch,
		SearchBar
	}
}
</script>

<style lang='less' scoped>
.equipInfo {
	display: flex;
	margin-bottom: 10px;
	justify-content: space-between;
	.detail {
		font-size: 14px;
		color: #666;
		span {
			margin-right: 20px;
		}
	}
}
.statusBox {
	display: flex;
	justify-content: space-between;
	text-align: center;
	strong {
		font-size: 15px;
	}
}
.charts {
	height: 400px;
}
</style>