<template>
	<view class="periodPrice_body">
		<scroll-view v-if="priceList.length>2" style="width: 100%; height: 380rpx;  " scroll-x="true">
			<qiunDataCharts :ontouch="true" :canvas2d='true' canvasId='canvasIdt' inScrollView="true" type="area" :opts="{
				enableScroll:true,
					extra:{
						area:{
							type:'curve',
							addLine:true,
							gradient:true
							}
						}, 
						xAxis:{
							itemCount:5,
							scrollShow:true
						},
					fontColor:'#000000', 
					}" :chartData="Line" />
		</scroll-view>
		<view style="flex: 1;overflow: hidden;">
			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'>
				<view class="periodPrice_item" :key="index" v-for="(item,index) in priceList">
					<view class="periodPrice_item_top flex">
						<view class=" periodPrice_item_top_label oneflex">
						{{item.startTime}}-{{item.endTime}}  \n\n\n
						<text v-if=" `${item.startTime} - ${item.endTime}` == now ">(当前时间段)</text>
						</view>
						<view class="periodPrice_item_top_value">￥{{item.totalFee}}/度</view>
					</view>
					<view class="periodPrice_item_bottom">
						<text>电费: <text class="blue">{{ tool.getnum(item.electricityFee,3)}}元/度</text> </text>
						<text style="margin-left: 19rpx;">服务费: <text class="blue">{{ tool.getnum(item.serviceFee,3)}}元/度</text> </text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import qiunDataCharts from '../../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			qiunDataCharts
		},
		data() {
			return {
				priceList: [],
				Line: null,
				now:''
			}
		},
		onLoad(e) { 
			if (e.priceList) {
				this.priceList = JSON.parse(e.priceList).map(item=>{
					item.totalFee = this.tool.getnum(item.totalFee,3)
					return item
				});
				this.lineInit()
			}
			if(e.now){
				this.now =e.now; 
			}
		},
		methods: {
			lineInit() {
				let categories = this.priceList.map(item => item.startTime);
				let data = this.priceList.map(item => item.totalFee)
				this.Line = {
					categories,
					series: [{
						name: "金额",
						data
					}]
				}
			},
			scrolltolower() {
				uni.showToast({
					title: '到底了',
					icon: 'none'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';
</style>