<template>
	<div class="ReportViewing">
		<div style="margin-bottom:50px;display: flex;">
			<el-descriptions title="报告信息" border>
			    <el-descriptions-item label="报告名称">报告名称</el-descriptions-item>
			    <el-descriptions-item label="创建时间">2022-05-18 14:30:00</el-descriptions-item>
			    <el-descriptions-item label="修改时间">2022-05-18 14:30:00</el-descriptions-item>
			</el-descriptions>
		</div>
		<div class="companyManagement1">
			<div class="companyManagement1-R">
				<el-input class="s1" size="small" v-model="page.name" placeholder="请输入SN" clearable></el-input>
				<el-input class="s1" size="small" v-model="page.name" placeholder="请输入编号" clearable></el-input>
				<el-date-picker class="s1" size="small" v-model="page.name" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="searchTimeData">
				</el-date-picker>
				<el-button class="s1 sBtn" size="small" type="primary" icon="el-icon-search"></el-button>
			</div>
			<div class="companyManagement1-L">
				<el-dropdown class="s1" @command="commands">
					<el-button type="primary" size="small" icon="el-icon-download">
						下载<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="a">查看验证方案</el-dropdown-item>
						<el-dropdown-item command="b">查看验证报告</el-dropdown-item>
						<el-dropdown-item command="c">查看校准证书</el-dropdown-item>
						<el-dropdown-item command="d">下载当前数据</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<div class="companyManagement2">
			<el-table :data="tableData" border size="small">
				<el-table-column label="ID">
					<template slot-scope="scope">
						<span>{{ scope.row.date }}</span>
					</template>
				</el-table-column>
				<el-table-column label="设备编号">
					<template slot-scope="scope">
						{{ scope.row.name }}
					</template>
				</el-table-column>
				<el-table-column label="SN">
					<template slot-scope="scope">
						<span>{{ scope.row.date }}</span>
					</template>
				</el-table-column>
				<el-table-column label="温度℃">
					<template slot-scope="scope">
						{{ scope.row.name }}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="companyManagement3">
			<el-pagination @current-change="handleCurrentChange" :current-page="page.pagez" :page-size="page.page_size"
				layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<pdf ref="pdf"></pdf>
	</div>
</template>

<script>
	import pdf from "./pdf.vue"
	import Axios from 'axios'
	import fileDownload from 'js-file-download' 
	import {
		TaskGet
	} from '@/api/ReportViewing'
	export default {
		props:['ReportVal'],
		name: 'ReportViewing',
		components: {
			pdf
		},
		data() {
			return {
				src: '',
				dia: null,
				LabelWidth: "40px",
				total: 30,
				page: {
					pagez: 1,
					page_size: 10,
					name: ''
				},
				page1: {
					pagez: 1,
					page_size: 10,
					name: ''
				},
				tableData: [{
					date: '铜仁公司',
					name: '数据采集工程师',
					time: '2022-12-21 12:00:00'
				}, {
					date: '国控总部',
					name: '冷链负责人',
					time: '2022-12-21 12:00:00'
				}, {
					date: '国控毕节公司',
					name: '冷链负责人',
					time: '2022-12-21 12:00:00'
				}],
			}
		},
		watch: {
			ReportVal: {
				handler: function() {
					console.log('变化',news)
				},
				// 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码
				deep: true
			}
		},
		mounted() {
			this.GetTaskGetApi()
		},
		methods: {
			SetValue(e){
				console.log('ref',e)
			},
			GetTaskGetApi(){
				TaskGet({}).then(res=>{
					console.log(res)
				})
			},
			commands(e) {
				switch (e) {
					case 'a':
						this.$refs.pdf.SetPdf()
						break
					case 'b':
						this.$refs.pdf.SetPdf()
						break
					case 'c':
						this.$refs.pdf.SetPdf()
						break
					default:
						fileDownload('res.data', '111.docx');
						// Axios({
						// 	method: 'get',
						// 	url: 'this.downUrl',
						// 	responseType: 'blob'
						// }).then(res => {
						// 	console.log(res)
						// 	fileDownload(res.data, '111.docx');
						// });
				}
			},
			searchTimeData(e) {
				console.log('时间选择', e)
			},
			handleCurrentChange(val) {
				this.page.pagez = val
				console.log('当前页', this.page);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.el-input {
		margin-right: 10px;
		width: 200px;
	}

	.ReportViewing {
		.companyManagement1 {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.companyManagement1-L {}
			.companyManagement1-R {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				// .sBtn{
				// 	margin-left: 10px;
				// }
				
				.s1{
					margin-bottom: 10px;
					margin-right: 10px;
				}
				
			}
		}

		.companyManagement2 {
			margin-top: 10px;
		}

		.companyManagement3 {
			margin-top: 40px;
		}
	}
</style>
