<template>
	<el-scrollbar class="scrollbar">
		<div class="consoleView">
			<div class="headerBox">
				<el-row class="colRow" :gutter="20">
					<el-col class="leftCol" :span="10" :md="10" :sm="24" :xs="24">
						<div class="cardBox">
							<div class="cardTitle">快捷功能入口</div>
							<div class="cardBody inletView">
								<el-scrollbar class="boxScrollbar">
									<div class="leftBox">
										<div class="item" v-for="(item,index) in inletList" :key="index">
											<el-image class="img" :src="item.url"></el-image>
											<text class="text">{{item.name}}</text>
										</div>
									</div>
								</el-scrollbar>
								<div class="item add">
									<div class="addBack">
										<i class="icon"><sc-icon-HomeAdd /></i>
									</div>
									<text class="text">添加</text>
								</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>
									<div class="newBell">
										<div class="item" v-for="(item,index) in newList" :key="index">
											<div class="title text">
												<text class="status" v-if="item.status">{{item.status}}</text>
												{{item.title}}
											</div>
											<div class="com text">{{item.text}}</div>
										</div>
									</div>
								</el-scrollbar>
							</div>
						</div>
					</el-col>
					<el-col class="rightCol" :span="4" :md="4" :sm="24" :xs="24">
						<div class="cardBox progressView">
							<div class="cardTitle">不良率</div>
							<div class="cardBody">
								<progressBox />
							</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">
											{{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">占位</div>
							<div class="cardBody">
								<pointBox />
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="footerBox">
				<el-row class="colRow" :gutter="20">
					<el-col class="leftCol" :span="8" :md="8" :sm="24" :xs="24">
						<div class="cardBox chartView">
							<div class="cardTitle">实时数据</div>
							<div class="cardBody">
								<barBox />
							</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">
								<pointBox />
							</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";
export default {
	name: "index",
	components:{
		progressBox,
		barBox,
		ringBox,
		pointBox
	},
	data(){
		return{
			inletList:[
				{name:'日报',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home1.png'},
				{name:'销售订单',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home2.png'},
				{name:'库存列表',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home3.png'},
				{name:'统计',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home4.png'},
				{name:'维修订单',url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/home4.png'},
			],
			briefing:[
				{num:189376,name:'数据采集条数',icon:'sc-icon-Gather'},
				{num:12496,name:'维保待维修',icon:'sc-icon-HomeSetup'},
				{num:756,name:'已维修工单',icon:'sc-icon-Repaired'},
				{num:97662,name:'预警工单',icon:'sc-icon-EarlyWarn'},
				{num:3553,name:'个人中心',icon:'sc-icon-HomeUser'},
				{num:253,name:'个人中心',icon:'sc-icon-HomeChart'},
			],
			newList:[
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审',status:'紧急'},
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审，在今晚九点之前一定操作，配合财务打款。',status:'紧急'},
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审 在今晚九点之前一定操作，配合财务打款。',status:'紧急'},
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
				{title:'委派维修单审核',text:'单号：#SO20240112180910 单号审'},
			],
		}
	},
	mounted() {
		this.$emit('on-mounted')
	},
	methods:{

	}
}
</script>

<style scoped lang="scss">
	.consoleView{
		height: calc(100vh - 105px);
		display: flex;
		flex-direction: column;
		.headerBox{
			flex: 2;
			overflow: hidden;
			padding-bottom: 5px;
		}
		.middleBox{
			flex: 3;
			padding: 5px 0;
		}
		.footerBox{
			flex: 5;
			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>
