<!--
    filename: index.vue
    author: liubin
    date: 2023-10-18 12:25:46
    description:
-->

<template>
	<div class="app-container process-flow-view">
		<ProcessInfo />
		<ProcessDetail style="margin-top: 16px" @det-selected="handleDetSelected" />
		<ProcessBomList style="margin-top: 16px" :current-det="currentDet" />
	</div>
</template>

<script>
import ProcessInfo from './components/ProcessInfo.vue';
import ProcessBomList from './components/ProcessBomList.vue';
import ProcessDetail from './components/ProcessDetail.vue';

export default {
	name: 'ProcessFlowView',
	components: { ProcessInfo, ProcessDetail, ProcessBomList },
	props: {},
	data() {
		return {
			flowId: null,
			currentDet: null
		};
	},
	provide() {
		const that = this;
		return {
			getFlowId() {
				return that.flowId;
			},
		};
	},
	mounted() {
		console.log('activated...', this.$route.params);
		this.flowId = this.$route.params.id;
  },
	computed: {},
	methods: {
		handleDetSelected(det) {
			if (det != null) {
				this.currentDet = { ...det }
			}
			else this.currentDet = null;
		}
	},
};
</script>

<style scoped lang="scss">
.process-flow-view {
	padding: 8px;
	flex: 1;
	background: #f2f4f9;
	display: flex;
	flex-direction: column;
}
</style>