<template>
	<el-dialog :title="$t('Project details')" width="70%" :visible.sync="visible" @opened="onOpen"
	           :close-on-click-modal="false"
	           :append-to-body="true"
	           :show-close="false"
	           fullscreen
	           custom-class="flex-dialog details-dialog"
	>
		<el-tabs v-model="activeName" class="tabs" @tab-click="onClickTab">
			<el-tab-pane :label="$t('Project')" name="projectEditor">
				<project-editor ref="projectEditor"/>
			</el-tab-pane>
			<el-tab-pane :label="$t('Env constant')" name="envEditor">
				<env-editor ref="envEditor"/>
			</el-tab-pane>
			<el-tab-pane :label="$t('Data mapping')" name="dataMappingEditor">
				<data-mapping-editor ref="dataMappingEditor"/>
			</el-tab-pane>
			<el-tab-pane :label="$t('Custom module')" name="customModuleEditor">
				<custom-module-editor ref="customModuleEditor"/>
			</el-tab-pane>
			<el-tab-pane :label="$t('Package manager')" name="packageManager">
				<package-manager-editor ref="packageManager"/>
			</el-tab-pane>
			<el-tab-pane :label="$t('Projectx config')" name="projectxConfig">
				<projectx-config ref="projectxConfig"/>
			</el-tab-pane>
      <el-tab-pane :label="$t('Auth manager')" name="authManagerEditor">
				<auth-manager-editor ref="authManagerEditor"/>
			</el-tab-pane>
		</el-tabs>
		<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 {mapMutations} from 'vuex';
	import ProjectEditor from "./editors/ProjectEditor";
	import EnvEditor from "./editors/EnvEditor";
	import CustomModuleEditor from "./editors/CustomModuleEditor";
	import DataMappingEditor from "./editors/DataMappingEditor";
	import ProjectxConfig from "./editors/ProjectxConfig";
	import PackageManagerEditor from "./editors/PackageManagerEditor";
	import AuthManagerEditor from "./editors/AuthManagerEditor";

	const refs = [
		'projectEditor',
		'envEditor',
		'dataMappingEditor',
		'customModuleEditor',
		'packageManager',
    'projectxConfig',
    'authManagerEditor'
	];

	export default {
		name: "DetailsDialog",
		components: {
			PackageManagerEditor, DataMappingEditor, CustomModuleEditor, EnvEditor, ProjectEditor,
			ProjectxConfig, AuthManagerEditor
		},
		data() {
			return {
				visible: false,
				activeName: 'projectEditor',
			}
		},
		methods: {
			show() {
				this.visible = true;
			},
			onSave() {
				for (let key in this.activedTabs) {
					this.$refs[key].save();
				}
				this.visible = false;
				this.modifyProjectDetails();
			},
			onClose() {
				this.visible = false;
			},
			onOpen() {
				this.activedTabs = {};

				this.onClickTab(this.activeName);
			},
			onClickTab(tab) {
				let tabName;
				if (typeof tab === 'string') {
					tabName = tab;
				} else {
					tabName = tab.name;
				}
				let tabView = this.$refs[tabName];
				if (!this.activedTabs[tab.name]) {
					tabView.edit && tabView.edit();
					this.activedTabs[tabName] = true;
				}
				tabView.active && tabView.active();
			},
			...mapMutations([
				'modifyProjectDetails',
			]),
		}
	}
</script>

<style scoped>

</style>