<template>
	<el-dialog :title="$t('Mock Editor')" width="70%" :visible.sync="visible"
	           :close-on-click-modal="false"
	           :append-to-body="true"
	           :show-close="false"
	           fullscreen
	           custom-class="flex-dialog mock-editor-dialog"
	>
		<div class="mock-editor-view">
			<label class="enabled-switch">
				<el-switch :value="mockServeEnabled" @input="onMockServeEnabledChange"/>
				{{$t('Enable mock serve')}}
			</label>
			<el-table class="mock-table" :data="mocks" height="100%" stripe size="mini">
				<el-table-column type="expand">
					<template slot-scope="props">
						<monaco-editor
							class="editor"
							v-model="props.row.data"
							language="json"
							:options="monacoEditorOptions"
						/>
					</template>
				</el-table-column>
				<el-table-column
					prop="disabled"
					width="40">
					<template slot-scope="scope">
						<enabled-setter :target="scope.row"/>
					</template>
				</el-table-column>
				<el-table-column
					prop="path"
					:label="$t('Path')"
					width="200">
					<template slot-scope="scope">
						<el-input v-model="scope.row.path" size="mini"/>
					</template>
				</el-table-column>
				<el-table-column
					prop="timeout"
					:label="$t('Timeout')"
					width="100">
					<template slot-scope="scope">
						<el-input-number style="width:100%;" v-model="scope.row.timeout" size="mini" controls-position="right"/>
					</template>
				</el-table-column>
				<el-table-column
					prop="successRatio"
					:label="$t('SuccessRatio')"
					width="150">
					<template slot-scope="scope">
						<el-slider v-model="scope.row.successRatio" size="mini" :max="1" :min="0" :step="0.1"/>
					</template>
				</el-table-column>
				<el-table-column
					prop="data"
					:label="$t('Data')">
					<template slot-scope="scope">
						<span style="white-space: nowrap;overflow: hidden;">{{scope.row.data}}</span>
					</template>
				</el-table-column>
				<el-table-column
					width="50">
					<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>
		</div>
		<div slot="footer" class="dialog-footer">
			<div>
				<el-button size="mini" @click="onAdd">{{$t('Add')}}</el-button>
			</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 {mapState, mapMutations, mapActions} from 'vuex'
	import EnabledSetter from "../components/EnabledSetter";
	import {clonePureObj, monacoEditorOptions} from "../../../utils";
	import MonacoEditor from "vue-monaco";

	export default {
		name: "MockEditorDialog",
		components: {MonacoEditor, EnabledSetter},
		data() {
			return {
				visible: false,
				mocks: [],
				monacoEditorOptions,
			}
		},
		mounted() {

		},
		computed: {
			...mapState({
				mocksOrigin: state => state.project.data.mock,
				mockServeEnabled: state => state.project.mockServeEnabled,
			}),
		},
		watch: {
			mockServeEnabled(v) {
			}
		},
		methods: {
			show() {
				this.mocks = clonePureObj(this.mocksOrigin);
				this.visible = true;
			},
			onSave() {
				this.modifyMocks(this.mocks);
				this.visible = false;
			},
			onClose() {
				this.visible = false;
			},
			onAdd() {
				this.mocks.push({
					path: '',
					data: '',
					timeout: 0,
					successRatio: 1,
				});
			},
			onDelete(index) {
				this.mocks.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) => {
				});
			},
			onMockServeEnabledChange(v){
				this.setMockServeEnabled(v);
			},
			...mapMutations([
				'modifyMocks',
			]),
			...mapActions([
				'setMockServeEnabled',
			]),
		}
	}
</script>

<style scoped>

</style>