<template>
	<div style="position: relative;">
		<div style="background-color: #eaeaea;height: 84px;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.3) ;">
			<el-row>
				<el-col :xl="{ span: 20, offset: 2 }" :lg="{ span: 14, offset: 5 }" :md="{ span: 20, offset: 2 }" :sm="{ span: 20, offset: 2 }" :xs="{ span: 24 }">
					<img src="../assets/images/logoNew.png" style="width: 500px;margin-top: 4px;"/>
				</el-col>
			</el-row>
		</div>
		<div class="m-t-20" style="min-height: calc(100vh - 210px);">
			<el-row>
				<el-col :xl="{ span: 20, offset: 2 }" :lg="{ span: 14, offset: 5 }" :md="{ span: 20, offset: 2 }" :sm="{ span: 20, offset: 2 }" :xs="{ span: 24 }">
					<el-form :inline="true" :model="queryParams" class="demo-form-inline" label-width="100px">
						  <el-form-item label="查询方式" prop="type">
							<el-select v-model="queryParams.type" placeholder="请选择">
							    <el-option label="个人身份证号" value="0"></el-option>
							    <el-option label="企业名称" value="1"></el-option>
							</el-select>
						  </el-form-item>
						  <el-form-item label="查询条件" prop="query">
							<el-input v-model="queryParams.query" placeholder="请输入查询条件"></el-input>
						  </el-form-item>
						  <el-form-item>
							<el-button type="primary" @click="onSubmit">查询</el-button>
						  </el-form-item>
					</el-form>
					<div style="margin-top: -10px;color: #F56C6C;font-size: 14px;margin-bottom: 10px;">
						注：查询方式选择为“企业名称”，查询条件必须为企业的全称。
					</div>
					<el-table :data="tableData" style="width: 100%" v-loading="loading">
					    <el-table-column label="序号" type="index"  align="center" :index="indexMethod"></el-table-column>
					    <el-table-column label="姓名" prop="Name" align="center"></el-table-column>
					    <el-table-column label="身份证号" prop="ShenFenZheng"  width="170" align="center"></el-table-column>
					    <el-table-column label="证书编号" prop="JLZhengHaoNum" align="center"></el-table-column>
					    <el-table-column label="企业名称" prop="Dept" width="260" align="center"></el-table-column>
					    <el-table-column label="证书有效期至" prop="JLYxqz" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.JLYxqz == '' || scope.row.JLYxqz == null">
									无到期日期
								</div>
								<div v-else>
									{{scope.row.JLYxqz}}
								</div>
							</template>
						</el-table-column>
					    <el-table-column label="是否可报名" prop="flagName" align="center"></el-table-column>
					    <el-table-column label="企业审核状态" prop="address" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.isJxjyShenheFlg == 1">
									审核通过可报名
								</div>
								<div v-else-if="scope.row.isJxjyShenheFlg == 0">
									企业未审核
								</div>
							</template>
						</el-table-column>
					</el-table> 
						<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> 
					<div style="display: flex;font-size: 14px;margin-top: 40px;margin-bottom: 20px;">
						<div style="color: #F56C6C;width: 50px;">
							备注：
						</div>
						<div style="color:#333333 ;">
							<div>
								1、监理工程师没有到期日期、到期日期有误、无身份证号码及身份证号码有误的人员，请联系北京监理委员会。
							</div>
							<div style="margin-top: 6px;">
								2、在人才库查不到的监理工程师，请您联系所在单位负责人。
							</div>
							<div style="margin-top: 6px;">
								3、铁路监理工程师在证书到期前6个月或证书已过期可参加网络学习报名。
							</div>
							<div style="margin-top: 6px;">
								4、“可报名”意思可以参加监理工程师网络学习,报名前须由企业审核通过。
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="footer">
		  <div class="in2 pd-20">
			  <p>
				  Copyright © 中国铁道工程建设协会建设监理专业委员会&nbsp;&nbsp;版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;技术支持：石家庄亿网科技发展有限公司
				  <br />
				  网站备案号:京ICP备13011762号-1
			  </p> 
		  </div>
		</div>
	</div>
</template>

<script>
	import { jlyIsBm } from "@/api/userIndex"
	export default {
		name: "zhengshuSearch",
		data() {
			return {
				queryParams:{
					pageSize:10,
					pageNum:1,
					query:null,
					type:null
				},
				tableData:[],
				total:0,
				loading:false
			}
		},
		created(){
			
		}, 
		methods: {
			getList(){
				this.loading = true
				jlyIsBm(this.queryParams).then(res=>{
					this.tableData = res.rows
					this.total = res.total
					this.loading = false
				})
			},
			onSubmit(){
				if(this.queryParams.type == null){
					this.$message({
						type:"warning",
						message:"请选择查询方式"
					})
				}else{
					this.queryParams.pageNum = 1
					this.getList()
				}
				
			},
			//计算索引
			indexMethod(index) {
				return ((this.queryParams.pageNum - 1) * this.queryParams.pageSize) + (index + 1)
			},
		}
	};
</script>

<style scoped lang="scss">
	.footer {
		width: 100%; 
		list-style: none;
		font-size: 14px;
		color: #333;
		font-family: "Microsoft YaHei Mono", "微软雅黑";
		background-color: #eaeaea;
	} 
	
	.in2 {
	  margin: 0 auto;
	  text-align: center;
	  color: #666;
	}
</style>