<template>
	<el-dialog :title="$t('Create project')" width="70%" :visible.sync="visible" @open="onOpen"
	           :append-to-body="true">
		<el-form ref="form" :model="project" :rules="rules" size="mini" label-position="right" label-width="110px" @submit.native.prevent>
			<el-form-item :label="$t('Project name')" prop="name">
				<el-input v-model="project.name" :maxlength="64"></el-input>
			</el-form-item>
			<!--<el-form-item :label="$t('Template')">
				<el-select v-model="template" placeholder="Select a template" no-data-text="No templates">
					<el-option-group
						v-for="(group, groupName) in env.templates" v-if="Object.keys(group).length > 0"
						:key="groupName"
						:label="groupName">
						<el-option
							v-for="item in group"
							:key="item"
							:label="item"
							:value="item">
						</el-option>
					</el-option-group>
				</el-select>
			</el-form-item>-->
		</el-form>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<div>
				<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
				<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {mapState, mapActions} from 'vuex'
	import {playWaiting} from "../../utils";

	export default {
		name: "CreateProjectDialog",
		data() {
			return {
				visible: false,
				project: {
					name: ''
				},
				template: 'blank',
				rules: {
					name: [
						{required: true, message: this.$t('Project name cannot be empty'), trigger: 'blur'},
					]
				}
			}
		},
		computed: {
			...mapState([
				'env',
			]),
		},
		watch: {},
		methods: {
			async show() {
				this.visible = true;
			},
			doCreateProject() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						try {
							const project = await playWaiting(this.createProject(this.project), this.$t('Creating project'));

							this.visible = false;
							this.$message({
								message: this.$t('Create project success'),
								type: 'success'
							});
							this.$emit('success', project.id);
						} catch (e) {
						}
					}
				})
			},
			onOpen() {
				this.project.name = '';
			},
			...mapActions([
				'createProject',
			]),
		}
	}
</script>

<style scoped>

</style>