<!-- 
    filename: ProcessInfo.vue
    author: liubin
    date: 2023-10-20 15:00:58
    description: 
-->

<template>
	<section class="process-info">
		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />

		<el-row :gutter="20">
			<el-col :span="6">
				<InfoItem label="工艺名称" value="测试工艺" />
			</el-col>
			<el-col :span="6">
				<InfoItem label="产线" value="A4" />
			</el-col>
			<el-col :span="12">
				<InfoItem
					label="工艺描述"
					value="咯热门asdfkj alsdfk ;lkj flskdjf sadf" />
			</el-col>
		</el-row>

		<el-row :gutter="20" style="margin-top: 12px;">
			<el-col :span="6">
				<InfoItem label="创建人" value="xxse" />
			</el-col>
			<el-col :span="6">
				<InfoItem label="创建时间" value="2023-10-22 10:11:00" />
			</el-col>
			<el-col :span="6">
				<InfoItem label="更新人" value="xxse" />
			</el-col>
			<el-col :span="6">
				<InfoItem label="更新时间" value="2023-10-22 10:11:00" />
			</el-col>
		</el-row>
	</section>
</template>

<script>
import basicPageMixin from '@/mixins/lb/basicPageMixin';

const InfoItem = {
	name: 'InfoItem',
	components: {},
	props: ['label', 'value'],
	data() {
		return {};
	},
	computed: {},
	methods: {},
	render: function (h) {
		return (
			<div style="display: flex; align-items: center; font-size: 14px; line-height: 1.5">
				<span style="width: 100px; text-align: left; font-weight: 700">{this.label}:</span>
				<span style="width: 200px; text-align: left; text-overflow: ellipse; white-space: nowrap">
					{this.value}
				</span>
			</div>
		);
	},
};

export default {
	name: 'ProcessInfo',
	components: { InfoItem },
	mixins: [basicPageMixin],
	props: {},
	data() {
		return {
			infoUrl: '/extend/process-flow/get',
			searchBarFormConfig: [{ label: '工艺详情' }],
		};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss">
.process-info {
	padding: 12px 20px 20px;
	background: #fff;
	border-radius: 8px;
}
</style>
