<template>
	<div class="calibrationCertificate">
		<div class="calibrationCertificate1">
			<div class="calibrationCertificate1-L">
				<el-button type="primary" icon="el-icon-plus" @click="NewinnerDrawer">新增证书</el-button>
			</div>
			<div class="calibrationCertificate1-R">
				<div class="calibrationCertificate1-Rtx">
					搜索：
				</div>
				<el-input v-model="pages.T_sn" placeholder="请输入证书编号" @keyup.enter.native="search" clearable></el-input>
				<el-input v-model="pages.T_layout_no" placeholder="请输入布局编号" @keyup.enter.native="search" clearable style="margin-left: 10px;"></el-input>
			</div>
		</div>
		<div class="calibrationCertificate2">
			<el-table :data="tableData" border size="small">
				
				<el-table-column  prop="T_layout_no" width="180">
					<template #header>
						<div style="display: flex;align-items: center;cursor: pointer;" @click="filtFun('layout')">
							布局编号
							<div style="font-size: 14px;display: flex;flex-direction: column;">			
								<i class="el-icon-caret-top" style="width: 1em; height: 1em;margin-bottom: -4px;" :style="{color:pages.T_layout_no_sort==1?'#409eff':'#a8abb2'}"></i>
								<i class="el-icon-caret-bottom" style="width: 1em; height: 1em;margin-top: -4px;" :style="{color:pages.T_layout_no_sort==2?'#409eff':'#a8abb2'}"></i>
							</div>
						</div>
					</template>
				</el-table-column>
				
				<el-table-column label="证书编号" width="180">
					<template slot-scope="scope">
						<span>{{ scope.row.T_sn }}</span>
					</template>
				</el-table-column>
				<el-table-column  prop="T_release_time" width="180">
					<template #header>
						<div style="display: flex;align-items: center;cursor: pointer;" @click="filtFun('release')">
							发布时间
							<div style="font-size: 14px;display: flex;flex-direction: column;">			
								<i class="el-icon-caret-top" style="width: 1em; height: 1em;margin-bottom: -4px;" :style="{color:pages.T_release_time_sort==1?'#409eff':'#a8abb2'}"></i>
								<i class="el-icon-caret-bottom" style="width: 1em; height: 1em;margin-top: -4px;" :style="{color:pages.T_release_time_sort==2?'#409eff':'#a8abb2'}"></i>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column  prop="T_failure_time" width="180">
					<template #header>
						<div style="display: flex;align-items: center;cursor: pointer;" @click="filtFun('failure')">
							失效时间
							<div style="font-size: 14px;display: flex;flex-direction: column;">			
								<i class="el-icon-caret-top" style="width: 1em; height: 1em;margin-bottom: -4px;" :style="{color:pages.T_failure_time_sort==1?'#409eff':'#a8abb2'}"></i>
								<i class="el-icon-caret-bottom" style="width: 1em; height: 1em;margin-top: -4px;" :style="{color:pages.T_failure_time_sort==2?'#409eff':'#a8abb2'}"></i>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<div style="display: flex;">
							<el-button size="small" :disabled="scope.row.T_pdf==''?true:false" @click="handlePdf(scope.row)">查看PDF</el-button> <!--  -->
							<el-button slot="reference" size="small" @click="handleEdit(scope.row)">管理证书
							</el-button>
							<el-button slot="reference" size="small" @click="handleFun(scope.row)">编辑
							</el-button>
							<el-button slot="reference" size="small" @click="handleDelete(scope.row)">删除
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="calibrationCertificate3">
			<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>
		<el-drawer :title="titles" :append-to-body="true" :visible.sync="innerDrawer2">
			<!-- 时间流程按钮后的编辑 -->
			<div style="padding: 20px;">
				<el-form :model="form" :rules="rules" ref="ruleForm">
					<el-form-item label="布局编号" label-width="80px" prop="T_layout_no">
						<el-input v-model="form.T_layout_no" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="证书编号" label-width="80px" prop="T_sn">
						<el-input v-model="form.T_sn" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label-width="80px">
						<el-button type="primary" @click="submitForm('ruleForm')">
							确 定
						</el-button>
						<el-button @click="innerDrawer2=false">取 消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-drawer>
		<pdf ref="pdf"></pdf>
		<el-drawer title="管理证书" :append-to-body="true" :visible.sync="innerDrawer4" size="90%">
			<!-- 时间流程按钮后的编辑 -->
			<div class="demo-drawers">
				<el-button type="primary" icon="el-icon-plus" @click="TimeNew">添加证书</el-button>
				<div style="padding-top: 20px;">
					<el-table :data="tableData1" border size="small">
						<el-table-column label="证书编号" width="180">
							<template slot-scope="scope">
								<span>{{ scope.row.T_Certificate_sn}}</span>
							</template>
						</el-table-column>
						<el-table-column label="发布时间" width="180">
							<template slot-scope="scope">
								{{ scope.row.T_release_time}}
							</template>
						</el-table-column>
						<el-table-column label="失效时间" width="180">
							<template slot-scope="scope">
								{{ scope.row.T_failure_time}}
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<div style="display: flex;">
									<el-button size="small" @click="handlePdf(scope.row)">查看PDF</el-button>
									<el-button slot="reference" size="small" @click="handleEdit1(scope.row)">编辑
									</el-button>
									<el-button slot="reference" size="small" type="danger"
										@click="handleDelete1(scope.row)">删除
									</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div style="margin-top: 10px;">
					<el-pagination @current-change="handleCurrentChange1" :current-page="pages2.page"
						:page-size="pages2.page_z" layout="total, prev, pager, next, jumper" :total="total1">
					</el-pagination>
				</div>
			</div>
			<el-drawer title="添加证书" :append-to-body="true" :visible.sync="innerDrawer41">
				<div style="padding: 20px;">
					<el-form :model="pages3">
						<el-form-item label="发布时间" label-width="70px">
							<el-date-picker v-model="pages3.T_release_time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="失效时间" label-width="70px">
							<el-date-picker v-model="pages3.T_failure_time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="上传文件" label-width="70px">
							<flies @pdfvalue="fliValue" :accepts="'.pdf'"></flies>
							<div style="margin-top: 5px;">
								<div v-if="pages3.T_pdf!=''" style="height: 20px;color: #409EFF;display: flex;align-items: center;">
									<i class="el-icon-circle-check"></i><span style="font-size: 12px;padding-left: 1px;">已经上传文件，点击虚线框内可更换</span>
								</div>
								<div v-else style="height: 20px;color: #C0C4CC;display: flex;align-items: center;">
									<i class="el-icon-circle-close"></i><span style="font-size: 12px;padding-left: 1px;">还未上传文件，点击虚线框内可上传</span>
								</div>
							</div>
						</el-form-item>
						<el-form-item label-width="70px">
							<el-button type="primary" @click="GetAddApi">
								确 定
							</el-button>
							<el-button @click="innerDrawer41=false">取 消</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-drawer>
		</el-drawer>
	</div>
