<template>
	<view class="home">
		<!-- 头部 -->
		<view class="base">
			<view class="title" @click="show=true">
			<text>{{currentBase.baseName}}</text>
			</view>
			<view class="baseInfo">
				<view class="item">
					<view class="num">
						{{baseInfo.areaCount}}
					</view>
					<view class="unit">
						基地面积(亩)
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{baseInfo.diCount+baseInfo.pengCount}}
					</view>
					<view class="unit">
						地块数量(块)
					</view>
				</view>
			</view>
			<image class="bg" src="https://sancangshop.oss-cn-beijing.aliyuncs.com/frog/bg.png" mode=""></image>
		</view>
		<view class="content">
			<!-- 菜单 -->
			<view class="tabs" >
				<view class="tab" v-for="(item,index) in fixMenus" :key="index" @click="jump(item)">
					<image class="img" :src="item.menuPicture" mode=""></image>
					<view class="label">
						{{item.menuName}}
					</view>
				</view>
			</view>
			<u-divider></u-divider>
			<!-- 幻灯 -->
			<view class="swiper">
				<u-swiper :list="swiperList" showTitle keyName="imgUrl" height="100" :circular="true"  @change="e => current = e.current" @click="jumpToNewDetail">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot"  v-for="(item, index) in swiperList" :key="index"  
						:class="[index === current  && 'indicator__dot--active']"></view>
					</view>
				</u-swiper>
			</view>
			<u-divider></u-divider>
			
			<!-- 任务统计 -->
			<view class="chart">
				<view class="title">
					<text class="font-weight-700 font-size-35">我的任务</text>
					 <view @click="jumpToTaskList" class="flex aic jcc font-color-2b7 font-size-26">
						 查看更多</view>
					</view>
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" 
				:canvas2d="true" canvasId="CvlrbaEbAdVUhFMpyxLGWSdKKCpHGkMf"/>
			</view>
		</view>
		<!-- 基地选择弹窗 -->
		<u-picker :show="show" :columns="baseList" keyName="baseName" @cancel="show=false" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	//#ifdef APP-PLUS
	import { round } from '../../uni_modules/uview-ui/libs/function/digit.js'
	import { onLoad } from '../../uni_modules/uview-ui/libs/mixin/mixin.js';
	import { appUpgrade} from '../../utils/upgrade.js'
	//#endif
	//#ifdef MP
	import {mpUpgrade} from '../../utils/upgrade.js'
	//#endif
	import fixMenus from './menusConfig.js';
	export default { 
		data() {
			return {
				//基地信息
				baseInfo:{
					areaCount:0,
					diCount:0,
					pengCount:0
				},
				fixMenus,
				//当前选择的基地
				currentBase:{baseName:''},
				//基地选择控件
				show:false,
				//基地列表
				baseList: [],
				//菜单列表
				list: [],
				//农事任务图表值
				chartData: {},
				//图表配置项
				opts: {
					update:true,
					rotate: false,
					rotateLock: false,
					color: [ "#dadada","#fc842d", "#ead900", "#2b7"],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 16
					},
					title: {
						name: "0",
						fontSize: 24,
						color: "#666666"
					},
					subtitle: {
						name: "完成进度",
						fontSize: 10,
						color: "#999999"
					},
					extra: {
						ring: {
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							customRadius: "60"
						}
					}
				},
				//host
				baseUrl:uni.$u.http.config.baseURL,
				//幻灯列表
				swiperList:[],
				//幻灯当前值
				current:0
			}
		},
		onLoad() {
			//监听登陆成功事件
			uni.$on("login",(data)=>{
				if(data.msg=="success"){
					uni.hideLoading()
					uni.showToast({
						title: '登录成功',
						duration: 1500,
						icon:"none",
						position:"bottom"
					});
				}
			})
		},
		destroyed() {
			//取消事件监听
			uni.$off("login")
		},
		watch:{
			currentBase:{
				handler:async function(n){
					if(n.deptId){
						//获取基地详情
						this.getBaseInfo();
						//获取轮播新闻列表
						this.getSwiperList();
						//农事
						this.loadChart();
					}
				},
				deep:true
			}
		},
		async onLoad() {
			//升级
			this.upgrade();
			//获取基地列表
			this.getBaseList();
		},
		async onPullDownRefresh() {
			//获取基地详情
			await this.getBaseInfo();
			//获取轮播新闻列表
			await this.getSwiperList();
			//农事
			await this.loadChart();
			uni.stopPullDownRefresh();
			
		},
		methods: {
			//升级
			async upgrade() {
				//#ifdef APP-PLUS
				const {rows} = await uni.$u.http.get('/system/upgrade/mobile/list', {params: {isCurrent: 1}})
				appUpgrade(rows[0])
				//#endif
				//#ifdef MP
				mpUpgrade();
				//#endif
			},
			//获取基地列表
			async getBaseList(){
				const {data} = await uni.$u.http.get('/agriculture/baseinfo/selectBaseinfoListByRoles');
				this.baseList = [data];
				//默认选择第一个
				if(data.length>0) {
					this.currentBase = data[0]
					uni.setStorageSync('baseId',this.currentBase.deptId)
				}
				
			},
			//基地选择确定
			confirm(e){
				this.currentBase = e.value[0];
				uni.setStorageSync('baseId',this.currentBase.deptId)
				this.show = false;
			},
			//获取基地详情
			async getBaseInfo(){
				const { rows } = await uni.$u.http.get("/agriculture/statistics/selectBaseInfo/"+this.currentBase.deptId);
				if(rows.length>0){
					this.baseInfo=rows[0];
				}
			},
			//获取新闻轮播类标
			async getSwiperList(){
				const { rows} = await uni.$u.http.get("/iot/news/list",{params:{
					isBanner: 1,
					status: 1,
					baseId:this.currentBase.deptId
				}});
				
				this.swiperList=rows.map(item=>{
					return {
						//图片转换
						imgUrl:uni.$u.http.config.baseURL+item.imgUrl,
						//新闻标题截取
						title:item.title.length>16?item.title.slice(0,16)+"...":item.title,
						//新闻ID
						newsId:item.newsId
					}
				})
			},
			//跳转带新闻详情
			jumpToNewDetail(index){
				uni.$u.route({
					url: 'pages/service/newsDetail',
					params: {
						id: this.swiperList[index].newsId
					}
				})
			},
			//农事任务统计 TODO:图表组建数据改变了没有重新加载
			async loadChart(){
				const {rows} = await uni.$u.http.get("/agriculture/statistics/selectTaskInfoOfMine");
				let data=rows.map(item=>({name:item.name,value:item.value,status:item.status}));
				//总任务数
				let total = data.reduce((total,item)=>{
					return total+item.value;
				},0);
				//已经完成任务数
				let finsh = data.filter(item=>item.status=='3').reduce((total,item)=>{
					return total+item.value;
				},0);
				//完成比例
				let finishPercent = total==0?0+'%' : (finsh/total*100).toFixed(0)+'%';
				let res = {
					series: [{
						data: data  
					}] 
				};
				this.opts.title.name=String(finishPercent)
				this.$nextTick(()=>{
					this.chartData = JSON.parse(JSON.stringify(res));
				})
			},

			//菜单跳转
			jump(data) {
				//数据采集按钮，跳转到所有的设备
				uni.$u.route({
					type: data.type,
					url: data.pageUrl,
					params:data.params
				})
			},
			//跳转到任务详情
			jumpToTaskList(){
				uni.$u.route({
					url: 'pages/farm/index',
				})
				// uni.$u.route({
				// 	url: 'pages/farm/taskList',
				// 	params: {
				// 		//任务的状态值为0
				// 		status:0,
				// 		//任务的计划开始时间为当天
				// 		planStart:this.$date.getDate(),
				// 		//页面标题
				// 		title:'待处理任务',
				// 		jumpFrom:2
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.base {
			background: #2b7;
			height: 450rpx;
			color: #fff;
			padding: 80rpx 30rpx 80rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: flex-end;
			margin-bottom: -40rpx;
			position: relative;
			z-index: 0;
			.title{
				font-weight: 600;
				font-size: 45rpx;
				color: #fff;
				position: absolute;
				top: 130rpx;
				left: 30rpx;
			}
			.baseInfo {
				width: 100%;
				display: flex;
				.item{
					font-size: 25rpx;
					margin-right: 20rpx;
					.num{
						font-size: 45rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
					.unit{
						font-size:28rpx;
						color: #fff;
						font-weight: 600;
					}
				}
			}
			.bg{
				position: absolute;
				right: 30rpx;
				top: 20%;
				width: 350rpx;
				height: 252rpx;
			}
		}

		.content {
			position: relative;
			z-index: 0;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background: #fff;
			padding: 40rpx;
			box-sizing: border-box;

			.tabs {
				display: flex;
				flex-wrap: wrap;
				.tab {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 10rpx;
					position: relative;
					
					&::after {
						display: block;
						content: '';
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						right: 0;
					}

					.iconfont {
						color: #fff;
						border-radius: 30rpx;
						width: 90rpx;
						height: 90rpx;
						font-size: 76rpx;
						margin-bottom: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.img{
						width: 130rpx;
						height: 130rpx;
						border-radius: 30rpx;
						overflow: hidden;
						margin-bottom: -20rpx;
					}

					.label {
						font-size: 24rpx;
						font-weight: 500;
						text-align: center;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 100%;
						position: relative;
						z-index: 0;
					}
				}
			}

			.swiper{
				overflow: hidden;
				position: relative;
				.indicator{
					position: absolute;
					z-index: 0;
					display: flex;
					right: -330rpx;
					top: -10rpx;
					&__dot {
						height: 8rpx;
						width: 16rpx;
						border-radius: 4rpx;
						background-color: #fff;
						margin: 0 4rpx;
						transition: background-color 0.3s;
						transition: width 0.3s;
						&--active {
							background-color: #69BB73;
							width: 40rpx;
						}
					}
				}
			}
			.chart {
				height: 500rpx;
				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
</style>