<template>
	<div>
		<br>
		<div style="max-width: 350px;margin: 0 auto;">

			
			<input type="text" placeholder="请输入QQ账号" v-model="qq" class="mh_liti" style="width:80%;height:2.5em;margin: 1em auto;padding:2px 2px 2px 1em;box-sizing: border-box;">
			<button style="width:80%;height:2.5em;margin: 1em auto;box-sizing: border-box;" @click="search" :disabled="wait">{{btnTitle}}</button>
		</div>
	 <view class="content">
		 
		<div class="item" v-for="(item,index) in datas" :key="index">
			<info-from-q-q-vue :qq="item['qq']" :tel="item['tel']" :wb="item['id']" :address="item['address']" :url="'https://q1.qlogo.cn/g?b=qq&nk='+item['qq']+'&s=640'"></info-from-q-q-vue>
		</div>

	</view>
	<p style="text-align: center;color: darkgray;">批量查询业务请联系哔哩哔哩萌狼蓝天</p>
	<p style="text-align: center;color: darkgray;">查询失效请联系萌狼蓝天进行维护</p>
	<p style="text-align: center;color: darkgray;">返回结果为无则是未查询到</p>
	<p style="text-align: center;color: darkgray;">最后一次更新：2023-08-05</p>
	</div>
</template>

<script>
import InfoFromQQVue from '../info/InfoFromQQ/InfoFromQQ.vue'
	export default {
		components:{
			InfoFromQQVue,
		},
		
		data() {
			return {
				qq: '',
				that:this,
				datas:[],
				wait:false,
				btnTitle:'查询'
			}
		},
		onLoad() {
			// console.log(this)
		},
		methods: {
			search(){
				this.wait=true
				this.btnTitle="查询中"
				console.log(this.qq)
				if(this.qq===""){
					uni.showToast({
						title: '请输入正确的QQ号',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})  
					this.wait=false
					this.btnTitle="查询"
					return false
				}else{
					console.log(this.qq)
				}
				uni.request({
					url:'http://124.71.108.214:2312//apis/info/qq',
					method:"POST",
					'headers': {
					 'content-type': 'application/x-www-form-urlencoded' 
					},
					data:{
						"qq":this.qq
					},
					success: (res) => {
						this.datas=[]
						console.log("success:",res["data"])
						let data = res["data"]
						console.log("获取数据",data)
						console.log("code",data["code"])
						if(data["code"]===1){
							let result =  data["data"]
							//有两种情况，一种是只有一个需要查询，一种是多个查询
							if(this.qq.includes("/")){
								// 此时是一个列表
								this.datas = result
							}else{
								// 此时是一个字典
								this.datas.push(result)
							}
							console.log("最终数据：",this.datas)
						}
							
					},
					fail: (err) => {
						console.log("err：",err)
					},
					complete: () => {
						this.wait=false
						this.btnTitle="查询"
					}
					
				})	
				
				var options = {
				   'method': 'POST',
				   'url': 'http://api.mllt.cc/apis/info/qq?qq='+this.qq,
		
				};


			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: ow- reverse;/*主轴*/
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	.item{
		
	}
/* 
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	} */
</style>
