<template>
	<el-dialog :title="$t('Props Editor')" width="70%" :visible.sync="visible" @opened="onOpen"
	           :close-on-click-modal="false"
	           :append-to-body="true"
	           :show-close="false"
	           custom-class="props-editor-dialog"
	>

		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden"
		              view-class="scrollbar-view">
			<props-editor v-if="data" ref="propsEditor" :data="data.props" :meta="meta" label-width="180px"/>
		</el-scrollbar>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<div>
				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
				<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import PropsEditor from "../../../../../components/PropsEditor";

	export default {
		name: "PropsEditorDialog",
		components: {PropsEditor},
		data() {
			return {
				visible: false,
				data: null,
				meta: null,
			}
		},
		methods: {
			show(data, meta) {
				this.data = data;
				this.meta = meta;
				this.visible = true;
			},
			onSave() {
				this.visible = false;

			},
			onClose() {
				this.visible = false;
			},
			onOpen() {

			},
		}
	}
</script>

<style scoped>

</style>