<template>
	<view class="homePage">
		<view class="nav_area dis-flex-between-center">
			<view class="left-btn" v-html="(userType!=='background')?valueType:''"
			 :class="{'haveIcon':userType!=='background','select':showValueType}" @click="selectType"></view>
			<view class="" style="font-size: 18px;color: #101010;" v-html="userType!=='background'?'顶呱刮':'顶呱刮-总平台'"></view>
			<view class="right-btn" @click="changeAudio" v-html="userType!=='background'?'音乐':''"
			 :class="(userType!=='background'&&!isPlay)?'playIcon':(userType!=='background'&&isPlay)?'pauseIcon':''">
				<!-- <audio src="../../static/audio/pd-5b7671cee8051387.mp3" poster="" name="" author="" action="" controls></audio> -->
			</view>
		</view>
		<view class="home_1" v-if="userType!=='background'">
			<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="notice" @click="toUrl('notice')" v-if="notice.title">
				<text class="notice_t">公告：</text>
				{{notice.title}}
			</view>
			<view class="dis-flex goods_area new" v-if="showValueType">
				<view v-for="(item,index) in goodsList" :key="index" class="type_item">
					<view class="" @click="selectValueType(item)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="dis-flex goods_area" v-if="0">
				<view v-for="(item,index) in goodsList" :key="index" class="goods_item">
					<view class="" @click="selectValueType(item)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="">
				<view v-for="(item,index) in typeGoodsList" :key="index" class="dis-flex-between-center goods-item">
					<view class="">
						<image :src="item.cover_image" mode="aspectFill"></image>
					</view>
					<view class="goods-info">
						<view class="" style="color: #333;font-size: 16px;">{{item.title}}</view>
						<view class="">面值{{item.price}}元</view>
						<view class="">最高中奖金额{{item.max_awards_amount}}</view>
					</view>
					<view class="goods-btn" @click="toDetailUrl(item)">立即刮奖</view>
				</view>
			</view>
			<view class="list_area" v-if="0">
				<view class="list_title">中奖记录</view>
				<view class="dis-flex-between-center t-h">
					<view class="" style="flex: 0.4;">ID</view>
					<view class="" style="flex: 0.3;">手机号码</view>
					<view class="" style="flex: 0.3;text-align: right;">中奖金额</view>
				</view>
				<view v-for="(item,index) in recordsList" :key="index" class="t-d dis-flex-between-center">
					<view class="" style="flex: 0.4;">{{item.user_id}}</view>
					<view class="" style="flex: 0.3;">{{item.phone}}</view>
					<view class="black" style="flex: 0.3;text-align: right;"><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">
					<!-- #ifdef H5  -->
					<view class="pie_box" id="piechart"></view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="pie_box" ref="piechart"></view>
					<!-- #endif -->
					<view class="sum">
						{{userStatistics.sum.num}}
					</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>
						<!-- #ifdef H5  -->
						<view class="" id="mychart" style="width: 670rpx;height: 250px;"></view>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<view class="" ref="mychart" style="width: 670rpx;height: 250px;">
							<echarts1 :option="optionData" id="myChart1" style="height: 110vw;margin-left: 2vw;width: 100%;padding: 4vw 0 0 0;"></echarts1>
						</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	import updateTabBar from '@/common/js/updateTabBar.js'
	// #ifdef H5
	import * as echarts from 'echarts';//引入的是npm下载的
	// #endif
	import echarts1 from './echarts.vue';
	
	export default {
		data(){
			return {
				userType: 'background',//user|agent|background
				bannerList: [],
				goodsList: [],
				showValueType: false,
				valueType: '面值',
				valueId: '',
				typeGoodsList: [],
				recordsList: [],
				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: ''
					}
				},
				userStatistics: {
					agent: {
						num: '0',
						rate: '0%'
					},
					user: {
						num: '0',
						rate: '0%'
					},
					sum: {
						num: "0人" //总人数
					} 
				},
				UpDownSta: {
					"histogram": [
						{"date": "09", //月份
							"value": "20.00" //数据
						},
					], //柱状图
					"sum_value": "20.00" ,//总数据,
					xData: ['1月', '2月', '3月', '4月', '5月'],
					data: [155, 250, 360, 100, 180, 204]
				},
				notice: {
					title: ''
				},
				// 1#ifdef APP-PLUS
				optionData: {
					color: ['#5087EC','#74C0C8'],
					grid: {
						top: '12%',
						bottom: '5%',
						left: '2%',
						right: '4%',
						containLabel: true//防止标签溢出
					},
				  tooltip: {
						trigger: 'axis',
						triggerOn: 'mousemove|click'
					},
				  xAxis: {
				    data: this.UpDownSta&&this.UpDownSta.xData || ['1月', '2月', '3月', '4月', '5月'],
						axisLine: {
							lineStyle: {
								color: "#aaa",
								width: 2
							}
						},
						axisTick: {
							lineStyle: {
								color: "#aaa",
								width: 2
							}
						},
						axisLabel: {
							color: '#444'
						},
				  },
				  yAxis: {
						type: 'value',
						min: 0,
						max: this.interval*5,
						interval: this.interval,
						axisLine: {
							show: false,
							lineStyle: {
								color: "#ddd"
							}
						},
						axisLabel: {
							color: '#444'
						},
						splitLine: {
							lineStyle: {
								color: "#ddd"
							}
						}
					},
				  series: [
				    {
				      name: '',
				      type: 'bar',
							barMaxWidth: 30,
				      data: this.UpDownSta&&this.UpDownSta.data || [155, 250, 360, 100, 180, 204]
				    }
				  ]
				},
				// 1#endif
			}
		},
		components: {
			echarts1
		},
		computed: {
			isLogin(){
				return uni.getStorageSync('user_token');
			},
			interval(){
				let yMax = ([...this.UpDownSta.data].sort())[this.UpDownSta.data.length-1];
				if(!yMax){
					yMax = 200;
				}
				let interval = yMax / 5;
				if((interval+'-').indexOf('.')!=-1){
					interval = Math.ceil(interval);
				}
				return interval;
			}
		},
		methods: {
			changeAudio(){
				if(this.userType!=='user' && this.userType!=='agent') return;
				if(this.isPlay){
					this.isPlay = false;
					this.innerAudioContext.pause();
				}else{
					this.isPlay = true;
					this.innerAudioContext.play();
				}
			},
			toUrl(item){
				if(item=='login'){
					uni.navigateTo({
						url: '/pages/login/login'
						// url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
					})
				}else if(item=='notice'){
					uni.navigateTo({
						url: '/pages/NoticeDetails/NoticeDetails?id='+this.notice.id
					})
				}else if(item=='login'){
					
				}else{
					uni.navigateTo({
						url:'/pages/goodslist/goodslist?type='+item.title+'&id='+item.id
					})
				}
				
			},
			/* 选择面值 */
			selectType(){
				this.showValueType = !this.showValueType;
			},
			selectValueType(item){
				this.valueId = item.id;
				
				if(item.title=='全部面值'){
					this.valueType = '面值';
				}else{
					this.valueType = item.title;
				}
				this.getGoodsList();
				this.showValueType = false;
			},
			/* 某一面值的列表 */
			getGoodsList(){
				let data = {zone_id: this.valueId};
				if(this.valueType=="面值"){
					data = {};
				}
				API.getGoodsList(data, res=>{
					// console.log(res);
					this.typeGoodsList = res.data;
				})
			},
			/*  */
			toDetailUrl(item){
				uni.navigateTo({
					url:'/pages/scratchCard/scratchCard?id='+item.id+'&type='+this.valueType
				})
			},
			changeChartIndex(type){
				this.chartIndex = type;
				this.getUpDownSta(type);
				setTimeout(()=>{
					this.myChart.clear();
					this.renderChart();
				}, 200)
			},
			renderChart(){
				let option = {
					color: ['#5087EC','#74C0C8'],
					grid: {
						top: '12%',
						bottom: '5%',
						left: '2%',
						right: '4%',
						containLabel: true//防止标签溢出
					},
				  tooltip: {
						trigger: 'axis',
						triggerOn: 'mousemove|click'
					},
				  xAxis: {
				    data: this.UpDownSta.xData,
						axisLine: {
							lineStyle: {
								color: "#aaa",
								width: 2
							}
						},
						axisTick: {
							lineStyle: {
								color: "#aaa",
								width: 2
							}
						},
						axisLabel: {
							color: '#444'
						},
				  },
				  yAxis: {
						type: 'value',
						min: 0,
						max: this.interval*5,
						interval: this.interval,
						axisLine: {
							show: false,
							lineStyle: {
								color: "#ddd"
							}
						},
						axisLabel: {
							color: '#444'
						},
						splitLine: {
							lineStyle: {
								color: "#ddd"
							}
						}
					},
				  series: [
				    {
				      name: '',
				      type: 'bar',
							barMaxWidth: 30,
				      data: this.UpDownSta.data
				    }
				  ]
				};
				
				this.myChart.setOption(option);
			},
			renderPie(){
				let option = {
					color: ['#22c18b','#678CFD'],
					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);
			},
			
			
			/*轮播图*/
			getRotationChart(){
				API.getRotationChart({
					page:1, limit: 10
				}, res=>{
					this.bannerList = res.data.list;
				})
			},
			/*专区*/
			getZoneList(){
				API.getZoneList({}, res=>{
					this.goodsList = res.data;
					this.goodsList.push({
						id: '',
						title: '全部面值'
					})
					
					// this.valueType = this.goodsList[0].title;
					// this.valueId = this.goodsList[0].id;
					// this.getGoodsList();
				})
			},
			/*记录*/
			getAwardRecords(page=1, limit=20){
				API.getAwardRecords({
					page:page, limit: limit
				}, res=>{
					if(res.data.list.length<10){
						this.nomore = true;
					}
					if(page>1){
						this.recordsList = this.recordsList.concat(res.data.list);
					}else{
						this.recordsList = res.data.list;
					}
				})
			},
			/*总后台待办*/
			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, xData: [], data: []};
					this.UpDownSta.xData = this.UpDownSta.histogram.map(item=>{
						return +item.date+'月';
					})
					this.UpDownSta.data = this.UpDownSta.histogram.map(item=>{
						return item.value;
					})
				})
			},
			/**/
			getNotice(){
				API.request('/index/getNotice', {}, res=>{
					this.notice = res.data;
				}, fail=>{}, true)
			},
		},
		mounted() {
			if(this.userType!=='background'){
				this.innerAudioContext = uni.createInnerAudioContext();
				// this.innerAudioContext.autoplay = false;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.src = '../../static/audio/bgm.mp3';
				this.innerAudioContext.autoplay = true;//H5端部分浏览器不支持
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				this.innerAudioContext.onPause(() => {
				  console.log('暂停播放');
				});
				this.innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
				if(!this.isPlay){
					this.isPlay = true;
					this.innerAudioContext.play();//报错原因是chrome新特性,内容大致意思是开发者不能利用手中权限去给用户造成噪音干扰,首次加载页面需要用户和audio/video进行交互
				}
				
			}
			// this.userType='background';
			if(this.userType=='background'){
				// console.log(this.$refs, 'this.$refs----');
				// console.log(this.$refs.piechart, 'this.$refs.piechart----');
			}
			
		},
		onShow() {
			setTimeout(()=>{
			// debugger;
				if(this.userType!=='background'){
					if(this.userType=='user'){
						updateTabBar.changeUser();
					}else if(this.userType=='agent'){
						updateTabBar.changeAgent();
					}
					this.getZoneList();// 面值列表
					this.getGoodsList();// 彩票列表
					this.getRotationChart();
					this.getAwardRecords();
					this.getNotice();
				}else if(this.userType=='background'){
					this.chartIndex = 1;
					updateTabBar.changebackground();
					this.getNeedSta();
					this.getUserSta();
					this.getUpDownSta();
					
					// #ifdef H5
					this.pieChart = echarts.init(document.getElementById('piechart'));
					this.myChart = echarts.init(document.getElementById('mychart'));
					// #endif
					// #ifdef APP-PLUS
					// this.pieChart = echarts.init(this.$refs.piechart);
					// this.myChart = echarts.init(this.$refs.mychart);
					// #endif
					
					setTimeout(()=>{
						this.renderPie();
						this.renderChart();
					}, 200)
				}
			}, 500)
			
		},
		onHide() {
			
		},
		created() {
			this.userType = uni.getStorageSync('userType');
		},
		onReachBottom() {
			if(this.userType!=='background' && !this.nomore){
				this.page++;
				this.getAwardRecords(this.page, 10);
			}
		},
		onUnload(){
			if(this.userType!=='background' && this.isPlay){
				this.isPlay = false;
				this.innerAudioContext.pause();
			}
		}
		
	}
