<template>
	<el-scrollbar class="scrollbar">
		<div class="consoleView">
			<div class="headerBox">
				<el-row class="colRow" :gutter="20">
					<el-col class="leftCol" :span="16" :md="16" :sm="24" :xs="24">
						<div class="cardBox">
							<div class="cardTitle">工单数量</div>
							<div class="cardBody workOrderView">
								<div class="item" v-for="(item,index) in workOrder" :key="index">
									<div class="cardContent">
										<div class="num" v-number="item.value" :style="{color:item.title_color!=''?item.title_color:''} ">{{item.value}}</div>
										<div class="name">{{item.title}}</div>
									</div>
								</div>
							</div>
						</div>
					</el-col>
<!--					<el-col class="middleCol" :span="10" :md="10" :sm="24" :xs="24">-->
<!--						<div class="cardBox">-->
<!--							<div class="cardTitle">占位</div>-->
<!--							<div class="cardBody">-->
<!--								<el-scrollbar>-->
<!--								</el-scrollbar>-->
<!--							</div>-->
<!--						</div>-->
<!--					</el-col>-->
					<el-col class="rightCol" :span="8" :md="8" :sm="24" :xs="24">
						<div class="cardBox progressView">
							<div class="cardTitle">备件库存</div>
							<div class="cardBody spareParts">
								<div class="item" v-for="(item,index) in spareParts" :key="index">
									<el-icon class="icon"><component :is="item.icon" /></el-icon>
									<div class="num" v-number="item.value">{{item.value}}</div>
									<div class="name">{{item.title}}</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="middleBox">
				<el-row class="colRow" :gutter="20">
					<el-col class="leftCol" :span="16" :md="16" :sm="24" :xs="24">
						<div class="cardBox">
							<div class="cardTitle">数据简报</div>
							<div class="cardBody briefing">
								<div class="item" v-for="(item,index) in briefing" :key="index">
									<div class="comMain">
										<div class="num" v-number="item.num">
											{{item.num}}
											<text class="unit">条</text>
										</div>
										<div class="name">{{item.name}}</div>
									</div>
									<div class="comChart">
										<el-icon class="icon"><component :is="item.icon" /></el-icon>
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col class="rightCol" :span="8" :md="8" :sm="24" :xs="24">
						<div class="cardBox chartView">
							<div class="cardTitle cardTitleFlex">
								<span class="name">工单数量</span>
								<div class="titleBtnView">
									<div class="btnItem" :class="reachShow?'trueItem':''" @click="reachShow=true">国内</div>
									<div class="btnItem" :class="!reachShow?'trueItem':''" @click="reachShow=false">海外</div>
								</div>
							</div>
							<div class="cardBody orderNum">
								<template v-for="(item,index) in reachStandard" :key="index">
									<div class="item" v-if="reachShow?index<2:index>=2">
										<progressBox :proObj="item" />
									</div>
								</template>
<!--								<pointBox />-->
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="footerBox">
				<el-row class="colRow" :gutter="20">
					<el-col class="leftCol" :span="16" :md="16" :sm="24" :xs="24">
						<div class="cardBox chartView">
							<div class="cardTitle cardTitleFlex">
								<span class="name">成本汇总</span>
								<div class="titleBtnView">
									<div class="btnItem" v-for="(item,index) in dataTypeList" :key="index" :class="item.date_type==dataType?'trueItem':''" @click="dateTypeClick(item)">{{item.label}}</div>
								</div>
							</div>
							<div class="cardBody">
								<barBox :dataType="dataType" />
							</div>
						</div>
					</el-col>
<!--					<el-col class="middleCol" :span="8" :md="8" :sm="24" :xs="24">-->
<!--						<div class="cardBox chartView">-->
<!--							<div class="cardTitle">占位</div>-->
<!--							<div class="cardBody">-->
<!--								<ringBox />-->
<!--							</div>-->
<!--						</div>-->
<!--					</el-col>-->
					<el-col class="rightCol" :span="8" :md="8" :sm="24" :xs="24">
						<div class="cardBox chartView">
							<div class="cardTitle">快捷功能入口</div>
							<div class="cardBody">
								<shortcuts />
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</el-scrollbar>
</template>

