<template>
	<view class="historyCurve-leakage">
		<view class="historyCurve-leakage-content">
			<view class="historyCurve-leakage-switch">
				<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
				:class="{leakageAction:pickIndex==index}" @click="switchFn(item,index)">{{item}}</view>
			</view>
			<view class="historyCurve-leakage-chart">
				<template v-if="pickIndex == 0">
					<columnScroll canvasId="leakageColumn" @onRenderFinsh="onRenderFinshBar" :width="690" :chartData="dataSource" :reshowStatus="barChart" v-show="barChart"></columnScroll>
				</template>
				<template v-else-if="pickIndex == 1">
					<lineScroll canvasId="leakageLine" @onRenderComplete="onRenderComplete" :width="690" :chartData="dataSource" :reshowStatus="polyLineChart" v-show="polyLineChart"></lineScroll>
				</template>
				<template v-else-if="pickIndex == 2">
					<htable :prodDataList="dataSource" @onRenderFinsh="onRenderFinshTable" v-show="tableChart" :reshowStatus="tableChart"></htable>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import lineScroll from "@/components/uchartComponents/line-scroll.vue";
	import columnScroll from "@/components/uchartComponents/column-scroll.vue";
	import htable from "@/components/historyCmp/table.vue"
	
	import mixins from '../common/mixins.js'
	export default {
		mixins:[mixins],
		components:{lineScroll,columnScroll,htable}
	}
</script>

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