<template>
	<view class="content">
		<view class="" v-if="show">
			<view class="title">
				西安市燃气供热行业从业人员上岗证书查询结果
			</view>
			<view class="tablebox">
				<view class="itemBox">
					<view class="nameBox color1">
						姓名
					</view>
					<view class="detailBox color2">
						{{tableData.signup.name}}
					</view>
					<view class="nameBox color1">
						身份证号
					</view>
					<view class="detailBox color2">
						{{tableData.signup.card}}
					</view>
				</view>
				<view class="itemBox">
					<view class="nameBox color2">
						性别
					</view>
					<view class="detailBox color3">
						{{tableData.signup.sex==1?'男':'女'}}
					</view>
					<view class="nameBox color2">
						联系电话
					</view>
					<view class="detailBox color3">
						{{tableData.signup.phone}}
					</view>
				</view>
				<view class="itemBox">
					<view class="nameBox color1">
						证书编号
					</view>
					<view class="detailBox color2">
						{{tableData.signup.card}}
					</view>
					<view class="nameBox color1">
						证书有效期
					</view>
					<view class="detailBox color2">
						{{tableData.end_time}}
					</view>
				</view>
				<view class="itemBox">
					<view class="nameBox color2">
						发证部门
					</view>
					<view class="detailBox color3">
						{{tableData.send_department}}
					</view>
					<view class="nameBox color2">
						考试机构
					</view>
					<view class="detailBox color3">
						{{tableData.institutions}}
					</view>
				</view>
				<view class="itemBox">
					<view class="nameBox color1">
						持证项目
					</view>
					<view class="detailBox color2">
						{{tableData.type.name}}
					</view>
					<view class="nameBox color1">
						批次
					</view>
					<view class="detailBox color2">
						{{tableData.signup.work_name}}
					</view>
				</view>
				<view class="bottomItem color2" style="border-top-color:#dee4ef;">
					档案编号：{{tableData.signup.card}}
				</view>
			</view>
		</view>
		<view class="noData" v-else>
			暂无结果
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				id: '',
				show: true,
				tableData: ''
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				request.post('/api/index/certificateDetails', {
					id: this.id
				}).then(res => {
					if (res.data == null) {
						this.show = false
					} else {
						this.show = true
						this.tableData = res.data
					}

				}).catch(err => {

				})
			}
		}
	}
</script>

<style>
	.content {
		padding: 30rpx 12rpx;
		box-sizing: border-box;
	}

	.noData {
		width: 100%;
		padding-top: 200rpx;
		box-sizing: border-box;
		text-align: center;
		color: #c3c3c3;
		font-size: 28rpx;
	}

	.tablebox {
		margin-top: 32rpx;
	}

	.title {
		width: 622rpx;
		margin: 0 auto;
		text-align: center;
		font-weight: 600;
		font-size: 28rpx;
		color: #285fb3;
	}

	.itemBox {
		display: flex;
		font-size: 24rpx;
		color: #323233;
		border-right: 2rpx solid #e5ebf9;
		min-height: 96rpx;
	}

	.nameBox {
		width: 124rpx;
		border: 2rpx solid  #e5ebf9;
		border-right: none;
		border-bottom: none;
		display: flex;
		align-items: center;
		padding: 12rpx;
		box-sizing: border-box;
	}

	.detailBox {
		width: 240rpx;
		border: 2rpx solid  #e5ebf9;
		border-right: none;
		border-bottom: none;
		display: flex;
		align-items: center;
		word-break: break-all;
		padding:12rpx ;
		box-sizing: border-box;
	}

	.bottomItem {
		border: 2rpx solid  #e5ebf9;
		height: 92rpx;
		line-height: 92rpx;
		font-size: 24rpx;
		padding-left: 14rpx;
		box-sizing: border-box;
	}

	.color1 {
		background:#dde9f9;
	}

	.color2 {
		background-color: #e9effb;
	}
	.color3{
		background-color: #f6f9fe;
	}
</style>