<script>
import progressBox from "./components/progress";
import barBox from "./components/bar";
import ringBox from "./components/ring";
import pointBox from "./components/point";
import shortcuts from "./components/shortcuts";
import {eventBus} from "@/utils/eventBus";
export default {
	name: "index",
	components:{
		progressBox,
		barBox,
		ringBox,
		pointBox,
		shortcuts
	},
	data(){
		return{
			workOrder:[
				{title:"总工单数",value:0,icon:''},
				{title:"已维修数",value:0,icon:''},
				{title:"待维修数",value:0,icon:''},
				{title:"超期工单数",value:0,icon:''},
				{title:"0BD 数",value:0,icon:''},
				{title:"1BD 数",value:0,icon:''},
				{title:"当前预约数",value:0,icon:''},
			],
			spareParts:[
				{title:"维保库存数",value:0,icon:'sc-icon-HomeInventory'},
				{title:"预警库存MPN数",value:0,icon:'sc-icon-EarlyWarnBj'},
			],
			reachStandard:[
				{title:"国内SLA 月达标率",value:0},
				{title:"周达标率",value:0},
				{title:"海外SLA 月达标率",value:0},
				{title:"周达标率",value:0},
			],
			reachShow:true,
			briefing:[
				{num:0,name:'待提交数',icon:'sc-icon-Gather'},
				{num:0,name:'计划维修数',icon:'sc-icon-HomeSetup'},
				{num:0,name:'正在维修数',icon:'sc-icon-Repaired'},
				{num:0,name:'待审核数',icon:'sc-icon-EarlyWarn'},
				{num:0,name:'占位',icon:'sc-icon-HomeUser'},
				{num:0,name:'占位',icon:'sc-icon-HomeChart'},
			],
			dataTypeList:[
				{date_type:'hour',label:'按时'},
				{date_type:'day',label:'按天'},
				{date_type:'month',label:'按月'},
				{date_type:'year',label:'按年'},
			],
			dataType:"month",

			home_msg:this.$store.state.msg.home_msg
		}
	},
	computed:{

	},
	watch:{
		home_msg:{
			handler(obj){
				for(let i in obj){
					if(obj[i] && obj[i].data){
						this.getWsResult(obj[i])
					}
				}
			},
			deep:true,
			immediate:true
		}
	},
	mounted() {
		this.$emit('on-mounted');

		// 获取新消息
		eventBus.$on('sockBack', this.getWsResult);
	},
	unmounted() {
		eventBus.$off('sockBack', this.getWsResult);
	},
	methods:{
		getWsResult(res){
			if(res.data && (res.data.type == 21 || res.data.type == 24 || res.data.type == 25 || res.data.type == 26)){
				if(res.data.type == 21){
					this.briefing.forEach(item=>{
						res.data.list_count_info && res.data.list_count_info.main_order_count.forEach(em=>{
							if(item.name == em.title){
								item.num = em.value
							}
						})
					})
				}
				if(res.data.type == 24 && res.data.function == 'order_count'){
					this.workOrder = res.data.count;
				}
				if(res.data.type == 25){
					this.spareParts.forEach(item=>{
						res.data.count.forEach(em=>{
							if(item.title == em.title){
								item.value = em.value;
							}
						})
					})
				}
				if(res.data.type == 26 && res.data.function == 'repair_count'){
					this.reachStandard = res.data.count
				}
			}
		},
		dateTypeClick(item){
			this.dataType = item.date_type
		},
	}
}
</script>

<style scoped lang="scss">
	.consoleView{
		height: calc(100vh - 105px);
		display: flex;
		flex-direction: column;
		.headerBox{
			flex: 3;
			overflow: hidden;
			padding-bottom: 5px;
		}
		.middleBox{
			flex: 4;
			padding: 5px 0;
		}
		.footerBox{
			flex: 5;
			overflow: hidden;
			padding-top: 5px;
		}
		.colRow{
			.leftCol{padding-right: 5px !important;}
			.middleCol{padding: 0 5px !important;}
			.rightCol{padding-left: 5px !important;}
		}
	}
	.colRow{
		height: 100%;
		padding: 0 !important;
		margin: 0 !important;
		.el-col{
			box-sizing: border-box;
			height: 100%;
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
	}

	@media (max-width: 992px){
		.consoleView{
			display: block;
			height: 100%;
			.headerBox{padding: 0;}
			.middleBox{padding: 0;}
			.footerBox{padding: 0;}
			.colRow{
				.leftCol{padding: 5px 0 !important;}
				.middleCol{padding: 5px 0 !important;}
				.rightCol{padding: 5px 0 !important;}
			}
		}
	}
</style>
