<!-- 左侧工段列表的 生产执行页面 -->
<template>
	<el-container>	
		<el-aside style="width: 100px;background: #ffffff;">
			<ul style="padding-left: 7px;">
				<li 
					v-for="(item,index) in mgroups" 
					:key="item.id" 
					:class="['mgroupItem',selectedIndex === index?'mgroupItemActive':'']"
					@click="changeMgroup(item.id,index)"
				>{{item.name}}</li>
			</ul>
		</el-aside>
		<el-main>
			<el-container>
				<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 == '日志'"
						:mgroupName="mgroupName"
						style="height: 60%"
					></mlogs>
					<mtask
						v-if="values == '日志'"
						:mgroupName="mgroupName"
						style="height: 40%"
					></mtask>
					<!-- 交接记录 -->
					<handover
						v-else-if="values == '交接记录'"
						:mgroupName="mgroupName"
					></handover>
					<!-- 库存 -->
					<inm v-else-if="values == '库存'" :mgroupName="mgroupName"></inm>
					
				</el-main>
			</el-container>
		</el-main>
	</el-container>
</template>
<script>
import inm from "./inm.vue";
import mlogs from "./mlogs.vue";
import mtask from "./mtask.vue";
import handover from "./handover.vue";
export default {
	name: "bx",
	components: { inm, mlogs, mtask, handover },
	data() {
		return {
			mgroups:[],
			tableHieght: 200,
			options: ["日志", "交接记录", "库存"],
			values: "日志",
			mgroupName: "",
			mgroupId: "",
			selectedIndex:0,
		};
	},
	created() {
		let that = this;
	    that.getMgroups();
	},
	mounted() {
		let that = this;
		let height = document.getElementById("elMain").clintHeight / 2;
		that.tableHieght = height;
		
	},
	methods: {
		handleChange(value) {
			this.value = value;
			console.log("Selected value:", value);
		},
		getMgroups(){
			let that = this;
			that.$API.mtm.mgroup.list.req({page:0}).then((res) => {
				that.mgroups = res;
				that.mgroupName = res[0].name;
			});
		},
		changeMgroup(id,index){
			let that = this;
			that.selectedIndex = index;
			console.log(that.selectedIndex);
			that.mgroupId = id;
			that.mgroupName = that.mgroups[index].name;
		},
	},
};
</script>
<style scoped>
.countBlock {
	width: 80px;
	color: #ffffff;
	text-align: center;
}
.mgroupItem{
	height: 35px;
	width: 80px;
	line-height: 35px;
	margin: 5px 0;
	text-align: center;
	color: #6e80ff;
}
.mgroupItem:hover,.mgroupItemActive{
	color: #6e80ff;
	background: rgba(83, 109, 254, 0.2);
}
</style>
