<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_reporting_state==0?true:false"
								@click="handleEdit3(scope.row)">校准证书</el-button>
							<el-button size="small"
                             :disabled="scope.row.T_delivery_state!=1?true:false"
                            @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="pickerTime"
                        :picker-options="pickerOptions"
                        popper-class="noClear"
                        value-format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange" range-separator="至" :clearable="false" 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="downloadFun('t')">下载温度</el-button>
                        <el-button type="primary" icon="el-icon-download" @click="downloadFun('h')">下载湿度</el-button>
						<!-- <el-button type="primary" icon="el-icon-download" @click="Dowload">下载pdf</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="证书编号">
							<template slot-scope="scope">
								<span>{{ scope.row.T_Certificate_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-column label="时间">
							<template slot-scope="scope">
								{{ scope.row.T_time}}
							</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" size="50%">
			<div class="demo-drawers">
				<div style="margin-bottom: 20px;font-size: 14px;color: #C0C4CC;">请选择对应的校准证书查看:</div>
				<div class="demo-drawers-mins">
					<div class="demo-drawers-mins-item" v-for="item,index in radioXuan" :key="index" @click="radioInput(item)">
						【{{item.T_id}}】{{item.T_Certificate_sn}}
					</div>
				</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,
		devClassListlist,
        download_t_pdfs,
        download_h_pdfs
	} from '@/api/CompanyAccount'
    import { downloadPDF } from "@/utils/download.js";
	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: ''
				},
                pickerTime:[],
                defaultpickerTime:[],//默认时间区间
				pages1: {
					T_task_id: '',
					T_sn: '',
					T_id: '',
					Time_start: '',
					Time_end: '',
					page: 1,
					page_z: 10,
				},
				radioXuan: [],
				radio1: '',
				tableData: [],
				tableData1: [],
			}
		},
        computed: {  
            pickerOptions() { 
                let _seif = this 
                return {
                    disabledDate(time) {
                        const startDate = new Date(_seif.defaultpickerTime[0]); // 注意月份是从0开始的  
                        const endDate = new Date(_seif.defaultpickerTime[1]);  
                        // 如果时间小于开始日期或大于结束日期，则返回true，表示该日期不可选  
                        return time.getTime() < startDate.getTime() || time.getTime() > endDate.getTime();
					}
                }  
            }  
        },  
		mounted() {
			this.GetTkListApi()
		},
		methods: {
            
			radioInput(reslut) {
				if(reslut.T_pdf){
					this.$refs.pdf.SetPdf(reslut.T_pdf)
				}else{
					this.$message.error('没有可展示证书哦')
					return
				}
			},
			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_pdf1)
			},
			handleEdit2(e) {
				this.$refs.pdf.SetPdf(e.T_pdf2)
			},
			handleEdit3(e) {
				const {T_class} = {...e}
				devClassListlist({T_class:T_class}).then(res=>{
					if(res.data.Code==200){
						this.Drawer1 = true
						this.radioXuan = res.data.Data.List || []
					}
				})
				// this.radioXuan = e.T_pdf3.split("|")
			},
			handleEdit4(e) {
				this.pages1.T_task_id = e.T_task_id

                //默认能勾选的时间区间
                this.defaultpickerTime = e.T_VerifyDeviceDataTime
                //勾选上的时间区间
                this.pickerTime = this.defaultpickerTime

                this.pages1.Time_start = this.pickerTime[0]
                this.pages1.Time_end = this.pickerTime[1]
				// this.pages1.T_id = e.Id	
				// this.pages1.T_sn = e.T_sn
				this.GetExtDataApi()
			},
			GetExtDataApi() {
				ExtData(this.pages1).then(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);
					}
				})
			},
            /**
             * 下载温湿度
             */
            async downloadFun(str){
                let {T_sn,page,page_z,...filtobj} = this.pages1
				const loading = this.$loading({
					lock: true,
					text: '正在整理数据，请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
                const result = str=='t'?await download_t_pdfs(filtobj):await download_h_pdfs(filtobj)
                console.log('下载',result)
                loading.close()
                if (result.status) {
                    downloadPDF(result,str=='t'?'温度':'湿度')
                }

				// Dowloads(pams).then(res => {})
            },
			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">
/*日期时间组件不显示 清空按钮*/
.noClear .el-picker-panel__footer .el-button.el-picker-panel__link-btn.el-button--text.el-button--mini {
	pointer-events: none;
    color: #ccc;
    cursor: none;
}

</style>
<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;
			&-mins{
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
				grid-gap: 10px;
				&-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 10px;
					border: 1px solid #ccc;
					padding:10px 5px;
				}
				:hover{
						border: 1px solid red;
						cursor: pointer;
						color: red;
					}
			}
			
			.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>
