<template>
	<el-dialog :title="$t('Project remark')" width="70%" :visible.sync="visible" @opened="onOpen"
	           :append-to-body="true"
	           :show-close="false"
	           fullscreen
	           custom-class="flex-dialog project-remark-dialog"
	>
		<div class="wrapper">
			<monaco-editor
				class="editor"
				v-model="content"
				language="markdown"
				:options="monacoEditorOptions"
				v-if="editMode"
			/>
			<el-scrollbar v-else class="project-scrollbar" wrap-class="wrap-x-hidden" view-class="project-remark">
				<div v-html="html"></div>
			</el-scrollbar>
		</div>
		<div slot="footer" class="dialog-footer">
			<div>
				<el-button v-if="!editMode" size="mini" @click="onEdit" type="primary">{{$t('Edit')}}</el-button>
				<el-button v-if="editMode" size="mini" @click="onApply" type="success">{{$t('Apply')}}</el-button>
			</div>
			<div class="gap-5">
				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
				<el-badge is-dot :hidden="!showBadge">
					<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
				</el-badge>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {mapActions, mapGetters} from 'vuex';
	import MarkdownIt from 'markdown-it';
	import MonacoEditor from "vue-monaco";
	import {monacoEditorOptions, playWaiting} from "../../../utils";

	let md = new MarkdownIt();

	export default {
		name: "ProjectRemarkDialog",
		components: {MonacoEditor},
		data() {
			return {
				visible: false,
				editMode: false,
				content: '',
				monacoEditorOptions,
			}
		},
		computed: {
			showBadge(){
				return this.projectRemark !== this.content;
			},
			html(){
				return this.content ? md.render(this.content) : '';
			},
			...mapGetters(['projectRemark'])
		},
		methods: {
			show() {
				this.editMode = false;
				this.content = this.projectRemark || '';
				this.visible = true;
			},
			async onSave() {
				await playWaiting(this.saveRemark({remark: this.content}), this.$t('Saving'));
				this.visible = false;
			},
			async onClose() {
				if(this.showBadge){
					await this.$confirm(this.$t('Modified, save before exit'), this.$t('Alert'), {
						confirmButtonText: this.$t('Save'),
						cancelButtonText: this.$t('Still Close'),
						distinguishCancelAndClose: true,
						type: 'warning'
					}).then(() => {
						return this.onSave();
					}).catch((action) => {
						if(action === 'cancel'){
							this.visible = false;
						}
					});
				}else{
					this.visible = false;
				}
			},
			onOpen() {

			},
			onEdit() {
				this.editMode = true;
			},
			onApply() {
				this.editMode = false;
			},
			...mapActions([
				'saveRemark',
			]),
		}
	}
</script>

<style scoped>

</style>