<template>
	<div :class="['widgets-home', customizing?'customizing':'']" ref="main">
		<div class="widgets-content">
			<div class="widgets" ref="widgets">
				<div class="widgets-wrapper">
					<!-- <el-card shadow="hover" class="item-background" style="wdith:100%;padding: 0 20px 0 10px;">
						<div class="time">
							<div>{{ day }}</div>
							<text>当前时间</text>
							<h3>{{ time }}</h3>
						</div>
					</el-card> -->
					<el-row :gutter="6" style="padding: 10px;">
						<el-col>
							<el-card header="成本统计" style="border-radius: 10px;">
								<div class="itemsWrap">
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">月电石渣成本</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">月熟料成</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">月生料成本</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">月水泥成本</div>
									</div>	
								</div>
							</el-card>
						</el-col>
						<el-col>
							<el-card header="能耗" style="border-radius: 10px;">
								<div class="itemsWrap">
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">熟料月综合电耗</div>
										<div class="item-percent">1208/35620(年度比)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">熟料月单位标煤耗</div>
										<div class="item-percent">1208/35620(年度比)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">熟料月综合能耗</div>
										<div class="item-percent">1208/35620(年度比)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">水泥月综合能耗</div>
										<div class="item-percent">1208/35620(年度比)</div>
									</div>	
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">月电石渣分布电耗</div>
										<div class="item-percent">1208/35620(年度比)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">月生料分布电耗</div>
										<div class="item-percent">1208/35620(年度比)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">月熟料分布电耗</div>
										<div class="item-percent">1208/35620(年度比)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">月水泥粉磨分布电耗</div>
										<div class="item-percent">1208/35620(年度比)</div>
									</div>	
								</div>
							</el-card>
						</el-col>
						<el-col>
							<el-card header="产量及完成度" style="border-radius: 10px;">
								<div class="itemsWrap">
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">月电石渣产量</div>
										<div class="item-percent">99%(完成度)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">本年累计电石渣产量</div>
										<div class="item-percent">99%(完成度)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">熟料月单位标煤耗</div>
										<div class="item-percent">100%(完成度)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">本年累计生料产量</div>
										<div class="item-percent">100%(完成度)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">熟料月综合能耗</div>
										<div class="item-percent">100%(完成度)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">本年累计熟料产量</div>
										<div class="item-percent">100%(完成度)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">水泥月综合能耗</div>
										<div class="item-percent">100%(完成度)</div>
									</div>
									<div class="items" style="width: 200px;text-align: center;">
										<div class="item-number">1208</div>
										<div class="item-name">本年累计水泥产量</div>
										<div class="item-percent">100%(完成度)</div>
									</div>	
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import scEcharts from "@/components/scEcharts";
	import draggable from 'vuedraggable'
	import allComps from './components'
	const colors = ['#5470C6', '#91CC75', '#EE6666'];
	export default {
		components: {
			draggable,
			scEcharts
		},
		data() {
			return {
				time: '',
				day: '',
				customizing: false,
				allComps: allComps,
				selectLayout: [],
				defaultGrid: {
					//默认分栏数量和宽度
					layout: [8, 8, 12,8,4,12],
					//小组件分布，com取值:views/home/components 文件名
					copmsList: [
					['echarts'],
					// ['eventlist'],
					['progress'],
					['time'],
					['ver'],

					],
				},
				grid: [],
				myOption : {
					color: colors,
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						top:'10%',
						left:'5%',
						right: '5%',
						bottom:'6%'
					},
					toolbox: {
						feature: {
							saveAsImage: { show: true }
						}
					},
					legend: {
						icon: "stack",
						data: ['年消耗', '月消耗'],
						orient: 'horizontal',
						x: 'center', 
						y: '2',
						
					},
					
					xAxis: [
						{
							axisLabel: {  
								rotate: 45,  
								interval: 0  
							}, 
							type: 'category',
							axisTick: {
								alignWithLabel: true
							},
							// prettier-ignore
							data: ['熟料综合电耗', '熟料单位标煤耗', '熟料综合能耗', '水泥综合能耗', '电石渣分布电耗', '生料分布电耗', '熟料分布电耗', '水泥粉磨分布电耗', '水泥包装分布电耗']
						}
					],
					yAxis: {
						type: 'value',
							name: 'KW.h',
							position: 'left',
							offset:5,
							alignTicks: true,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#aaaaaa'
								}
							},
							axisLabel: {
								formatter: '{value}'
							}
					},
					series: [
						{
							name: '年消耗',
							type: 'bar',
							data: [
								100,150,200,150,120,110,180,200,190
							]
						},
						{
							name: '月消耗',
							type: 'bar',
							data: [
								10,15,20,15,12,11,18,20,19
							]
						}
					]
				}
			}
		},
		created(){
			this.grid = this.$TOOL.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid))
		},
		mounted() {
			this.$emit('on-mounted');
			this.showTime()
			setInterval(()=>{
				this.showTime()
			},1000)
		},
		computed: {
			allCompsList(){
				var allCompsList = []
				for(var key in this.allComps){
					allCompsList.push({
						key: key,
						title: allComps[key].title,
						icon: allComps[key].icon,
						description: allComps[key].description
					})
				}
				var myCopmsList = this.grid.copmsList.reduce(function(a, b){return a.concat(b)})
				for(let comp of allCompsList){
					const _item = myCopmsList.find((item)=>{return item === comp.key})
					if(_item){
						comp.disabled = true
					}
				}
				return allCompsList
			},
			nowCompsList(){
				return this.grid.copmsList.reduce(function(a, b){return a.concat(b)})
			}
		},
		methods: {
			showTime(){
				this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
				this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-background {background: linear-gradient(to right, #8E54E9, #5683ec);color: #fff;}
	.time{display: flex;justify-content: space-between;}
	.time p {font-size: 14px;margin-top: 13px;opacity: 0.8;}
	.numberCard{
		padding: 5px;
		text-align: left;
		color: #979797;
		border-radius: 5px;
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.costCard{
		width: 100%;
		padding: 5px;
		text-align: left;
		color: #979797;
		border-radius: 5px;
	}
	.itemNumber{
		font-size: 30px;
		color: #46d388;
		text-align: center;
		
	}
	.itemNumber.yearNumber{
		color: #7f9eff;
	}
	.itemsWrap{
		display: flex;
		padding: 20px;
	}
	.items{
		border-right: 1px dashed #cccccc;
	}
	.items:last-child{
		border-right: 0;
	}
	.item-number{
		font-weight: 600;
		font-size: 24px;
		color: #1e2126;
		letter-spacing: .1px;
		text-align: center;
		line-height: 36px;
	}
	.item-name{
		font-size: 14px;
		color: #4e5b71;
		letter-spacing: .1px;
		text-align: center;
		line-height: 20px;
	}
	.item-percent{
		font-size: 9px;
		color: #b5c0ce;
		letter-spacing: .08px;
		text-align: center;
		line-height: 12px;
	}
</style>
