<!-- 最新版生产执行页面 -->
<template>
	<el-container style="position: relative;">
		<el-header>
			<el-segmented
				v-model="values"
				:options="options"
				size="default"
			></el-segmented>
		</el-header>
		<el-main id="elMain" class="nopadding">
			<!-- 日志 -->
			<mlogs
				v-if="values == '日志'&&componentsShow"
				:mgroupName="mgroupName"
				:mgroupId="mgroupId"
				:deptId="mgroupDept"
				:process = "mgroupProcess"
				:processType = "mgroupProcessType"
				:mgroup_code="mgroup_code"
				:mgroupMtype = "mgroupMtype"
				id="mlogs"
				style="height: 100%"
			></mlogs>
			<!-- 隐藏任务 -->
			<div v-if="values == '日志'&&componentsShow&&mtaskVisible"  class="iconWrap" @click="hiddenMtask">
				<span class="iconSpan">
					<el-icon>
						<el-icon-arrow-down />
					</el-icon>
				</span>
			</div>
			<!-- 显示任务 -->
			<div v-if="values == '日志'&&componentsShow&&!mtaskVisible" class="iconWrap iconWrapBottom" @click="showMtask">
				<span class="iconSpan iconSpanBottom">
					<el-icon>
						<el-icon-arrow-up />
					</el-icon>
				</span>
			</div>
			<mtask
				v-if="values == '日志'&&componentsShow"
				:mgroupName="mgroupName"
				:mgroupId="mgroupId"
				:deptId="mgroupDept"
				:process = "mgroupProcess"
				:processType = "mgroupProcessType"
				:mgroup_code="mgroup_code"
				:mgroupMtype = "mgroupMtype"
				id="mtask"
				style="height: 40%;display: none;"
			></mtask>
			<!-- 交接记录 -->
			<handover
				v-else-if="values == '交接记录'&&componentsShow"
				:mgroupName="mgroupName"
				:mgroupId="mgroupId"
				:deptId="mgroupDept"
				:process = "mgroupProcess"
				:processType = "mgroupProcessType"
				:mgroup_code="mgroup_code"
				:mgroupMtype = "mgroupMtype"
			></handover>
			<!-- 未完成 -->
			<inmIn v-else-if="values == '未完成'&&componentsShow" 
				:mgroupName="mgroupName"
				:mgroupId="mgroupId"
				:deptId="mgroupDept"
				:process = "mgroupProcess"
				:processType = "mgroupProcessType"
				:mgroup_code="mgroup_code"
				:mgroupMtype = "mgroupMtype"
			></inmIn>
			<!-- 已完成 -->
			<inmOut v-else-if="values == '已完成'&&componentsShow" 
				:mgroupName="mgroupName"
				:mgroupId="mgroupId"
				:deptId="mgroupDept"
				:process = "mgroupProcess"
				:processType = "mgroupProcessType"
				:mgroup_code="mgroup_code"
				:mgroupMtype = "mgroupMtype"
			></inmOut>
		</el-main>
	</el-container>
</template>
<script>
import inm from "./inm.vue";
import inmIn from "./inmIn.vue";
import inmOut from "./inmOut.vue";
import mlogs from "./mlogs.vue";
import mtask from "./mtask.vue";
import handover from "./handover.vue";
export default {
	name: "bx",
	components: { inm,inmIn, mlogs, mtask, handover,inmOut },
	data() {
		return {
			mgroups:[],
			tableHieght: 200,
			selectedIndex:0,
			options: ["日志", "交接记录","未完成", "已完成"],
			values: "日志",
			mgroupName: "",
			mgroupId: "",
			mgroup_code:'',
			mgroupDept:'',
			mgroupMtype:'',
			mgroupProcess: '',
			mgroupProcessType: '',
			componentsShow:false,
			mtaskVisible:false
		};
	},
	mounted() {
		let that = this;
		let height = document.getElementById("elMain").clintHeight / 2;
		that.tableHieght = height;	
		let paths = this.$route.path;
		let arr = paths.split("/");
		this.mgroup_code = arr[2];
		console.log('this.mgroup_code',this.mgroup_code);
		that.getMgroups(this.mgroup_code);
	},
	methods: {
		handleChange(value) {
			this.value = value;
			console.log("Selected value:", value);
		},
		getMgroups(code){
			let that = this;
			that.$API.mtm.mgroup.list.req({page:0,code}).then((res) => {
				that.mgroups = res;
				that.mgroupName = res[0].name;
				that.mgroupId = res[0].id;
				that.mgroupProcessType = res[0].process_type;
				that.mgroupProcess = res[0].process;
				that.mgroupDept = res[0].belong_dept;
				that.mgroupMtype = res[0].mtype;
				that.componentsShow = true;
			});
		},
		showMtask(){
			let mtask = document.getElementById("mtask");
			let mlogs = document.getElementById("mlogs");
			mtask.style.height = '40%';
			mlogs.style.height = '60%';
			mtask.style.display = 'block';
			this.mtaskVisible = true;
		},
		hiddenMtask(){
			let mtask = document.getElementById("mtask");
			let mlogs = document.getElementById("mlogs");
			mtask.style.display = 'none';
			mlogs.style.height = '100%';
			this.mtaskVisible = false;
		},
	},
};
</script>
<style scoped>
.iconWrap {
    position: absolute;
	width: 30px;
	height: 30px;
	border-radius: 16px;
	border: 1px solid #ccc;
	top: 58%;
	left: 50%;
}
.iconSpan{
	display: inline-block;
	width: 28px;
	text-align: center;
	line-height: 32px;
	font-size: 20px;
}
.iconWrap.iconWrapBottom{
	top: 95%;
}
</style>
