<template>
	<el-scrollbar v-if="editData" class="project-scrollbar" wrap-class="wrap-x-hidden" view-class="project-editor">
		<el-form @submit.native.prevent ref="form" :model="editData" size="mini" label-position="right"
		         label-width="150px">
			<el-form-item prop="behaviorEditor" :label="$t('Behavior Editor')">
				<el-select v-model="editData.behaviorEditor">
					<el-option v-for="(label, key) in behaviorEditors"
					           :key="key"
					           :value="key"
					           :label="label"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="pageTitle" :label="$t('Page title')">
				<el-input v-model="editData.pageTitle"/>
			</el-form-item>
			<el-form-item prop="entrySceneView" :label="$t('Entry scene view')">
				<el-select v-model="editData.entrySceneView">
					<el-option v-for="(view, index) in project.data.views"
					           :key="index"
					           :value="view.name"
					           :label="view.name"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="loadingView" :label="$t('Loading view')">
				<el-select v-model="editData.loadingView">
					<el-option
					           :value="''"
					           :label="'空'"
					></el-option>
					<el-option v-for="(view, index) in project.data.views"
					           :key="index"
					           :value="view.name"
					           :label="view.name"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="lazyLoadWait" :label="$t('Lazy Load Delay')">
				<el-input-number v-model="editData.lazyLoadWait" placeholder="1000" controls-position="right"/>
			</el-form-item>
			<el-form-item prop="containerId" :label="$t('Container ID')">
				<el-input v-model="editData.containerId"/>
			</el-form-item>
			<el-form-item prop="designWidth" :label="$t('Design width')">
				<el-input-number v-model="editData.designWidth" controls-position="right"/>
			</el-form-item>
			<el-form-item prop="designHeight" :label="$t('Design height')">
				<el-input-number v-model="editData.designHeight" controls-position="right"/>
			</el-form-item>
			<el-form-item prop="frameRate" :label="$t('Frame Rate')">
				<el-input-number v-model="editData.frameRate" :max="60" :min="0" controls-position="right"/>
			</el-form-item>
			<el-form-item prop="scaleMode" :label="$t('Scale Mode')">
				<el-select v-model="editData.scaleMode">
					<el-option v-for="(label, key) in scaleMode"
					           :key="key"
					           :value="key"
					           :label="label"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="rendererType" :label="$t('Renderer Type')">
				<el-select v-model="editData.rendererType">
					<el-option v-for="(label, key) in rendererType"
					           :key="key"
					           :value="key"
					           :label="label"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="tpl" :label="$t('Template')" class="tpl-editor">
				<monaco-editor
					class="editor"
					v-model="editData.tpl"
					language="html"
					:options="monacoEditorOptions"
				/>
			</el-form-item>
		</el-form>
	</el-scrollbar>
</template>

<script>
	import {mapState, mapGetters, mapMutations} from 'vuex';
	import {clonePureObj, monacoEditorOptions} from "../../../../utils";
	import MonacoEditor from "vue-monaco";

	export default {
		name: "ProjectEditor",
		components: { MonacoEditor},
		data() {
			const scaleMode = this.$t('scaleMode');
			const rendererType = this.$t('rendererType');
			const behaviorEditors = this.$t('behaviorEditors');
			return {
				visible: false,
				editData: null,
				scaleMode,
				rendererType,
				monacoEditorOptions,
				behaviorEditors,
			}
		},
		computed: {
			...mapGetters([
				'options',
			]),
			...mapState([
				'project'
			])
		},
		methods: {
			...mapMutations([
				'modifyOptions',
			]),
			edit() {
				this.editData = clonePureObj(this.options);
			},
			save() {
				this.modifyOptions(this.editData);
			},
			/*onReset() {
				this.$refs.form.resetFields();
			},
			onSave() {
				this.modifyProject();
			},*/
		}
	}
</script>

<style scoped>

</style>