<template>
	<el-dialog
		:title="$t('Store editor')"
		width="80vw"
		:visible.sync="visible"
		:append-to-body="true"
		:close-on-click-modal="false"
		:show-close="false"
		:close-on-press-escape="false"
		custom-class="store-editor-dialog"
	>
		<div class="wrapper">
			<el-tabs v-model="tab" type="border-card" class="tabs">
				<el-tab-pane :label="$t('Store')" name="exp">
					<monaco-editor
						v-if="showEditor && tab === 'exp'"
						class="editor"
						v-model="store.exp"
						language="javascript"
						:options="monacoEditorOptions"
					/>
				</el-tab-pane>
				<el-tab-pane :label="$t('Computed')" name="computed">
					<el-table class="computed-editor" :data="store.computed" height="100%" stripe size="mini">
						<el-table-column type="expand">
							<template slot-scope="scope">
								<monaco-editor
									class="editor"
									v-model="scope.row.script"
									language="javascript"
									:options="monacoEditorOptions"
								/>
							</template>
						</el-table-column>
						<el-table-column
							prop="name"
							:label="$t('Name')">
							<template slot-scope="scope">
								<el-input v-model="scope.row.name" size="mini"/>
							</template>
						</el-table-column>
						<el-table-column
							width="50"
							:label="$t('Operate')">
							<template slot-scope="scope">
								<el-button circle size="mini" type="danger" icon="el-icon-delete" plain
								           @click="toDeleteItem(scope.$index)"/>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div slot="footer" class="dialog-footer">
			<div>
				<el-button v-show="tab === 'computed'" size="mini" @click="onAdd">{{$t('Add')}}</el-button>
			</div>
			<div>
				<el-popconfirm @onConfirm="clickClose" placement="top"
				               :title="$t('Are you sure to close?')">
					<el-button slot="reference" size="mini">{{ $t("Close") }}</el-button>
				</el-popconfirm>
				<el-button class="save-button" type="primary" size="mini" @click="clickSave">{{ $t("Save") }}
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>

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

	const storeExp = `return {

}
`;

	export default {
		name: "StoreEditorDialog",
		components: {MonacoEditor},
		data() {
			return {
				visible: false,
				tab: 'exp',
				monacoEditorOptions,
				showEditor: false,
				store: {},
			}
		},
		computed: {
		},
		methods: {
			async edit(type, view) {
				this.view = view;
				console.log(view.storeExp);
				this.store = view.store ? clonePureObj(view.store) : {
					exp: storeExp,
					computed: [],
				};
				this.visible = true;

				this.$nextTick(()=>{
					this.showEditor = true;
					this.tab = type;
				});
			},
			onAdd() {
				this.store.computed.push({
					name: '',
					script: '',
				});
			},
			onDelete(index) {
				this.store.computed.splice(index, 1);
			},
			toDeleteItem(index) {
				this.$confirm(this.$t('Are you sure to delete this item'), this.$t('Alert'), {
					confirmButtonText: this.$t('Confirm'),
					cancelButtonText: this.$t('Cancel'),
					type: 'warning'
				}).then(() => {
					this.onDelete(index);
				}).catch((e) => {
				});
			},
			clickSave() {
				this.modifyViewStore({
					view: this.view,
					store: this.store,
				});
				this.visible = false;
			},
			clickClose() {
				this.visible = false;
			},
			...mapMutations(['modifyViewStore'])
		}
	}
</script>

<style scoped>

</style>