<template>
	<view>
		<!-- 温度1 -->
		<view class="historyCurve-leakage">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">线路1温度</text>
			</view>
			<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:line1_pickIndex==index}" @click="switch1Fn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<template v-if="line1_pickIndex == 0">
						<columnScroll canvasId="temperatureColumn1" @onRenderFinsh="onRenderFinshBarLine1" :width="690" :chartData="line1_dataSource" :reshowStatus="line1_barChart" v-show="line1_barChart"></columnScroll>
					</template>
					<template v-else-if="line1_pickIndex == 1">
						<lineScroll canvasId="temperatureLine1" @onRenderComplete="onRenderCompleteLine1" :width="690" :chartData="line1_dataSource" :reshowStatus="line1_polyLineChart" v-show="line1_polyLineChart"></lineScroll>
					</template>
					<template v-else-if="line1_pickIndex == 2">
						<htable :prodDataList="line1_dataSource" @onRenderFinsh="onRenderFinshTableLine1" v-show="line1_tableChart" :reshowStatus="line1_tableChart"></htable>
					</template>
				</view>
			</view>
		</view>
		<!-- 温度2 -->
		<view class="historyCurve-leakage" v-if="render2">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">线路2温度</text>
			</view>
			<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:line2_pickIndex==index}" @click="switch2Fn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<template v-if="line2_pickIndex == 0">
						<columnScroll canvasId="temperatureColumn2" @onRenderFinsh="onRenderFinshBarLine2" :width="690" :chartData="line2_dataSource" :reshowStatus="line2_barChart" v-show="line2_barChart"></columnScroll>
					</template>
					<template v-else-if="line2_pickIndex == 1">
						<lineScroll canvasId="temperatureLine2" @onRenderComplete="onRenderCompleteLine2" :width="690" :chartData="line2_dataSource" :reshowStatus="line2_polyLineChart" v-show="line2_polyLineChart"></lineScroll>
					</template>
					<template v-else-if="line2_pickIndex == 2">
						<htable :prodDataList="line2_dataSource" @onRenderFinsh="onRenderFinshTableLine2" v-show="line2_tableChart" :reshowStatus="line2_tableChart"></htable>
					</template>
				</view>
			</view>
		</view>
		<!-- 温度3 -->
		<view class="historyCurve-leakage" v-if="render3">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">线路3温度</text>
			</view>
			<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:line3_pickIndex==index}" @click="switch3Fn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<template v-if="line3_pickIndex == 0">
						<columnScroll canvasId="temperatureColumn3" @onRenderFinsh="onRenderFinshBarLine3" :width="690" :chartData="line3_dataSource" :reshowStatus="line3_barChart" v-show="line3_barChart"></columnScroll>
					</template>
					<template v-else-if="line3_pickIndex == 1">
						<lineScroll canvasId="temperatureLine3" @onRenderComplete="onRenderCompleteLine3" :width="690" :chartData="line3_dataSource" :reshowStatus="line3_polyLineChart" v-show="line3_polyLineChart"></lineScroll>
					</template>
					<template v-else-if="line3_pickIndex == 2">
						<htable :prodDataList="line3_dataSource" @onRenderFinsh="onRenderFinshTableLine3" v-show="line3_tableChart" :reshowStatus="line3_tableChart"></htable>
					</template>
				</view>
			</view>
		</view>
		<!-- 温度4 -->
		<view class="historyCurve-leakage" v-if="render4">
			<view class="historyCurve-leakage-title">
				<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
				<text class="pl20">线路4温度</text>
			</view>
			<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:line4_pickIndex==index}" @click="switch4Fn(item,index)">{{item}}</view>
				</view>
				<view class="historyCurve-leakage-chart">
					<template v-if="line4_pickIndex == 0">
						<columnScroll canvasId="temperatureColumn4" @onRenderFinsh="onRenderFinshBarLine4" :width="690" :chartData="line4_dataSource" :reshowStatus="line4_barChart" v-show="line4_barChart"></columnScroll>
					</template>
					<template v-else-if="line4_pickIndex == 1">
						<lineScroll canvasId="temperatureLine4" @onRenderComplete="onRenderCompleteLine4" :width="690" :chartData="line4_dataSource" :reshowStatus="line4_polyLineChart" v-show="line4_polyLineChart"></lineScroll>
					</template>
					<template v-else-if="line4_pickIndex == 2">
						<htable :prodDataList="line4_dataSource" @onRenderFinsh="onRenderFinshTableLine4" v-show="line4_tableChart" :reshowStatus="line4_tableChart"></htable>
					</template>
				</view>
			</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"
	
	export default {
		components:{lineScroll,columnScroll,htable},
		props: {
			lineRoad1Data: {
				type: Object,
				default() {
					return {}
				}
			},
			lineRoad2Data: {
				type: Object,
				default() {
					return {}
				}
			},
			lineRoad3Data: {
				type: Object,
				default() {
					return {}
				}
			},
			lineRoad4Data: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				switchList: ["柱状图","折线图","数据视图"],
				line1_pickIndex: 0,
				line1_barChart: false,
				line1_polyLineChart: false,
				line1_tableChart: false,
				line1_dataSource: {},
				
				line2_pickIndex: 0,
				line2_barChart: false,
				line2_polyLineChart: false,
				line2_tableChart: false,
				line2_dataSource: {},
				
				line3_pickIndex: 0,
				line3_barChart: false,
				line3_polyLineChart: false,
				line3_tableChart: false,
				line3_dataSource: {},
				
				line4_pickIndex: 0,
				line4_barChart: false,
				line4_polyLineChart: false,
				line4_tableChart: false,
				line4_dataSource: {},
			
				render2: false,
				render3: false,
				render4: false
			}
		},
		created() {
			console.log(this.lineRoad1Data, 'lineRoad1Data')
			this.line1_dataSource = this.lineRoad1Data;
			this.line2_dataSource = this.lineRoad2Data;
			this.line3_dataSource = this.lineRoad3Data;
			this.line4_dataSource = this.lineRoad4Data;
		},
		watch: {
			lineRoad1Data(newVal) {
				this.line1_dataSource = newVal;
			},
			lineRoad2Data(newVal) {
				this.line2_dataSource = newVal;
			},
			lineRoad3Data(newVal) {
				this.line3_dataSource = newVal;
			},
			lineRoad4Data(newVal) {
				this.line4_dataSource = newVal;
			}
		},
		methods: {
			// 温度1
			switch1Fn(item,index){
				this.line1_pickIndex = index;
				this.line1_barChart = false;
				this.line1_polyLineChart = false;
				this.line1_tableChart = false;
			},
			onRenderFinshBarLine1() {
				this.line1_barChart = true;
				this.render2 = true; //1温度渲染完开始渲染2温度，以此类推
			},
			onRenderCompleteLine1() {
				this.line1_polyLineChart = true;
			},
			onRenderFinshTableLine1() {
				this.line1_tableChart = true;
			},
			// 温度2
			switch2Fn(item,index){
				this.line2_pickIndex = index;
				this.line2_barChart = false;
				this.line2_polyLineChart = false;
				this.line2_tableChart = false;
			},
			onRenderFinshBarLine2() {
				this.line2_barChart = true;
				this.render3 = true;
			},
			onRenderCompleteLine2() {
				this.line2_polyLineChart = true;
			},
			onRenderFinshTableLine2() {
				this.line2_tableChart = true;
			},
			// 温度3
			switch3Fn(item,index){
				this.line3_pickIndex = index;
				this.line3_barChart = false;
				this.line3_polyLineChart = false;
				this.line3_tableChart = false;
			},
			onRenderFinshBarLine3() {
				this.line3_barChart = true;
				this.render4 = true;
			},
			onRenderCompleteLine3() {
				this.line3_polyLineChart = true;
			},
			onRenderFinshTableLine3() {
				this.line3_tableChart = true;
			},
			// // 温度4
			switch4Fn(item,index){
				this.line4_pickIndex = index;
				this.line4_barChart = false;
				this.line4_polyLineChart = false;
				this.line4_tableChart = false;
			},
			onRenderFinshBarLine4() {
				this.line4_barChart = true;
			},
			onRenderCompleteLine4() {
				this.line4_polyLineChart = true;
			},
			onRenderFinshTableLine4() {
				this.line4_tableChart = true;
			}
		}
	}
</script>

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