<!--
    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="24">
      <el-col :span="6">
        <InfoItem label="工单名称" :value="form.name" />
      </el-col>
      <el-col :span="6">
        <InfoItem label="工艺名称" :value="form.processFlowName" />
      </el-col>
      <el-col :span="6">
        <InfoItem label="产品名称" :value="form.productName" />
      </el-col>
      <el-col :span="6">
        <InfoItem label="产品规格" :value="form.specifications" />
      </el-col>
    </el-row>
  </section>
</template>

<script>
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 },
	props: {},
	inject: ['getFlowId'],
	data() {
		return {
			infoUrl: '/extend/process-flow/get',
			searchBarFormConfig: [{ label: '工艺详情' }],
			form: {
				id: null,
				name: null,
        productName: null,
        specifications:null,
        processFlowName: null,
				// remark: null,
				// enable: null,
				// code: null
			},
		};
	},
	mounted() {
    this.getInfo()
	},
	activated() {
		this.getInfo()
	},
	computed: {},
	methods: {
		// utils
		// http(url, method, payload) {
		// 	return this.$axios({
		// 		url,
		// 		method,
		// 		params: method === 'get' ? payload : null,
		// 		data: method !== 'get' ? payload : null,
		// 	})
		// },
		// put(payload) {
		// 	return this.http(this.updateUrl, 'put', payload);
		// },
		// post(payload) {
		// 	return this.http(this.addUrl, 'post', payload);
		// },
		// recv(payload) {
		// 	return this.http(this.pageUrl, 'get', payload);
		// },
		// info(payload) {
		// 	return this.http(this.infoUrl, 'get', payload);
		// },
    getInfo() {
      // console.log(this.$route.query.planProductId);
      this.form.name = this.$route.query.name
      this.form.specifications = this.$route.query.specifications
      this.form.productName = this.$route.query.productName
      this.form.processFlowName = this.$route.query.processFlowName
      // this.form.name = this.$route.query.name
      // const flowId = this.$route.query.id;
      // console.log(flowId);
			// if (!flowId) this.$router.go(-1);
			// const { code, data } = await this.info({ id: flowId });
			// // debugger;
			// if (code == 0) {
			// 	this.form = {
			// 		...data
			// 	};
			// } else {
			// 	this.$modal.msgError('工艺信息获取失败')
			// }
		}
	},
};
</script>

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