<template>
	<view class="ofwebContent">
		<view class="ofwebTitle">
			CFFP-AIOFP会员查询
		</view>
		<view class="ofwebWrapper">
			<view class="queryBox">
				<view class="queryItem">
					<view>
						<span></span>手机号：
					</view>
					<view>
						<input @input="changeInput" v-model="queryObj.userTel" style="font-size: 28rpx;" type="number" maxlength="11" placeholder="请输入手机号" placeholder-style="font-size:26rpx">
					</view>
				</view>
				<view class="queryItem">
					<view>
						<span></span>证书号：
					</view>
					<view>
						<input @input="changeInput" v-model="queryObj.authenticationCode" style="font-size: 28rpx;" type="text" placeholder="请输入证书编号" placeholder-style="font-size:26rpx">
					</view>
				</view>
				<view @click="c_query" v-if="machineType=='pc'"  class="buttonBox">
					查询
				</view>
			</view>
			<view v-if="machineType!='pc'" @click="c_query"  class="buttonBox">
				查询
			</view>
			<view  v-if="memberObj.length>0">
				<view class="dataBox" v-for="item in memberObj" >
					<view class="dataItem">
						<span>姓名：</span>
						<view>
							{{item.userName}}
						</view>
					</view>
					<view class="dataItem">
						<span>证书号：</span>
						<view>
							{{item.authenticationCode}}
						</view>
					</view>
					<view class="dataItem" v-if="item.cerUrl">
						<span>荣誉证书：</span>
						<view>
							<image @click="previewImage(item)" style="margin-top: 30rpx;" :src="item.cerUrl" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="noData" v-else>
				<image src="../static/images/noData.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import api from "@/api/api";
	import common from '../common/common';
	import { onLoad } from "@dcloudio/uni-app";
	
	let memberObj:any = ref([]);
	let machineType = ref(null);
	let queryObj = ref({userTel:null,authenticationCode:null})
	const changeInput = ()=>{
		
	}
	const c_query = ()=>{
		memberObj.value =[];
		if(!queryObj.value.authenticationCode && !queryObj.value.userTel){
			uni.showToast({
				title:'手机号和证书号不能同时为空',
				icon:'none',
				duration:2000
			})
			return;
		}else if(queryObj.value.userTel && !common.mobileNoValid(queryObj.value.userTel)){
			uni.showToast({
				title:'请填写正确的手机号',
				icon:'none',
				duration:2000
			})
			return;
		}
		uni.showLoading({
			mask:true
		})
		api.officialWebsiteDetail(queryObj.value).then((res) => {
			uni.hideLoading();
			if (res['success']) {
				memberObj.value=res['data']['list'] || [];
				if(memberObj.value.length==0){
					uni.showToast({
						title:'抱歉，未查询到该会员，请确认手机号或证书号是否正确！',
						icon:'none',
						duration:2000
					})
				}
			} else {
				uni.showToast({
					title: res['message'],
					duration: 2000,
					icon: 'none'
				})
			}
		})
	}
	const previewImage = (item)=>{
		// 预览图片
		uni.previewImage({
			urls: [item.cerUrl],
		});
	}
	onLoad(() => {
		const userAgent = navigator.userAgent.toLowerCase();
		if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)) {
			// 移动端
			machineType.value='phone';
		} else {
			// pc端
			machineType.value='pc';
		}
	})
</script>

<style lang="scss">
	
	 .ofwebContent{
		 
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		.ofwebTitle{
			color: rgba(0, 0, 0, 1);
			font-weight: bold;
			font-size:40rpx;
			padding: 100rpx 0;
		}
		.ofwebWrapper{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			.queryBox{
				display: flex;
				flex-direction: row;
				color: rgba(48, 48, 48, 1);
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				white-space: wrap;
				width: 100%;
				span{
					color: red;
					padding: 0 3rpx;
				}
				.queryItem{
					display: flex;
					align-items: center;
					margin:15rpx 25rpx;
					font-size: 34rpx;
					
					view:last-child{
						padding:9rpx 10rpx;
						border-radius: 5px;
						border: 0.5px solid rgba(153, 153, 153, 1);
					}
				}
				
			}
			.buttonBox{
				background-color: rgba(92, 46, 222, 1);
				color:white;
				font-size: 28rpx;
				padding: 10rpx 35rpx;
				border-radius: 10rpx;
				
			}
			.noData{
				width: 200px;
				margin-top:160rpx;
			}
			.dataBox{
				margin-top:80rpx;
				width: 100%;
				.dataItem{
					margin-top: 20rpx;
					display: flex;
					justify-content: center;
					width: 100%;
					span{
						display: inline-block;
						margin-right: 10rpx;
						flex: 0 0 200rpx;
						text-align: right;
					}
					view{
						flex: 0 0 350rpx;
					}
				}
			}
		}
	 }
</style>