</template>

<script>
	import flies from "@/components/files.vue"
	import pdf from "./pdf.vue"
	import {
		CertiList,CertiAdd,CertiEdit,CertiDel,Certi_pdf,Certi_pdfAdd,Certi_pdfUp,Certi_pdfDel
	} from '@/api/calibrationCertificate'
	export default {
		name: 'calibrationCertificate',
		components: {
			pdf,flies
		},
		watch:{
			innerDrawer4(val){
				console.log(val)
				if(!val) this.GetCertiListApi()
			}
		},
		data() {
			return {
				rules: {
					T_sn: [{
						required: true,
						message: '请输入证书编号',
						trigger: 'blur'
					}],
					T_layout_no:[{
						required: true,
						message: '请输入布局编号',
						trigger: 'blur'
					}],
				},
				titles:'',
				form: {
					T_sn: '',
					T_layout_no:'',
					
				},
				innerDrawer2: false,
				innerDrawer4: false,
				innerDrawer41: false, //添加证书
				pages: {
					page: 1,
					page_z: 10,
					T_sn: '',
					T_layout_no:'',
					T_layout_no_sort:0,
					T_release_time_sort:0,
					T_failure_time_sort:0
				},
				// pages1: {
				// 	page: 1,
				// 	page_z: 10,
				// 	T_name: ''
				// },
				pages2: {//管理证书
					page: 1,
					page_z: 10,
					T_Certificate_sn: ''
				},
				pages3: {//添加证书
					T_failure_time: '',
					T_release_time: '',
					T_Certificate_sn: '',
					T_pdf: ''
				},
				tableData: [],
				total: 0,
				tableData1: [],
				total1:0
			}
		},
		mounted() {
			this.GetCertiListApi()
		},
		methods: {
			//筛选
			filtFun(e){
				let _this = this
				if(e=='layout'){//布局编号
					_this.pages.T_failure_time_sort = 0
					_this.pages.T_release_time_sort = 0
					if(_this.pages.T_layout_no_sort<2){
						_this.pages.T_layout_no_sort+=1
					}else{
						_this.pages.T_layout_no_sort=0
					}
				}else if(e=='release'){//发布时间
					_this.pages.T_failure_time_sort = 0
					_this.pages.T_layout_no_sort = 0
					if(_this.pages.T_release_time_sort<2){
						_this.pages.T_release_time_sort+=1
					}else{
						_this.pages.T_release_time_sort=0
					}
				}else{
					_this.pages.T_release_time_sort = 0
					_this.pages.T_layout_no_sort = 0

					if(_this.pages.T_failure_time_sort<2){
						_this.pages.T_failure_time_sort+=1
					}else{
						_this.pages.T_failure_time_sort=0
					}
				}
				this.pages.page = 1
				this.GetCertiListApi()
				console.log(_this.pages)
			},
			fliValue(e){
				this.pages3.T_pdf = e
			},
			GetAddApi(){
				this.pages3.T_Certificate_sn = this.pages2.T_Certificate_sn
				if(this.pages3.T_release_time==""){
					this.$message.error('请选择发布时间')
				}else if(this.pages3.T_failure_time==""){
					this.$message.error('请选择失效时间')
				}else if(this.pages3.T_pdf==""){
					this.$message.error('请上传证书')
				}else{
					if(this.pages3.T_release_time.replace(/-/g, "")>this.pages3.T_failure_time.replace(/-/g, "")){
						this.$message.error('发布时间大于失效时间，请重新选择')
						return
					}
					if(this.CerNum==1){
						this.SetCerti_pdfUp()
					}else{
						this.SetCerti_pdfAdd()
					}
				}
			},
			SetCerti_pdfUp(){//1编辑
				Certi_pdfUp(this.pages3).then(res=>{
					if(res.data.Code===200){
						this.$message.success('操作成功')
						this.innerDrawer41 = false
						this.pages2.page = 1
						this.GetCerti_pdfApi()
					}
				})
			},
			SetCerti_pdfAdd(){//2添加
				Certi_pdfAdd(this.pages3).then(res=>{
					if(res.data.Code===200){
						this.$message.success('操作成功')
						this.innerDrawer41 = false
						this.pages2.page = 1
						this.GetCerti_pdfApi()
					}
				})
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
			 	if (valid) {
						if(this.titles=='新增证书'){
							this.GetCertiAddApi()
						}else{
							this.GetCertiEditApi()
						}
					} else {
						return false;
					}
				});
			},
			GetCertiAddApi(){
				CertiAdd(this.form).then(res=>{
					if(res.data.Code===200){
						this.$message.success('添加成功')
						this.innerDrawer2 = false
						this.pages.page = 1
						this.GetCertiListApi()
					}
				})
			},
			GetCertiEditApi(){
				CertiEdit(this.form).then(res=>{
					if(res.data.Code===200){
						this.$message.success('编辑成功')
						this.innerDrawer2 = false
						this.pages.page = 1
						this.GetCertiListApi()
					}
				})
			},
			
			GetCertiListApi(){
				CertiList(this.pages).then(res=>{
					console.log('列表',res)
					if(res.data.Code===200){
						this.tableData = res.data.Data.List
						this.total = res.data.Data.Num
					}
				})
			},
			handleEdit1(e) {
				this.pages3.T_release_time = e.T_release_time
				this.pages3.T_failure_time = e.T_failure_time
				this.pages3.T_pdf = e.T_pdf
				
				this.pages3.Id = e.Id
				this.CerNum = 1
				this.innerDrawer41 = true
			},
			TimeNew() {
				this.pages3.T_release_time = ''
				this.pages3.T_failure_time = ''
				this.pages3.T_pdf = ''
				this.CerNum = 2
				this.innerDrawer41 = true
			},
			handlePdf(e) {
				
				console.log('查看pdf', e)
				this.$refs.pdf.SetPdf(e.T_pdf)
			},
			handleFun(e){
				console.log('编辑',e)
				this.titles = '编辑证书'
				this.innerDrawer2 = true
				this.form.T_sn = e.T_sn
				this.form.T_layout_no = e.T_layout_no
				this.form.Id = e.Id

			},
			handleEdit(e) {
				this.pages2.T_Certificate_sn = e.T_sn
				this.innerDrawer4 = true
				this.GetCerti_pdfApi()
			},
			GetCerti_pdfApi(){//管理证书列表
				Certi_pdf(this.pages2).then(res=>{
					console.log('管理证书列表',res)
					if(res.data.Code===200){
						this.tableData1 = res.data.Data.List
						this.total1 = res.data.Data.Num
					}
				})
			},
			NewinnerDrawer() {
				this.titles = '新增证书'
				Object.keys(this.form).forEach(item=>{this.form[item] = ''})
				this.innerDrawer2 = true
			},
			search() { //回车搜索
				this.pages.page = 1
				this.GetCertiListApi()
			},
			handleDelete(val) {
				this.$confirm('此操作将删除该证书, 是否继续?', '提示', {
					confirmButtonText: '立即删除',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					CertiDel({Id:val.Id}).then(res=>{
						if(res.data.Code===200){
							this.$message.success('删除成功')
							this.pages.page = 1
							this.GetCertiListApi()
						}
					})
				}).catch(() => {
					this.$message.info('取消删除');
				});
			},
			handleDelete1(val) {
				this.$confirm('此操作将删除该, 是否继续?', '提示', {
					confirmButtonText: '立即删除',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					Certi_pdfDel({Id:val.Id}).then(res=>{
						if(res.data.Code===200){
							this.$message.success('删除成功')
							this.pages2.page = 1
							this.GetCerti_pdfApi()
						}
					})
				}).catch(() => {
					this.$message.info('取消删除');
				});
			},
			handleCurrentChange(val) {
				this.pages.page = val
				this.GetCertiListApi()
			},
			handleCurrentChange1(val) {//管理证书
				this.pages2.page = val
				this.GetCerti_pdfApi()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.demo-drawers {
		padding: 20px;
	}

	/deep/.el-upload-dragger {
		width: 100% !important;
		padding: 0 30px !important;
	}

	.calibrationCertificate {
		.calibrationCertificate1 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.calibrationCertificate1-L {}

			.calibrationCertificate1-R {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.calibrationCertificate1-Rtx {
					min-width: 45px;
					font-size: 14px;
					color: #909399;
					user-select: none;
				}
			}
		}

		.calibrationCertificate2 {
			margin-top: 20px;
		}

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