<template>
	<el-dialog :title="$t('Duplicate 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>
		<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: "DuplicateProjectDialog",
		data() {
			return {
				visible: false,
				project: {
					id: '',
					name: '',
				},
				template: 'blank',
				templates: {
					builtin: ['blank'],
					custom: [],
				},
				rules: {
					name: [
						{required: true, message: this.$t('Project name cannot be empty'), trigger: 'blur'},
					]
				}
			}
		},
		methods: {
			async show(project) {
				this.project.name = project.name + '-' + this.$t('copy') + '-' + Math.floor(Math.random() * 10000);
				this.project.id = project.id;
				this.visible = true;
			},
			doCreateProject() {
				this.$refs.form.validate(async (valid)=>{
					console.log(valid);
					if(valid){
						try {
							const project = await playWaiting(this.duplicateProject(this.project), this.$t('Duplicating project'));

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

<style scoped>

</style>