<template>
	<view>
		 <!-- <view class="typeSelect">
				<view class="typeWrap">
					<view  @click="typeChange(0)">证书号</view>
					<view  @click="typeChange(1)">姓名</view>
				</view>
			</view>
			<view v-if="type==0">
				<view class="row">
					<text class="label"><text class="redStar">*</text>证书号</text>
					<input class="searchInput" type="text" id="number" v-model="form.number">
				</view>
				<view class="searchBtn" @click="searchClick(0)">查询</view>
			</view>
			<view v-else>
				<view class="row">
					<text class="label"><text class="redStar">*</text>姓名</text>
					<input class="searchInput" type="text" id="name" v-model="form.name">
				</view>
				<view class="row">
					<text class="label"><text class="redStar">*</text>单位</text>
					<input class="searchInput" type="text" id="deptName" v-model="form.deptName">
				</view>
				<view class="searchBtn" @click="searchClick(1)">查询</view>
			</view>
			<view v-if="showImg">
				<img class="imgs"  :src="imgSrc">
			</view>
			<view class="lists" v-if="dataList.length>0">
				<view v-for="item in dataList" class="listItem" @click="showImage(item)">
					<view v-if="item.证书方案=='202309'">
						<view>姓名：{{item.姓名}}</view>
						<view>资格：
							<text v-if="item.是否内审员">内审员</text>
							<text v-if="item.是否内审员&&(item.是否授权签字人||item.是否质量负责人||item.是否最高管理者)">、</text>
							<text v-if="item.是否授权签字人">授权签字人</text>
							<text v-if="item.是否内审员&&(item.是否质量负责人||item.是否最高管理者)">、</text>
							<text v-if="item.是否质量负责人">质量负责人</text>
							<text v-if="item.是否内审员&&item.是否最高管理者">、</text>
							<text v-if="item.是否最高管理者">最高管理者</text>
						</view>
						<view>证书编号：{{item.证书编号}}</view>
						<view>所属单位：{{item.所属单位}}（{{item.单位名称}}）</view>
					</view>
					<view v-if="item.证书方案=='202312'">
						<view>姓名：{{item.姓名}}</view>
						<view>单位名称：{{item.单位名称}}</view>
						<view>证书编号：{{item.证书编号}}</view>
						<view>培训日期：{{item.培训日期}}</view>
						<view>培训结束日期：{{item.培训结束日期}}</view>
						<view>发证日期{{item.发证日期}}</view>
					</view>
				</view>
			</view>
			<view  v-else>
				<view>{{warningTxtx}}</view>
			</view>
		  -->
		  <view class="searWrap">
			<input class="infoInput" placeholder="填写证书编号/姓名" v-model="search">
			</input>
		    <view class="searchBtn" @click="searchCandidates">查询</view>
		  </view>
		  <view class="listWrap">
		    <view v-if="candidates.length>0">
		    <!-- <view> -->
		      <view class="listTitle">证书列表</view>
		      <view >
		        <view>
		          <view>
		            姓名:姓名</view>
		          <view>
		            <view> 证书号:<text style="color:#438af4">XJ8937264</text></view>
		           </view>
		          <view>
		            <view>发证日期:2024-05-26</view>
		          </view>
		        </view>
		        <view>
		          <view style="color:green">通过考核</view>
		        </view>
		      </view>
			  <view  v-for="item in candidates" v-bind:key="item.id">
			    <view>
			      <view>
			        姓名:{{item.consumer_name}}</view>
			      <view>
			        <view style="color:darkblue"> 证书号:{{item.number}}</view>
			       </view>
			      <view>
			        <view>发证日期:{{item.issue_date}}</view>
			      </view>
			    </view>
			    <view>
			      <view style="color:green">通过考核</view>
			    </view>
			  </view>
		  </view>
			<!-- <view v-else style="text-align:center">暂无证书信息</view> -->
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search:'',
				candidates:[{
					consumer_name:'shijing',
					number:'XJ8937264',
					issue_date:'2024-05-26'
				}],
				query: {
				  page: 1,
				  limit: 10
				},
				
				
				type:0,
				form: {
					number: '',
					name: '',
					deptName: ''
				},
				warningTxtx:'请输入信息进行查询',
				imgSrc:'',
				showImg:false,
				dataList:[{
					证书方案:'202309',
					姓名:'shijing',
					是否内审员:true,
					是否授权签字人:true,
					是否质量负责人:true,
					是否最高管理者:true,
					证书编号:"DXCTC20240530",
					所属单位:'zhogncun',
					单位名称:'zhogncun',
				}],
				showErr:false,
				errMsg:''
			}
		},
		methods: {
			typeChange(index){
				let that = this;
				that.dataList = [];
				this.type = index;
				that.showImg = false;
				that.imgSrc = '';
			},
			searchClick(type){
				let that = this;
				that.dataList = [];
				that.showImg = false;
				that.imgSrc = '';
				if(that.type==0){
					if(that.form.number!==''){	
						this.$u.api.certificateList({证书编号:that.form.number,page:0}).then(res => {
							debugger;
								console.log(res.data.data)
							if(res.data.data.length>0){
								
								that.dataList = res.data.data;
							}else{
								that.warningTxtx='暂未查询到您的相关证书！'
							}
						})
					}else{
						that.errMsg = '请输入证书编号';
						that.showErr = true;
						setTimeout(()=>{
							that.showErr = false;
						},1500)
					}
				}else{
					if(that.form.name!==''){
						if(that.form.deptName!==''){
							this.$u.api.certificateList({姓名:that.form.name,单位名称:that.form.deptName,page:0}).then(res => {
								if(res.data.data.length>0){
									that.dataList = res.data.data;
								}else{
									this.$u.api.certificateList({姓名:that.form.name,所属单位:that.form.deptName,page:0}).then(res => {
										if(res.data.data.length>0){
											that.dataList = res.data.data;
										}else{
											that.warningTxtx='暂未查询到您的相关证书！'
										}
									})
								}
							})
						}else{
							that.errMsg = '请输入所属单位';
							that.showErr = true;
							setTimeout(()=>{
								that.showErr = false;
							},1500)
						}
					}else{
						that.errMsg = '请输入姓名';
						that.showErr = true;
						setTimeout(()=>{
							that.showErr = false;
						},1500)
					}
				}
			},
			 showImage(data){
				let that = this;
				let timer = new Date().getTime();
				if(data.证书地址!==null){
					that.imgSrc = 'https://testsearch.ctc.ac.cn'+data.证书地址+'?'+timer;
					that.showImg = true;
				}else{
					// axios.get(`https://testsearch.ctc.ac.cn/api/edu/certificate/${data.id}/`).then(res=>{
					// 	if(res.data){
					// 		let data1 = res.data.data;
					// 		that.imgSrc = 'https://testsearch.ctc.ac.cn'+data1.证书地址+'?'+timer;
					// 		that.showImg = true;
					// 	}else{
					// 		that.warningTxtx='暂未查询到您的相关证书！'
					// 	}
					// })
				}
			},

			
			
						
			searchCandidates() {
			    if(this.search!==null&&this.search!==''){
					console.log(this.search)
			      uni.showLoading({
			      	title:"正在获取证书",
			      })
				  var data = {search:this.search};
				  this.$u.api.certificateList(data).then(res=>{
				  	uni.hideLoading()
					this.candidates = res
				  }).catch(e=>{
					  uni.hideLoading()
				  })
			    }else{
					uni.showToast({
						title:'请填写正确的证书编号或身份证号',
						icon:'none'
					})
					return
			    }
			},
		}
	}
</script>
<style>
	page{
		height: 100%;
		background-color: #ededed;
	}
</style>
<style scoped>

.searWrap{
  display: flex;
  /* margin-top: 30rpx; */
  padding: 20rpx 0;
  background: #ffffff;
}
.searchBtn{
  /* flex: 2; */
  width: 150rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #ffffff;
  border-radius: 40rpx;
  margin-right: 20rpx;
  background-color:#438af4 ;
}
.infoInput{
  flex: 4;
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  border: 1rpx solid #dddddd;
  border-radius: 40rpx;
  margin: 0 20rpx;
}
.listWrap{
  padding: 20rpx;
  margin-top: 20rpx;
  box-sizing: border-box;
  background: #ffffff;
}
.listTitle{
  height: 70rpx;
  padding-left: 30rpx;
  line-height: 70rpx;
  font-size: 36rpx;
}
</style>
