<template>
	<view class="homePage">
		<view class="nav_area dis-flex-between-center">
			<view class="left-btn" @click="toUrl('login')" v-html="(!isLogin&&userType=='user')?'请登录':''"
			 :class="(!isLogin&&userType=='user')?'haveIcon':''"></view>
			<view class="" style="font-size: 18px;color: #101010;" v-html="userType=='user'?'顶呱刮':'顶呱刮-总平台'"></view>
			<view class="right-btn" @click="changeAudio" v-html="userType=='user'?'音乐':''"
			 :class="(userType=='user'&&!isPlay)?'playIcon':(userType=='user'&&isPlay)?'pauseIcon':''">
				<!-- <audio src="../../static/audio/pd-5b7671cee8051387.mp3" poster="" name="" author="" action="" controls></audio> -->
			</view>
		</view>
		<view class="home_1" v-if="userType=='user'">
			<view class="banner_area">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image :src="item.image" mode=""></image>
					</swiper-item>
				</swiper>
				
			</view>
			<view class="" style="color: #b0b0b0;font-size: 14px;height: 30px;line-height: 14px;">
				公告：<text style="color: #101010;">关于中奖概率调整问题</text>
			</view>
			<view class="dis-flex goods_area">
				<view v-for="(item,index) in goodsList" :key="index" class="goods_item">
					<view class="" @click="toUrl(item)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="list_area">
				<view class="list_title">中奖记录</view>
				<view class="dis-flex-between-center t-h">
					<view class="">ID</view>
					<view class="">手机号码</view>
					<view class="">中奖金额</view>
				</view>
				<view v-for="(item,index) in recordsList" :key="index" class="t-d dis-flex-between-center">
					<view class="">{{item.user_id}}</view>
					<view class="">{{item.phone}}</view>
					<view class="black"><text class="red">{{item.awards_amount}}</text>元</view>
				</view>
			</view>
		</view>
		<view class="home_2" v-if="userType=='background'">
			<view class="">
				<view class="title">
					待办<text style="color: #999;font-size: 12px;">（更新于：{{needInfo.update_time}}）</text>
				</view>
				<view class="card">
					<view class="">{{needInfo.down_scores_quota.title}}</view>
					<view class="t2">{{needInfo.down_scores_quota.quota}}</view>
				</view>
			</view>
			<view class="">
				<view class="title">
					用户统计
				</view>
				<view class="pie_area">
					<view class="pie_box" id="piechart">
						
					</view>
					<view class="right">
						<view class="right1">
							<view class="">
								<view class="label" style="font-size: 12px;">代理人数</view>
								<view class="" style="font-weight: bold;padding-left: 20px;">{{userStatistics.agent.num}}</view>
							</view>
							<view class="" style="font-weight: bold;">{{userStatistics.agent.rate}}</view>
						</view>
						<view class="right1">
							<view class="">
								<view class="label" style="font-size: 12px;">用户人数</view>
								<view class="" style="font-weight: bold;padding-left: 20px;">{{userStatistics.user.num}}</view>
							</view>
							<view class="" style="font-weight: bold;">{{userStatistics.user.rate}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="title">
					上下分数据
				</view>
				<view class="chart_tab">
					<view class="item" @click="changeChartIndex(1)" :class="chartIndex==1?'active':''">上分统计</view>
					<view class="item" @click="changeChartIndex(2)" :class="chartIndex==2?'active':''">下分数据</view>
				</view>
				<view class="chart_area">
					<view class="chart">
						<view class="" style="color: #999;font-size: 14px;">
							{{ chartIndex==1?'上分总数':'下分总数' }}：<text style="color: #101010;">{{ UpDownSta.sum_value }}</text>
						</view>
						<view class="" id="mychart" style="width: 670rpx;height: 250px;"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import API from '@/common/js/api.js'
	// import updateTabBar from '@/common/js/updateTabBar.js'
	export default {
		data() {
			return {
				userType: 'background',//user|agent|background
				bannerList: [],
				goodsList: [],
				recordsList: [1,2,3,4,5,6],
				chartIndex: 1,//1上分2下分
				myChart: null,
				pieChart: null,
				innerAudioContext: null,
				isPlay: false,
				nomore: false,
				page: 1,
				needInfo: {
					update_time: '2023/08/30 19:00',
					down_scores_quota: {
						title: '待下分额度',
						quota: '10010.00'
					}
				},
				userStatistics: {
					agent: {
						num: '7',
						rate: '36.84%'
					},
					user: {
						num: '12',
						rate: '63.16%'
					},
					sum: {
						num: "19人" //总人数
					} 
				},
				UpDownSta: {
					"histogram": [
						{"date": "09", //月份
							"value": "20.00" //数据
						},
					], //柱状图
					"sum_value": "20.00" ,//总数据,
					xData: ['1月', '2月', '3月', '4月', '5月'],
					data: [155, 250, 360, 100, 180, 204]
				}
			}
		},
		computed: {
			isLogin(){
				return uni.getStorageSync('user_token');
			}
		},
		onShow() {
			this.getAwardRecords();
			
		},
		created() {
			this.userType = uni.getStorageSync('userType');
			
			if(this.userType=='user'){
				this.getZoneList();
				this.getRotationChart();
			}
			if(this.userType=='background'){
				this.getNeedSta();
				this.getUserSta();
				this.getUpDownSta();
			}
		},
		mounted() {
			if(this.userType=='user'){
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = false;
				this.innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				this.innerAudioContext.onPause(() => {
				  console.log('暂停播放');
				});
				this.innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			}
			
			if(this.userType=='background'){
				this.pieChart = echarts.init(document.getElementById('piechart'));
				this.myChart = echarts.init(document.getElementById('mychart'));
				setTimeout(()=>{
					this.renderPie();
					this.renderChart();
				}, 200)
			}
			
		},
		methods: {
			toUrl(item){
				if(item=='login'){
					uni.navigateTo({
						url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
					})
				}else if(item=='login'){
					
				}else if(item=='login'){
					
				}else{
					uni.navigateTo({
						url:'/pages/goodslist/goodslist?type='+item.title+'&id='+item.id
					})
				}
				
			},
			changeChartIndex(type){
				this.chartIndex = type;
				this.getUpDownSta(type);
				setTimeout(()=>{
					this.myChart.clear();
					this.renderChart();
				}, 200)
			},
			renderChart(){
				let yMax = ([...this.UpDownSta.data].sort())[this.UpDownSta.data.length-1];
				let interval = yMax / 5;
				// yMax = interval*6;
				let option = {
					color: ['#5087EC','#74C0C8'],
				  // title: {
				  //   text: '上分总数：',
						// textStyle: {
						// 	color: '#999',
						// 	fontSize: 14,
						// 	fontWeight: 'normal'
						// }
				  // },
					grid: {
						top: '12%',
						bottom: '12%'
					},
				  tooltip: {},
				  xAxis: {
				    data: this.UpDownSta.xData,
						
				  },
				  yAxis: [{
						min: 0,
						max: yMax,
						interval: interval
					},
					{
						min: 0,
						max: yMax,
						interval: interval
					}],
				  series: [
				    {
				      name: '',
				      type: 'bar',
							barMaxWidth: 30,
				      data: this.UpDownSta.data
				    },
				    {
				      name: '',
				      type: 'line',
				      // data: [175, 180, 410, 208, 195, 330],
				      data: this.UpDownSta.data,
							yAxisIndex: 1
				    }
				  ]
				};
				
				this.myChart.setOption(option);
			},
			renderPie(){
				let option = {
					color: ['#678CFD', '#22c18b'],
					series: [
						{
							name: '',
							type: 'pie',
							radius: ['68%', '98%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 4,
								borderColor: '#fff',
								borderWidth: 0
							},
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: 40,
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: [
								{ value: this.userStatistics.agent.num, name: 'Search Engine' },
								{ value: this.userStatistics.user.num, name: 'Direct' }
							]
						}
					]
				};
				
				this.pieChart.setOption(option);
			},
			changeAudio(){
				if(this.userType!=='user') return;
				if(this.isPlay){
					this.isPlay = false;
					this.innerAudioContext.pause();
				}else{
					this.isPlay = true;
					this.innerAudioContext.play();
				}
			},
			
			/*轮播图*/
			getRotationChart(){
				API.getRotationChart({
					page:1, limit: 10
				}, res=>{
					this.bannerList = res.data.list;
				})
			},
			/*专区*/
			getZoneList(){
				API.getZoneList({}, res=>{
					this.goodsList = res.data;
				})
			},
			/*记录*/
			getAwardRecords(page=1, limit=20){
				API.getAwardRecords({
					page:page, limit: limit
				}, res=>{
					this.recordsList = res.data.list;
					if(res.data.list.length<10){
						this.nomore = true;
					}
				})
			},
			/*总后台待办*/
			getNeedSta(){
				API.request('/adminStatistics/needStatistics', {}, res=>{
					this.needInfo = res.data;
				})
			},
			/*总后台用户统计*/
			getUserSta(){
				API.request('/adminStatistics/userStatistics', {}, res=>{
					this.userStatistics = res.data;
				})
			},
			/*总后台上下分统计数据*/
			getUpDownSta(type=1){
				API.request('/adminStatistics/upAndDownStatistics', {type: type}, res=>{
					this.UpDownSta = res.data;
					this.UpDownSta.xData = this.UpDownSta.histogram.map(item=>{
						return item.date;
					})
					this.UpDownSta.data = this.UpDownSta.histogram.map(item=>{
						return item.value;
					})
				})
			}
			
			
		},
		onReachBottom() {
			if(!this.nomore){
				this.page++;
				this.getAwardRecords(this.page, 10);
			}
		}
	}
</script>

<style lang="scss" scoped>
.dis-flex{
	display: flex;
}
.dis-flex-between-center{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.homePage{
	padding: 90rpx 12.5px 50px;
}
.nav_area {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 99;
	background-color: #fff;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
	width: 700rpx;
	height: 88rpx;
	padding: 0px 25rpx;
	padding-top: var(--status-bar-height);
	box-sizing: content-box;
	color: #b0b0b0;
	font-size: 14px;

	.left-btn{
		flex: 0.3;
		height: 48rpx;
		line-height: 48rpx;
		
		&.haveIcon::before{
			content: '';
			width: 48rpx;
			height: 48rpx;
			display: inline-block;
			background-image: url("../../static/home/iconPark-me@2x.png");
			background-size: contain;
			vertical-align: middle;
			margin-right: 10rpx;
			margin-top: -2px;
		}
	}
	.right-btn{
		flex: 0.3;
		text-align: right;
		height: 48rpx;
		line-height: 48rpx;
		
		&.playIcon::after{
			content: '';
			width: 48rpx;
			height: 48rpx;
			display: inline-block;
			background-image: url("../../static/home/md-volume_off@2x.png");
			background-size: contain;
			vertical-align: middle;
			margin-left: 10rpx;
			margin-top: -2px;
		}
		&.pauseIcon::after{
			content: '';
			width: 48rpx;
			height: 48rpx;
			display: inline-block;
			background-image: url("../../static/home/md-volume_up@2x.png");
			background-size: contain;
			vertical-align: middle;
			margin-left: 10rpx;
			margin-top: -2px;
		}
	}
}
.home_1{
	.banner_area{
		padding: 20px 0px;
		swiper{
			border-radius: 10px;
			overflow: hidden;
		}
		image{
			width: 700rpx;
			height: 300rpx;
			border-radius: 10px;
			overflow: hidden;
		}
	}
	.goods_area{
		flex-wrap: wrap;
		justify-content: space-between;
		
		.goods_item{
			width: 107px;
			height: 54px;
			border: 1px solid #FAAB0E;
			border-radius: 10px;
			margin-bottom: 20px;
			color: #FAAB0E;
			font-size: 14px;
			line-height: 54px;
			text-align: center;
		}
	}
	.list_area{
		font-size: 14px;
		
		.list_title{
			font-size: 16px;
			color: #101010;
			font-weight: bold;
			height: 30px;
		}
		.t-h{
			color: #cecece;
			height: 30px;
		}
		.t-d{
			color: #999;
			height: 30px;
		}
		.red{
			color: #e50000;
		}
		.black{
			color: #101010;
		}
	}
	
}
.home_2{
	padding: 20px 7.5px;
	.title{
		display: flex;
		align-items: center;
		font-size: 18px;
		color: #101010;
		font-weight: bold;
	}
	.card{
		width: 670rpx;
		height: 160rpx;
		border-radius: 10px;
		background-image: linear-gradient(to right, #B2E6FF, #57ACFF);
		margin: 10px auto 20px;
		color: #fff;
		font-size: 12px;
		box-sizing: border-box;
		padding: 30rpx 20rpx;

		.t2{
			font-size: 20px;
			font-weight: bold;
			margin-top: 20rpx;
		}
	}
	.pie_area{
		display: flex;
		.pie_box{
			width: 332rpx;height: 332rpx;
			margin: 0px 20rpx 20rpx -20rpx;
			box-sizing: border-box;
			border: 10px solid #fff;
		}
		.right{
			padding-top: 40rpx;
		}
		.right1{
			width: 304rpx;
			height: 86rpx;
			border-radius: 5px;
			background-color: #fafaff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 20rpx;
			margin-bottom: 20rpx;
			font-size: 14px;
		}
		.label{
			padding-left: 20px;
			position: relative;
			margin-bottom: 3px;
		}
		.right1:nth-of-type(1) .label::before{
			content: '';
			display: inline-block;
			width: 24rpx;height: 24rpx;
			border-radius: 2px;
			background-color: #22c18b;
			position: absolute;
			top: 3px;
			left: 0px;
		}
		.right1:nth-of-type(2) .label::before{
			content: '';
			display: inline-block;
			width: 24rpx;height: 24rpx;
			border-radius: 2px;
			background-color: #678CFD;
			position: absolute;
			top: 3px;
			left: 0px;
		}
	}
	
	.chart_tab{
		width: 380rpx;
		height: 160rpx;
		border-radius: 10px;
		text-align: center;
		background-color: #fafaff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		
		.item{
			width: 160rpx;
			height: 120rpx;
			text-align: center;
			line-height: 120rpx;
			color: #101010;
			font-size: 14px;
			background-color: #fff;
			border-radius: 10px;
		}
		.item.active{
			color: #678CFD;
			font-weight: bold;
		}
	}
	.chart_area{
		
	}
}

</style>
