<template>
	<div class="common-page">
		<div class="option page-row">
			<!--工具栏-->
			<div class="head-container">
				<!-- 搜索 -->
				<label class="el-form-item-label" style="font-weight: 500;">设备编号</label>
				<el-input v-model="query.equipmentCode" clearable placeholder="请输入设备识别码或名称" style="width:200px;" @clear="clearLimit"/>

				<el-date-picker
				  v-model="query.createTime"
				  type="datetimerange"
				  value-format="yyyy-MM-dd HH:MM:SS"
				  range-separator="至"
				  start-placeholder="开始日期"
				  end-placeholder="结束日期">
				</el-date-picker>

				<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>

				<el-button
					:loading="download.loading"
					:disabled="!tableData.length"
					size="mini"
					type="warning"
					icon="el-icon-download"
					@click="daochu"
					style="margin-left:10px;"
				  >导出</el-button>
			</div>
		</div>
		<div class="panel-bottom page-row">
			<h3>设备管理列表</h3>
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<div class="content">
							<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
								<!--<el-table-column prop="subcode" label="设备识别码" width="135px"></el-table-column>
								<el-table-column prop="ename" label="设备名称"></el-table-column>
								<el-table-column prop="helement" label="电量"></el-table-column>
								<el-table-column prop="htemperature" label="温度值" ></el-table-column>
								<el-table-column prop="hhumidity" label="湿度值"></el-table-column>
								<el-table-column prop="hlenght1" label="宽度一"></el-table-column>
								<el-table-column prop="hlenght2" label="宽度二"></el-table-column>
								<el-table-column prop="hlenght3" label="宽度三"></el-table-column>
								<el-table-column prop="hsignal" label="信号强度"></el-table-column>-->
								<el-table-column prop="equipmentName" label="所属设备名称" width="135px"></el-table-column>
								<el-table-column prop="equipmentCode" label="设备标识码"></el-table-column>
								<el-table-column prop="windspeed" label="历史风速"></el-table-column>
								<el-table-column prop="temperature" label="历史温度"></el-table-column>
								<el-table-column prop="humidity" label="历史湿度"></el-table-column>
								<el-table-column prop="co2" label="历史二氧化碳"></el-table-column>
								<el-table-column prop="mlux" label="历史光照"></el-table-column>
								<el-table-column prop="ph" label="历史酸碱度"></el-table-column>
								<el-table-column prop="waterTemperature" label="历史水温"></el-table-column>
								<el-table-column prop="electricalConductance" label="历史电导率"></el-table-column>
								<el-table-column prop="waterDepth" label="历史液位"></el-table-column>
								<el-table-column prop="createTime" label="记录时间" width="180px"></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>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Tools, HttpReq, FileStream, Dates} from '@/assets/js/common.js';
import DateRangePicker from '@/components/DateRangePicker';
import cuAmap from '@/components/AMap';
import { parseTime, downloadFile } from '@/utils/index'
// style
import '@/assets/styles/common.css';

export default {
	name: 'Dashboard',
	components: {
		DateRangePicker, cuAmap
	},
	data() {
		return {
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			query:{},
			tableData: [],
			download:{
				loading:false,
			}
		}
	},
	mounted() {
		var that = this;

		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {
		tableRowClassName({row, rowIndex}) {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		},
		// 点击搜索
		toSearch() {
			this.page = 1
			this.loadData()
		},
		clearLimit(){		// 清除限制
			this.loadData()
		},
		loadData() {
			var that = this, sort = 'createTime,desc';
			var param = this.query;
			param.page = this.page - 1;
			param.size = this.size;
			param.sort = sort;

			this.loading = true;
			HttpReq.historys.getItem(param).then((res) => {
				this.loading = false;
				if(res.code === 200){
					var body = res.data || {};
					var list = body.content || [];
					this.tableData = list;
					this.total = body.totalElements
				};
			}).catch(function(error) {
				this.loading = false;
			})
		},
		pageChange(e) {
			this.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.loadData()
		},
		daochu(){
		//获取表格
		var exportFileContent = document.querySelector(".el-table").outerHTML;           
			//设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
			//exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
			//var link = "data:"+MIMEType+";base64," + exportFileContent;
			//使用Blob
			var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"});     	//解决中文乱码问题
			blob =  new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
			//设置链接
			var link = window.URL.createObjectURL(blob); 
			var a = document.createElement("a");    //创建a标签
			a.download = '华菱光电-历史数据' + Dates.format('yyyy-MM-dd-HH-mm-ss')+'.xls';  //设置被下载的超链接目标（文件名）
			a.href = link;                            //设置a标签的链接
			document.body.appendChild(a);            //a标签添加到页面
			a.click();                                //设置a标签触发单击事件
			document.body.removeChild(a);            //移除a标签
		},
		/**
		* 导出
		*/
		doExport() {
			this.download.loading = true;

			var that = this, sort = 'createTime,desc';
			var param = this.query;
			param.page = this.page - 1;
			param.size = this.size;
			param.sort = sort;
			// param.table = {
			// 	title:'华菱光电－历史监控记录表',
			// 	header:{
			// 		"subcode":"设备识别码",
			// 		"ename":"设备名称",
			// 		"helement":"电量",
			// 		"htemperature":"温度值",
			// 		"hhumidity":"湿度值",
			// 		"hlenght1":"宽度一",
			// 		"hlenght2":"宽度二",
			// 		"hlenght3":"宽度三",
			// 		"hsignal":"信号强度",
			// 		"createTime":"记录时间",
			// 	}
			// };
			HttpReq.export.historyExport(param).then((res) => {
				//if(res.head.code === 200){
					this.download.loading = false;
					//var blob = FileStream.toBlob(res.body);
					downloadFile(res, '华菱光电-历史数据' + Dates.format('yyyy-MM-dd HH-mm-ss'), 'xls')
					//FileStream.download(blob, '华菱光电-历史数据' + Dates.format('yyyy-MM-dd HH-mm-ss')+'.xlsx')
				//};
			}).catch(function(error) {
				this.download.loading = false
			})
		},
	}
}
</script>

<style rel="stylesheet/scss" lang="scss">
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
	
	.dialog-map{border:1px solid green;height:300px;width:480px;}

</style>
