<template>
	<div class="CompanyAccount">
		<div class="CompanyAccount-mai">
			<div class="CompanyAccount1">
				<div class="CompanyAccount1-R">
					<el-input v-model="pages.T_name" placeholder="请输入账户" @keyup.enter.native="search(0)" clearable>
					</el-input>
					<el-button class="s1 sBtn" type="primary" icon="el-icon-search" @click="search(0)">搜索</el-button>
				</div>
			</div>
			<div class="CompanyAccount2">
				<el-table :data="tableData" border size="small">
					<el-table-column label="账号">
						<template slot-scope="scope">
							<span>{{ scope.row.T_name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="small" :disabled="scope.row.T_pdf1===''?true:false"
								@click="handleEdit1(scope.row)">验证方案</el-button>
							<el-button size="small" :disabled="scope.row.T_pdf2===''?true:false"
								@click="handleEdit2(scope.row)">验证报告</el-button>
							<el-button size="small" :disabled="scope.row.T_pdf3===''?true:false"
								@click="handleEdit3(scope.row)">校准证书</el-button>
							<el-button size="small" @click="handleEdit4(scope.row)">验证数据</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="CompanyAccount3">
				<el-pagination @current-change="handleCurrentChange" :current-page="pages.page"
					:page-size="pages.page_z" layout="total, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
		<el-drawer title="验证设备数据" :visible.sync="Drawer" direction="rtl" ref="drawer" size="90%">
			<div class="demo-drawers">
				<div class="demoDra1">
					<div class="demoDra1-R">
						<el-input class="s1" v-model="pages1.T_sn" @keyup.enter.native="search(1)" placeholder="请输入SN"
							clearable></el-input>
						<el-input class="s1" v-model="pages1.T_id" @keyup.enter.native="search(1)" placeholder="请输入编号"
							clearable></el-input>
						<el-date-picker class="s1" v-model="pages.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" type="primary" icon="el-icon-search" @click="search(1)"></el-button>
					</div>
					<div class="demoDra1-L s1">
						<el-button type="primary" icon="el-icon-download" @click="Dowload">下载</el-button>
					</div>
				</div>
				<div class="demoDra2">
					<el-table :data="tableData1" border size="small">
						<el-table-column label="ID">
							<template slot-scope="scope">
								<span>{{ scope.row.ID}}</span>
							</template>
						</el-table-column>
						<el-table-column label="设备编号">
							<template slot-scope="scope">
								{{ scope.row.T_id}}
							</template>
						</el-table-column>
						<el-table-column label="SN">
							<template slot-scope="scope">
								<span>{{ scope.row.T_sn}}</span>
							</template>
						</el-table-column>
						<el-table-column label="温度℃">
							<template slot-scope="scope">
								{{ scope.row.T_t}}
							</template>
						</el-table-column>
						<el-table-column label="湿度%">
							<template slot-scope="scope">
								{{ scope.row.T_rh}}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="demoDra3">
					<el-pagination @current-change="handleCurrentChange1" :current-page="pages1.page"
						:page-size="pages1.page_z" layout="total, prev, pager, next, jumper" :total="total1">
					</el-pagination>
				</div>
			</div>
		</el-drawer>
		<el-drawer title="校准证书" :visible.sync="Drawer1" direction="rtl" ref="drawer">
			<div class="demo-drawers">
				<div style="margin-bottom: 20px;font-size: 14px;color: #C0C4CC;">请选择对应的校准证书查看:</div>
				<div style="display: grid;grid-template-columns: 1fr 1fr;grid-gap: 10px;">
					<el-radio v-model="radio1" @input="radioInput" :label="item" style="margin: 0;" border
						v-for="item,index in radioXuan" :key="index">{{item.split(",")[0]}}</el-radio>
				</div>
			</div>
		</el-drawer>
		<pdf ref="pdf"></pdf>
		<!-- <el-empty description="暂无其他内容"></el-empty> -->
	</div>
</template>

<script>
	import pdf from "./pdf.vue"
	import download from "downloadjs"
	import {
		TaskList,
		ExtData,
		Dowloads
	} from '@/api/CompanyAccount'
	export default {
		name: 'CompanyAccount',
		components: { //组件
			pdf
		},
		data() {
			return {
				Drawer: false,
				Drawer1: false,
				src: '',
				dia: null,
				total: 0,
				total1: 0,
				pages: {
					page: 1,
					page_z: 10,
					T_name: ''
				},
				pages1: {
					T_task_id: '',
					T_sn: '',
					T_id: '',
					Time_start: '',
					Time_end: '',
					page: 1,
					page_z: 10,
				},
				radioXuan: [],
				radio1: '',
				tableData: [],
				tableData1: [],
			}
		},
		mounted() {
			this.GetTkListApi()
		},
		methods: {
			radioInput() {
				var values = this.radio1.split(",")[1]
				this.$refs.pdf.SetPdf(values)
			},
			GetTkListApi() {
				TaskList(this.pages).then(res => {
					if (res.data.Code === 200) {
						this.tableData = res.data.Data.List
						this.total = res.data.Data.Num
					}
				})
			},
			handleEdit1(e) {
				this.$refs.pdf.SetPdf(e.T_pdf2)
			},
			handleEdit2(e) {
				this.$refs.pdf.SetPdf(e.T_pdf1)
			},
			handleEdit3(e) {
				this.Drawer1 = true
				this.radioXuan = e.T_pdf3.split("|")
			},
			handleEdit4(e) {
				this.pages1.T_task_id = e.T_task_id
				// this.pages1.T_id = e.Id	
				// this.pages1.T_sn = e.T_sn
				this.GetExtDataApi()
			},
			GetExtDataApi() {
				ExtData(this.pages1).then(res => {
					console.log('劣币送', res)
					this.Drawer = true
					if (res.data.Code === 200) {
						this.tableData1 = res.data.Data.List
						this.total1 = res.data.Data.Num
					}
				})
			},
			Dowload() { //下载数据
				var pams = {
					T_task_id: this.pages1.T_task_id,
					T_sn_list: '',
					Time_start: this.pages1.Time_start,
					Time_end: this.pages1.Time_end
				}
				const loading = this.$loading({
					lock: true,
					text: '正在整理数据，请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				Dowloads(pams).then(res => {
					console.log(res)
					if (res.data.Code === 200) {
						loading.close()
						download(res.data.Data);
					}
				})
			},
			searchTimeData(e) {
				if (e != null) {
					this.pages1.Time_start = e[0]
					this.pages1.Time_end = e[1]
				} else {
					this.pages1.Time_start = ''
					this.pages1.Time_end = ''
				}
				this.pages1.page = 1
				this.GetExtDataApi()
			},
			search(e) { //回车搜索
				if (e == 0) {
					this.pages.page = 1
					this.GetTkListApi()
				} else {
					this.pages1.page = 1
					this.GetExtDataApi()
				}
			},
			handleCurrentChange(val) {
				this.pages.page = val
				this.GetTkListApi()
			},
			handleCurrentChange1(val) {
				this.pages1.page = val
				this.GetExtDataApi()
			},
		},
	}
</script>

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

	.CompanyAccount {
		height: 100%;
		overflow: hidden;

		.CompanyAccount-mai {
			.CompanyAccount1 {
				display: flex;
				align-items: center;

				.CompanyAccount1-L {}

				.CompanyAccount1-R {
					display: flex;
					align-items: center;

					.s1 {
						margin-left: 10px;
					}

				}
			}

			.CompanyAccount2 {
				margin-top: 20px;
			}

			.CompanyAccount3 {
				margin-top: 40px;
			}
		}

		.demo-drawers {
			padding: 0 20px;

			.demoDra1 {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.demoDra1-L {
					.s1 {
						margin-bottom: 10px;
						margin-right: 10px;
					}
				}

				.demoDra1-R {
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					.s1 {
						margin-bottom: 10px;
						margin-right: 10px;
					}

				}
			}

			.demoDra2 {
				margin-top: 10px;
			}

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