<style lang='scss' scoped>
.load{
	width: 100%;
	&-box{
		&-header{
			background-color: #F2F2F2;
			padding: $paddingTB $paddingLR;
		}
		
	}
}
</style>
<template>
	<view class="load">
		<view class="load-box">
		 	<view class="load-box-header">
		 		<tuiIcon name="quxian4" color="#FE6D0C" size="50"></tuiIcon>
				<text class="pl15 text-bold">近两天的负载情况</text>
		 	</view>
			<lineScroll canvasId="lineId1" :chartData="dayChartData" @onRenderComplete="dayOnRenderCompleteFn" width="750" height="500" lineScroll="curve"></lineScroll>
		</view>
		<view class="load-box" v-if="weekShowFlag">
		 	<view class="load-box-header">
		 		<tuiIcon name="quxian4" color="#FE6D0C" size="50"></tuiIcon>
				<text class="pl15 text-bold">近两周的负载情况</text>
		 	</view>
			<lineScroll canvasId="lineId2" :chartData="weekChartData" @onRenderComplete="weekOnRenderCompleteFn" width="750" height="500" lineScroll="curve"></lineScroll>
		</view>
		<view class="load-box" v-if="lastYearFlag">
		 	<view class="load-box-header">
		 		<tuiIcon name="quxian4" color="#FE6D0C" size="50"></tuiIcon>
				<text class="pl15 text-bold">今年和去年各月负载情况</text>
		 	</view>
			<columnScroll :chartData="yearChartData" width="750" height="500"></columnScroll>
		</view>
	</view>
</template>
<script>
	import lineScroll from "@/components/uchartComponents/line-scroll.vue";
	import columnScroll from "@/components/uchartComponents/column-scroll.vue";
	let that
	const nameArr = [
		{
			key: 1,
			value: 'nowData',
			type: 'year',
			label: '今年',
		},
		{
			key: 2,
			value: 'pastData',
			type: 'year',
			label: '去年',
		},
		{
			key: 3,
			value: 'nowData',
			type: 'month',
			label: '本月',
		},
		{
			key: 4,
			value: 'pastData',
			type: 'month',
			label: '上月',
		},
		{
			key: 5,
			value: 'nowData',
			type: 'week',
			label: '本周',
		},
		{
			key: 6,
			value: 'pastData',
			type: 'week',
			label: '上周',
		},
		{
			key: 7,
			value: 'nowData',
			type: 'day',
			label: '今天',
		},
		{
			key: 8,
			value: 'pastData',
			type: 'day',
			label: '昨天',
		},
	];
	export default {
		data() {
			return {
				dayChartData: {},
				weekChartData: {},
				yearChartData: {},
				
				LineA:{},
				weekShowFlag:false,
				lastYearFlag:false
			}
		},
		onLoad(e) {
			that = this
			// this.getServerData();
			this.getChartData(e.projectId)
		},
		components:{lineScroll,columnScroll},
		methods: {
			weekOnRenderCompleteFn(){
				this.lastYearFlag = true;
				// console.log(this.Column,"this.Column");
				// this.yearChartData = this.Column;
			},
			dayOnRenderCompleteFn(type){
				// console.log(type,"type");
				this.weekShowFlag = true;
				// this.weekChartData = this.LineA;
			},
			getChartData(projectId) {
				let params = {
					projectId
				};
				that.$get('/app/smart/power/load', params).then(res => {
					if(res.code === 200){
						let { dayLoad, weekLoad, yearLoad } = res.data
						// let dayLoad = res.data.dayLoad
						// let weekLoad = res.data.weekLoad
						// let yearLoad = res.data.yearLoad
						that.dayChartData = that.setChartData(dayLoad, 'day');
						that.weekChartData = that.setChartData(weekLoad, 'week');
						that.yearChartData = that.setChartData(yearLoad, 'year');
					}
				})
			},
			setChartData(obj, type) {
				let categories = [],
					series = [];
				for (let item in obj) {
					if (item === 'xName') {
						categories = obj[item];
					} else {
						let seriesObj = {
							name: this.getKeyName(item, type),
							data: obj[item]
						}
						series.push(seriesObj);
					}
				}
				return {
					categories,
					series
				}
			},
			getServerData(){
				let _self = this;
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data:{
					},
					success: function(res) {
						_self.LineA={categories:[],series:[]};
						_self.LineA.categories=res.data.data.LineA.categories;
						_self.LineA.series=res.data.data.LineA.series;
						_self.dayChartData = _self.LineA;
						
						_self.Column={categories:[],series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						_self.Column.categories=res.data.data.LineA.categories;
						_self.Column.series=res.data.data.LineA.series;
						
					},
					fail: () => {
						// _self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			},
			getKeyName(value, type) {
				let res = nameArr.find(item => item.value === value && item.type === type);
				if (res) {
					return res.label
				} else {
					return ''
				}
			},
		}
	}
</script>
