<template>
	<div class="project-x-config mapping-list">
		<div class="list" v-for="(item, key) in pxEnvs" :key="key">
			<div class="item">
				<span>{{ item }}</span>
				<el-icon class="el-icon-connection"/>
				<el-input
					class="input"
					size="mini"
					v-model="editData[key]"
					:placeholder="$t('Input projectx id', {envName: item})"
				></el-input>
			</div>
		</div>
		<div class="bottom-bar" v-if="showBottomBar">
			<div></div>
			<el-button @click="save" size="mini" type="primary">{{$t('Save')}}</el-button>
		</div>
		<!--<el-checkbox
			v-model="isSaveProjecx"
			style="margin: 20px 0; display: block"
		>{{$t('Save template to projectx')}}</el-checkbox>
		<div v-if="isSaveProjecx">
			<el-input class="tpl" type="textarea" rows="6" v-model="tpl" placeholder></el-input>
			<projectx-options :tpl="tpl" :getTpl="getTpl"></projectx-options>
		</div>-->
	</div>
</template>
<script>
	import {mapState, mapGetters, mapMutations} from "vuex";
	//import ProjectxOptions from "../ProjectxOptions";
	import {clonePureObj} from "../../../../utils";

	export default {
		name: "ProjectxConfig",
		components: {
			//"projectx-options": ProjectxOptions
		},
		props: ['showBottomBar'],
		data() {
			return {
				pxEnvs: this.$t("pxEnvs"),
				isSaveProjecx: false,
				tpl: "",
				editData: {
					dev: "",
					test: "",
					prod: ""
				}
			};
		},
		computed: {
			...mapState({
				pxEnv: state => state.project.data.options.pxEnv
			})
		},
		methods: {
			...mapMutations(["modifyProjectx", 'makeProjectDirty']),
			edit() {
				this.editData = clonePureObj(this.pxEnv);
			},
			save() {
				this.modifyProjectx(this.editData);
				this.$emit('save');
				if (this.showBottomBar) {
					this.makeProjectDirty();
				}
			},
			getTpl(tpl) {
				this.tpl = tpl;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tpl {
		margin-bottom: 20px;
		width: 60%;
	}
</style>
