<!-- 统计页 -->
<template>
	<view class="content">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">检测统计</view>
			<view class=""></view>
		</view>
		<view class="ail">
			
			<view class="top-box">
				<view class="t-top">
					<view class="sis">
						<view class="t-title">检测总数</view>
						<view class="t-num">{{sum}}</view>
					</view>
					<view class="sis">
						<view class="t-title">检测通过</view>
						<view class="t-num" >{{countPass}}</view>
					</view>
					<view class="sis">
						<view class="t-title">检测未通过</view>
						<view class="t-num">{{countNoPass}}</view>
					</view>
				</view>
				<view class="t-bottom">
					<qiun-data-charts
						:ontouch='true'
					    type="ring"
					    :opts="opts"
					    :chartData="chartData"
					  />
				</view>
			
			</view>
			<view class="cont-box">
					<view class="cont-title">车辆类型统计</view>
					<view class="wrap-box" >
						<view class="w-box" v-for="(item,index) in carlist" :key="index">
							<view class="imgicon">
								<image :src="baseUrl + item.image" ></image>
							</view>
							<view class="t-zhong">{{item.name}}</view>
							<view class="lanbnum">
								{{item.value}}
							</view>
						</view>
					</view>
			</view>
				<view class="cont-box">
						<view class="cont-title">机构检测统计</view>
						<view class="dis-t">
							<view class="lank" @click="xling = true">{{name}}</view>
							<view class="lan-you">
							
								<view class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex(index,item.value)"> {{item.text}}</view>
							</view>
						</view>
					<qiun-data-charts 
						:ontouch='true'
					      type="column"
					      :opts="dopts"
					      :chartData="chartData1"
					    />
				</view>
				<view class="cont-box">
					<view class="b-title">
						<view class="b-zuo">排名</view>
						<view class="b-zhong">机构名称</view>
						<view class="b-you">数量</view>
					</view>
					<view class="b-title" v-for="(item,index) in phb" :key="index">
						<view class="b-zuo">
							<view class="one">{{index + 1}}</view>
							<!-- <view class="two">1</view>
							<view class="three">3</view> -->
						</view>
						<view class="b-zhong">
							<view class="touxiang">
								<img :src=" baseUrl + item.logo" alt="">
							</view>
							<text>{{item.partnerName}}</text>
						</view>
						<view class="b-you">{{item.total}}</view>
					</view>
				</view>
		</view>
		
		<u-popup :show="xling" @close="closexl" :round="10"  @open="openxl">
		    <view class="popup-box">
				<view class="sousuo">
					<uni-icons type="search" size="22"></uni-icons>
					<input type="text" v-model="searchValue" placeholder="请输入机构">
					<text @click="getgetPartnerList()" >搜索	</text>
				</view>
		         <view class="list-box">
					 <scroll-view class="list_scroll"  scroll-y="true" >
					 	<view class="list-qiu" v-for="(item,index) in qubu" :key="index">
						<view class=""> <text class="tel">{{item.partnerName}}</text> </view>
						<view class="banniu">
							<text @click="xinxuanze(item.partnerId,item.partnerName)">选择</text>
						</view>
						</view>
					</scroll-view>
				 </view>
		    </view>
		</u-popup>
	
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	
	export default{
		data(){
			return{
				name:'全部机构',
				partnerId:'',
				searchValue:'',
				baseUrl:this.$baseUrl,
				xling:false,
				earchValue:'',
				countdown: 3,	
				qhindex:0,
				countNoPass:0,
				countPass:0,
				sum:0,
				qubu:[],
				phb:[],
				zilist:[
					{text:'周',value:'week'},
					{text:'月',value:'month'},
					{text:'年',value:'year'},
					
				],
				carlist:[],
				value:'week',
				chartData: {},
			       //您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			       opts: {
			         rotate: false,
			         rotateLock: false,
			         color: ["#5266FF","#FF787E",],
			         padding: [5,5,5,5],
			         dataLabel: true,
			         enableScroll: false,
			         legend: {
			           show: true,
			           position: "right",
			           lineHeight: 25
			         },
			         title: {
			           name: "通过率",
			           fontSize: 10,
			           color: "#666666"
			         },
			         subtitle: {
			           name: "70%",
			           fontSize: 10,
			           color: "#7cb5ec"
			         },
			         extra: {
			           ring: {
			             ringWidth: 10,
			             activeOpacity: 0.5,
			             activeRadius: 20,
			             offsetAngle: 0,
			             labelWidth: 15,
			             border: false,
			             borderWidth: 3,
			             borderColor: "#FFFFFF"
			           }
			         }
			       },
				   // sdada
				   	  chartData1: {},
				    dopts: {
				           color: ["#0D2E8D","#3CBC6F","#FF571A","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				             padding: [15,15,0,5],
				                   touchMoveLimit: 24,
				                   enableScroll: true,
				                   legend: {},
				                   xAxis: {
				                     disableGrid: true,
				                     scrollShow: true,
				                     itemCount: 4
				                   },
				                   yAxis: {
				                     data: [
				                       {
				                         min: 0
				                       }
				                     ]
				                   },
				                   extra: {
				                     column: {
				                       type: "group",
				                       width: 15,
				                       activeBgColor: "#000000",
				                       activeBgOpacity: 0.08
				                     }
				                   }
				         }
			}
		},
			onLoad() {
				this.getServerData();
				this.getServerData1();
				
			},
			onShow() {
				// this.getstatisticsTop()
				this.getstatisticsMid()
				this. getgetPartnerList()
				this.getstatisticsZXT()
				this.getstatisticsOrder()
			},
			methods:{
				getback(){
					uni.navigateBack()
				},
				xinxuanze(id ,name){
					this.name = name
					this.partnerId = id
					this.xling = false
					this.getServerData1() 
				
				},
				async getstatisticsTop(){
					let res = await request({
						url:'/appInspection/order/statisticsTop',
						method: 'get',
					})
					console.log(res);
						 // this.chartData.series[0].data =  res.data.list
				},
				async getstatisticsMid(){
					let res = await request({
						url:'/appInspection/order/statisticsMid',
						method: 'get',
					})
					console.log(res);
				this.carlist = res.data
				},
				
				gbindex(index,value){
					this.qhindex = index
					this.value = value
					this.getServerData1()
				},
				async getgetPartnerList(){
					let data = {
						partnerName : this.searchValue
					}
					let res = await request({
						url:'/appInspection/order/getPartnerList',
						method: 'get',
						params: data
					})
					console.log('全部机构列表',res);
					this.qubu = res.data
					
				},
				async getstatisticsZXT(){
					let data = {
						partnerId:this.partnerId,
						type : this.value
					}
					let res = await request({
						url:'/appInspection/order/statisticsZXT',
						method: 'get',
						params: data
					})
					console.log('获取柱形图',res);
							
				},
				async getstatisticsOrder(){
					let res = await request({
						url:'/appInspection/order/statisticsOrder',
						method: 'get',
					})
					console.log('获取排行榜',res);
					this.phb = res.data
							
				},
				// 123123
			closexl(e){
				this.xling = false
				console.log('n');
				
			},
			openxl(e){
				console.log('y');
			},
				async getServerData() {
					let rex = await request({
						url:'/appInspection/order/statisticsTop',
						method: 'get',
					})
					this.countNoPass = rex.data.countNoPass
					this.countPass = rex.data.countPass
					this.sum = rex.data.sum
					console.log(rex);
					this.opts.subtitle.name =  rex.data.list[0].value
				        let res = {
				            series: [
				              {
								  data : rex.data.list
				                // data: [{"name":"通过","value":70},{"name":"未通过","value":30},]
				              }
				            ]
				          };
						  console.log('官方格式',JSON.parse(JSON.stringify(res)));
				        this.chartData = JSON.parse(JSON.stringify(res));
						// this.getstatisticsTop()
				    
				    },
					 
					async getServerData1() {
						let data = {
							type : this.value
						}
						let rex = await request({
							url:'/appInspection/order/statisticsZXT',
							method: 'get',
							params: data
						})
						let res = rex.data
					
					      this.chartData1 = JSON.parse(JSON.stringify(res));
					
					  },
				  
			},
		}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}
	.c-top{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		 padding-top: 55px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}
	.c-title{
		font-size: 18px;
		font-weight: bold
	}
	.ail{
		width: 100%;
			background-color: #F6F6F6;
	}
	.top-box{
		width: 95%;
		border-radius: 5px;
		box-sizing: border-box;
		padding: 18px;
		background-color: white;
		margin: 10px auto;
	}
	.cont-box{
		width: 100%;
		border-radius: 5px;
		box-sizing: border-box;
		padding: 18px;
		background-color: white;
		margin: 10px auto;
	}
	 .charts-box {
	    width: 100%;
	    height: 300px;
	  }
	  .t-bottom{
		  width: 100%;
		  height: 130px;
		  border-top: 1px solid #EEEEEE;
		  box-sizing: border-box;
		  // padding: 20px;
	  }
	  .t-top{
	  		  width: 100%;
	  		  // height: 130px;
	  		 display: flex;
			 align-items: center;
			 justify-content: center;
	  		  box-sizing: border-box;
	  		  padding: 15px;
	  }
	  .sis{
		  width: 33%;
	  }
	  .t-title{
		  width: 100%;
		  text-align: center;
		  font-size: 14px;
		  font-weight: 400;
		  color: #333333;
		  line-height: 14px;
	  }
	  .t-num{
		  width: 100%;
		  text-align: center;
		  font-size: 26px;
		  font-weight: bold;
		  color: #0D2E8D;
		  line-height: 26px;
		  margin: 5px auto;
	  }
	  .cont-title{
		  font-size: 16px;
		  font-weight: 500;
		  color: #333333;
	  }
	   .charts-box {
	      width: 100%;
	      height: 300px;
	    }
		.wrap-box{
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			margin: 10px auto; 
		}
		.w-box{
			width: 33%;
			box-sizing: border-box;
			text-align: center;
			margin-bottom: 10px;
		}
		.imgicon{
			width: 33px;
			height: 28px;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.t-zhong{
			font-size: 14px;
			font-weight: 400;
			color: #333333;
			margin: 3px auto;
		}
		.lanbnum{
			font-size: 26px;
			font-weight: bold;
			color: #0D2E8D;
		}
		.b-title{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			font-weight: 400;
			color: #666666;
			margin-bottom: 10px;
		}
		.b-zuo{
			width: 20%;
		}
		.b-zhong{
			text-align: left;
			width: 60%;
			display: flex;
			align-items: center;
		}
		.b-you{
			width: 20%;
		}
		.touxiang{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background-color: white;
			overflow: hidden;
			margin-right: 10px;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.one{
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background: #FEB947;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			
		}
		.dis-t{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 10px auto;
		}
		.lank{
			width: 102px;
			height: 27px;
			border-radius: 14px ;
			border: 1px solid #0D2E8D;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 15px;
			font-weight: 400;
			color: #0D2E8D;
		}
		.lan-you{
			display: flex;
			align-items: center;
		}
		.yi{
			font-size: 15px;
			font-weight: 400;
			color: #666666;
			line-height: 15px;
			margin-right: 15px;
		}
		.er{
			width: 25px;
			height: 25px;
			background: #0D2E8D;
			border-radius: 3px ;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white !important;
		}
		// ----------------------
		.popup-box{
			overflow: hidden;
			border-radius: 8px;
			box-sizing: border-box;
			padding: 15px;
			width: 100%;
			background-color: white;
		}
		.sousuo{
			width: 95%;
			margin: 0 auto;
			margin-left: 0px;
			height: 30px;
			background: #F0F0F0;
			border-radius: 50px;
			color: #999999;
			box-sizing: border-box;
			padding:0 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			input{
				width: 80%;
			}
		}
		.list-box{
			width: 100%;
			height: 300px;
			overflow: hidden;
			box-sizing: border-box;
		
		}
		.list_scroll{
			height: 100%; // 需设置高度
			display: flex;
			flex-direction: column;
		
		}
		.list-qiu{
			width: 95%;
			border-bottom: 1px solid #EEEEEE;
			box-sizing: border-box;
			padding: 10px 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.tel{
			margin-left: 5px;
			font-size: 15px;
			font-weight: 400;
			color: #666666;
		}
</style>