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

<template>
	<Container name="能耗" size="middle" style="">
		<TimePrompt class="timeShow" :timestr="timestr" />
		<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' @emitFun='dateUpdate'/>
			</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';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
export default {
	name: 'EnergeCost',
	components: {
		Container,
		ShadowRect,
		SplitLine,
		EnergeTop,
		GasChart,
		SelectorBtnGroup,
		TimePrompt
	},
	props: {},
	data() {
		return {
			chartType:'电耗能',
			chartTime:'周',
			timestr: ''
		};
	},
	mounted() {
    this.timestr = switchShowTime(this.chartTime)
  },
	computed: {
		gasInfoMsg() {
			return this.$store.state.websocket.gasInfo
		},
	},
	methods: {
		// 切换能源
		toggleType(val) {
			this.chartType = val
		},
		// 切换时间
		toggleDate(val) {
			this.chartTime = val
			this.timestr = switchShowTime(val)
		},
		// 数据更新
    dateUpdate() {
      this.timestr = switchShowTime(this.chartTime)
    }
	},
};
</script>

<style scoped lang="scss">
.timeShow {
  position: absolute;
  top: 20px;
  left: 120px;
}
.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>
