<template>
	<view class="page_padding columnFlex">
		<view class="statistics" v-if="form.date == 'day'">
			<view class="title font14">排程日统计</view>
			<view class="boxView contentboxsty">
				<view class="item">
					<view class="name font13">待生产</view>
					<view class="font_bold">32</view>
				</view>
				<view class="item">
					<view class="name font13">生产中</view>
					<view class="font_bold">12</view>
				</view>
				<view class="item">
					<view class="name font13">生产完成</view>
					<view class="font_bold">102</view>
				</view>
			</view>
		</view>
		<view class="comView font13" :class="form.date == 'day'?'padd12 contentboxsty':''">
			<view class="dateView">
				<view class="dateTitle">
					<view class="title font14">排程视图 <text class="month">{{dateText}}</text></view>
					<view class="dateSwitch">
						<div class="item" :class="form.date == item.value?'dateActive':''" @click="form.date = item.value" v-for="(item,index) in dateList" :key="index">{{item.name}}</div>
					</view>
				</view>
				<view :class="form.date !='day'?'contentboxsty mar_top12 mar_bot12 padd12':'calendarView'">
					<calendar></calendar>
				</view>
			</view>
			<view class="speedView contentboxsty" :class="form.date!='day'?'padd12':''">
				<view class="left">
					<view class="line"></view>
				</view>
				<view class="right detail_list">
					<view class="boxItem padd12" v-for="(item,index) in list" :key="index">
						<view class="time">{{item.time}}</view>
						<view class="boxView card_right" :class="item.type==1?'success':item.type==2?'warning':item.type==3?'status':item.type==4?'error':''">
							<view class="cardStatus" :class="item.type==1?'success':item.type==2?'warning':item.type==3?'status':item.type==4?'error':''">{{item.status}}</view>
							<view class="row font_bold">
								<view class="name">工单号：</view>
								<view class="text">{{item.sn}}</view>
							</view>
							<view class="row">
								<view class="name">规格：</view>
								<view class="text">4*9*63</view>
							</view>
							<view class="row rowDate">
								<view class="date">
									<text class="name">开始时间：</text>
									<text class="text color">00:00</text>
								</view>
								<view class="date">
									<text class="name">剩余时间：</text>
									<text class="text">00:30</text>
								</view>
							</view>
						</view>
						<view class="yieldView">
							<view class="box">
								<view class="num font18 font_bold">74.3<text class="symbol font12">%</text></view>
								<view class="name">出材率</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		  components: {
			
		  },
			data() {
				return {
					list:[
						{name:'',sn:"SO20240426000001",num:20,status:'待生产',type:1,time:'00:00'},
						{name:'',sn:"SO20240426000001",num:70,status:'生产中',type:2,time:'00:30'},
						{name:'',sn:"SO20240426000001",num:90,status:'生产完成',type:3},
						{name:'',sn:"SO20240422000002",num:20,status:'生产暂停',type:4,time:'01:00'},
						{name:'',sn:"SO20240426000001",num:70,status:'待生产',type:1},
						{name:'',sn:"SO20240426000001",num:90,status:'待生产',type:1,time:'03:00'},
						{name:'',sn:"SO20240426000001",num:90,status:'待生产',type:1},
					],
					dateList:[
						{name:'日',id:'',value:'day'},
						{name:'周',id:'',value:'week'},
						{name:'月',id:'',value:'month'},
					],
					dateText:'',
					form:{
						date:'day'
					}
				}
			},
			provide(){
				return{
					params:this.form,
					changeDateText:this.changeDate
				}
			},
			methods: {
				changeDate(val){
					this.dateText = val;
				}
			}
		}
</script>

<style scoped lang="scss">
	.statistics{
		.boxView{
			display: flex;flex-direction: row;align-items: center;margin-top: 12px;
			.item{
				flex: 1;display: flex;align-items: center;justify-content:center;flex-direction: column;padding: 12px 0;
				.name{padding-bottom: 10px;}
			}
		}
	}
	.comView{margin-top: 12px;}
	.dateView{width: 100%;}
	.dateTitle{
		width: 100%;display: flex;align-items: center;justify-content: space-between;
		.dateSwitch{
			display: flex;align-items: center;background: $uni-bg-color-whith;border-radius: 20px;padding: 2px 3px;
			.item{
				padding: 5px 18px;
				color: $uni-text-color-default;
			}
			.dateActive{
				border-radius: 20px;
				background: $uni-color-primary;
				color: $uni-text-color-inverse;
			}
		}
	}
	.calendarView{
		margin: 20px 0;
	}
	.speedView{
		width: 100%;display: flex;box-sizing: border-box;
		.left{
			flex-basis: 45px;
			display: flex;align-items: flex-start;flex-direction: column;padding: 12px 0 12px 18px;box-sizing: border-box;
			.line{
				position: relative;width: 1px;height: 100%;background: $uni-text-color-info;
			}
			.line::after{
				content: '';
				position: absolute;
				z-index: 20;
				bottom: 0;
				left: -4px;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: $uni-text-color-info;
			}
		}
		.right{
			flex: 1;margin: 0;
			.boxItem:first-child{
				margin-top: 6px;
			}
			.boxItem:last-child{
				margin-bottom: 6px;
			}
			.boxItem{
				background: $uni-bg-color-schedule;
				margin: 12px 0;
				padding-left: 20px;
				border-radius: 8px;
				position: relative;
				z-index: 10;
				.boxView{
					display: block;
				}
			}
			.time{
				position: absolute;
				left: -45px;
				top: 0;
				background: $uni-bg-color-primary;
				padding: 4px 2px;
			}
			.yieldView{
				position: absolute;
				right: 12px;
				top: 12px;
				z-index: 20;
				height: calc(100% - 30px);
				display: flex;
				align-items: center;
				justify-content: center;
				.box{
					display: flex;flex-direction: column;align-items: center;
					.num{color: $uni-text-color-warning;}
					.name{color: $uni-text-color-warning;}
				}
			}
			.cardStatus{
				display: inline-block;
			}
			.row{
				display: flex;align-items: center;
				margin-top: 12px;
				.date{
					display: flex;align-items: center;
				}
			}
			.rowDate{
				justify-content: space-between;
				.color{
					color: $uni-text-color-primary;
				}
			}
			.status::after{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 12px;
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
				background: $uni-bg-color-success;
			}
			.success::after{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 12px;
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
				background: $uni-bg-color-success;
			}
			.warning::after{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 12px;
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
				background: $uni-bg-color-warning;
			}
			.error::after{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 12px;
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
				background: $uni-bg-color-error;
			}
		}
	}
</style>