<template>
	<div class="wrapper" v-if="process">
		<el-input :readonly="!editable" class="name-input" v-model="process.data.alias" clearable
		          :placeholder="process.meta.name" size="mini">
			<template slot="prepend">{{$t('Name')}}</template>
		</el-input>
		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="scrollbar-view">
			<props-editor ref="propsEditor" :editable="editable" :switchable="true" mode="linkable" :data="process.data.props" :meta="process.meta"/>
		</el-scrollbar>
		<div class="inside-code">
			<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="scrollbar-view">
				<!--<el-input class="code-body" type="textarea" size="mini" readonly v-model="process.meta.script" resize="none"/>-->
				<pre class="code-body">{{process.meta.script}}</pre>
			</el-scrollbar>
		</div>
	</div>
</template>

<script>
	import {mapState} from "vuex";
	import PropsEditor from "../../../components/PropsEditor";

	export default {
		name: "PropertiesInput",
		components: {
			PropsEditor,
		},
		data() {
			return {
				process: null,
			}
		},
		computed: {
			...mapState({
				editable: state => state.behavior.editable,
			}),
		},
		methods: {
			edit(process) {
				this.process = process;
			},
			getInput(property) {
				return inputMapping[property.type];
			},
		}
	}
</script>

<style scoped>

</style>