</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;
	/*  #ifdef APP-PLUS  */
	padding-top: calc(90rpx + var(--status-bar-height));
	/*  #endif  */
}
.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;
		color: #E33837;
		
		&.haveIcon::after{
			content: '';
			width: 48rpx;
			height: 48rpx;
			display: inline-block;
			// background-image: url("../../static/home/iconPark-me@2x.png");
			background-image: url("../../static/home/fas fa-caret-down@2x.png");
			background-size: contain;
			vertical-align: middle;
			margin-right: 10rpx;
			margin-top: -2px;
		}
		&.haveIcon.select::after{
			content: '';
			width: 48rpx;
			height: 48rpx;
			display: inline-block;
			// background-image: url("../../static/home/iconPark-me@2x.png");
			background-image: url("../../static/home/fas fa-caret-down@2x.png");
			background-size: contain;
			vertical-align: middle;
			margin-right: 10rpx;
			margin-top: -2px;
			transform: rotate(-180deg);
		}
	}
	.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;
		}
	}
	.notice{
		color: #f00;
		font-size: 14px;line-height: 14px;margin-bottom: 30rpx;
		display: -webkit-box;//将盒子转换为弹性盒子
		-webkit-box-orient: vertical;//文本显示方式，默认水平
		-webkit-line-clamp: 1;//设置显示多少行
		overflow: hidden;

		.notice_t{
			// color: #b0b0b0;
			color: #f00;
		}
	}
	.goods_area{
		flex-wrap: wrap;
		justify-content: space-between;
		width: 700rpx;
		position: fixed;
		top: 88rpx;
		left: 0px;
		z-index: 2;
		background: #fff;
		padding: 20px 12.5px 0px 12.5px;
		box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.05);
		
		&.new{
			width: 16vw;
			padding: 10px 12.5px 10px 12.5px;
		}
		.type_item{
			color: #E33837;
			font-size: 14px;
			line-height: 34px;
		}
		.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;
		}
	}
	.goods-item{
		height: 88px;
		// padding: 10px 13px;
		padding: 10px 0px;
		color: #999;
		font-size: 14px;
		
		>view{
			height: 88px;
		}
		image{
			width: 138px;
			height: 88px;
			border-radius: 10px;
		}
		.goods-info{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 0px 5px;
			flex: 1;
		}
		.goods-btn{
			width: 78px;
			height: 40px;
			background-color: #e33838;
			border-radius: 5px;
			font-size: 14px;
			color: #fff;
			line-height: 40px;
			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;
		position: relative;
		
		.pie_box{
			width: 332rpx;height: 332rpx;
			margin: 0px 20rpx 20rpx -20rpx;
			box-sizing: border-box;
			border: 10px solid #fff;
		}
		.sum{
			position: absolute;top:0px;left:0px;
			width: 332rpx;height: 332rpx;
			line-height: 332rpx;
			margin: 0px 20rpx 20rpx -20rpx;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
		}
		.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>
