<!-- 
    filename: MaterialCost.vue
    author: liubin
    date: 2023-12-06 09:09:27
    description: 
-->

<template>
	<Container name="能耗" size="middle" style="">
		<EnergeTop />
		<SplitLine :horizontal="true" />
		<div class="" style="flex: 2; padding: 8px">
			<div
				class="header-line"
				style="margin: 8px 0 16px; display: flex; align-items: center">
				<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
					能耗趋势图
				</h2>
				<!-- <Switcher /> -->
				<div>
					<!-- <span class="lgd lgd-total">总量</span> -->
					<!-- <span class="lgd lgd-day">白班</span>
						<span class="lgd lgd-night">夜班</span> -->
				</div>
			</div>
			<div
				class="select-line"
				style="
					display: flex;
					align-items: center;
					justify-content: space-between;
				">
				<SelectorBtnGroup
					:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
				<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
			</div>
			<div class="chart" style="height: 200px; margin-top: 8px;">
				<GasChart :chartType='chartType' :chartTime='chartTime'/>
			</div>
		</div>
	</Container>
</template>

<script>
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
import SplitLine from '../components/line';
// import Switcher from '../components/Switcher';
import EnergeTop from './EnergeTop';
import GasChart from '../components/GasChart.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
export default {
	name: 'EnergeCost',
	components: {
		Container,
		ShadowRect,
		SplitLine,
		EnergeTop,
		GasChart,
		SelectorBtnGroup,
	},
	props: {},
	data() {
		return {
			chartType:'电耗能',
			chartTime:'周'
		};
	},
	computed: {
		gasInfoMsg() {
			return this.$store.state.websocket.gasInfo
		},
	},
	methods: {
		// 切换能源
		toggleType(val) {
			console.log('能源' + val)
			this.chartType = val
			// if (val === '天然气I' || val === '天然气II') {
			// 	if (this.chartTime === '周') {
			// 		this.chartType = val
			// 	} else {
			// 		this.$message.warning('暂无数据')
			// 	}
			// }else {
			// 	this.chartType = val
			// }
		},
		// 切换时间
		toggleDate(val) {
			console.log('时间' + val)
			this.chartTime = val
			// if (val === '月' || val === '年') {
			// 	if (this.chartType === '电耗能') {
			// 		this.chartTime = val
			// 	} else {
			// 		this.$message.warning('暂无数据')
			// 	}
			// }else{
			// 	this.chartTime = val
			// }
		}
	},
};
</script>

<style scoped lang="scss">
.lgd {
	color: #fff;

	&:not(:last-child) {
		margin-right: 12px;
	}
}

.lgd::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-radius: 2px;
}

.lgd.lgd-total::before {
	background-color: #ff9e00;
}

.lgd.lgd-day::before {
	background-color: #08d8cd;
}

.lgd.lgd-night::before {
	background-color: #0b58ff;
}
</style>
