<template>
	<div class="common-page device-manage">

		<div class="option page-row">
			<!--工具栏-->
			<div class="head-container">
				<!-- 搜索 -->
				<label class="el-form-item-label" style="font-weight: 500;">选择日期</label>
				<el-date-picker v-model="query.createTime" type="date" placeholder="选择日期"></el-date-picker>

				<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
				<el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
				<el-button type="primary" icon="el-icon-upload2" @click="daochu()">导出</el-button>
			</div>
		</div>

    	<!-- 表格 -->
		<div class="panel-bottom page-row">
			<h3>卸点产量日报({{currentTime}})</h3>
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<div class="content" style="margin-top:15px;">
							<el-table id="dataTable" :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
                <el-table-column prop="uploadingPointName" label="卸点" align="center"></el-table-column>
                <el-table-column prop="plan" label="日计划量" align="center"></el-table-column>
                <el-table-column prop="actualProd" label="实际日产量" align="center"></el-table-column>
                <el-table-column prop="rate" label="完成率" align="center"></el-table-column>
                <el-table-column prop="timeOfWork" label="挖机工作时间(h)" align="center"></el-table-column>
                <el-table-column prop="numberOfCC" label="挖机车数" align="center"></el-table-column>
                <el-table-column prop="numberOfKC" label="卡车车数" align="center"></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, Dates} from '@/assets/js/common.js';
import { exportToExcel } from '@/utils/excelUtils';

export default {
	data() {
		return {
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			query:{},
			tableData: [],
			currentTime:'',
		}
	},
	mounted() {
		this.currentTimeFn();
		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {
		loadData() {
			var sort = 'id,desc';
			var param = {...this.query};
			param.page = this.page - 1;
			param.pageSize = this.size;
			param.sort = sort;
      param.dmy = "day";
      if(this.query.createTime){
        param.queryTime = this.changeTimeFn(this.query.createTime);
      }else{
        param.queryTime = this.currentTime;
      }

      this.$nextTick(() => {
          HttpReq.truckDispatching.jxxdTable(param).then((res) => {
            this.loading = false;
            if (res.code == 200 && res.data) {
              this.tableData = res.data.data;
              this.total = res.data.total;
            }
          })
      })
    },
		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.query = {};
			this.currentTimeFn();
			this.loadData();
		},
		pageChange(e) {
			this.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.loadData()
		},
		//获取当前时间
		currentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			//修改日期格式
			if (day >= 0 && day <= 9) {
				day = "0" + day;
			}
			let currentFormatDate = year + "-" + month + "-" + day;
			this.currentTime = currentFormatDate;
		},
		//转换查询时间
		changeTimeFn(time){
			var date = new Date(time);
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			//修改日期格式
			if (day >= 0 && day <= 9) {
				day = "0" + day;
			}
			let currentFormatDate = year + "-" + month + "-" + day;
			this.currentTime = currentFormatDate;
			return currentFormatDate;
		},
		//导出
		daochu(){
      exportToExcel("卸点产量日报("+ this.currentTime+")", document.querySelector('#dataTable'), this);
			// //获取表格
			// 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 = "卸点产量日报("+ this.currentTime + ").xls";  //设置被下载的超链接目标（文件名）
			// a.href = link;                            //设置a标签的链接
			// document.body.appendChild(a);            //a标签添加到页面
			// a.click();                                //设置a标签触发单击事件
			// document.body.removeChild(a);            //移除a标签
		},
	}
}
</script>

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

	.device-manage{
		.panel-bottom{
			.el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
			.btn-groub2{
				display:inline-block;
				.el-button{margin:2px 0;padding:6px 15px;font-size:15px;}
				.el-button--warning {
					background-color: #e6a23c;
					border-color: #e6a23c;
				}
				.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
			}
		}
	}

	.ecahrt1-dialog{
		display:flex;align-items:center;
		.el-dialog{
			margin-top:inherit !important;display:table !important;width:fit-content;
			.el-form-item{margin-right:0;}
		}

		.el-dialog__header{height:0;padding:0;display:block;}
		.form-body{
			border:1px solid #999;width:800px;height:500px;position:relative;
			>div{position:absolute;top:0;left:0;height:100%;width:100%;}
		}
	}
</style>
