<template>
	<el-dialog
		:title="$t('Projectx skin 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="px-skin-editor"
	>
		<div class="wrapper" v-if="skin">
			<el-form class="form" ref="form" :model="skin" :rules="rules" size="mini" label-width="80px">
				<el-form-item :label="$t('Skin name')" prop="name">
					<el-input v-model="skin.name" :placeholder="$t('Skin name')"/>
				</el-form-item>
				<el-form-item :label="$t('Skin html')" prop="html" class="editor-form-item">
					<monaco-editor
						class="editor"
						v-model="skin.html"
						language="html"
						:options="monacoEditorOptions"
					/>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<div>
			</div>
			
			<div>
				<!-- <div class="el-form-item el-form-item--mini" style="padding:10px 0 10px 0">
					<label class="el-form-item__label" style="width: 60px;text-align: left;padding-right:0px">QA人员:</label>
					<div class="el-form-item__content" style="margin-left: 60px;">
						<el-select size="small" v-model="qa" placeholder="请选择QA人员" @change="changeQA">
							<el-option v-for="item in QAList" :key="item" :label="item" :value="item"></el-option>
						</el-select>
					</div>
				</div> -->
				<el-button size="mini" @click="clickClose">{{ $t("Close") }}</el-button>
				<el-popconfirm v-if="skin" class="save-button" @onConfirm="clickSave" placement="top"
				               :title="$t('Click save will overwrite and apply immediately', {name: this.pxProjectName, skin: skin.name})">
					<el-button slot="reference" type="primary" size="mini">{{ $t("Save") }}</el-button>
				</el-popconfirm>
			</div>
		</div>
	</el-dialog>
</template>

<script>

	import MonacoEditor from "vue-monaco";
	import {clonePureObj, monacoEditorOptions} from "../../../utils";
	import ElFormItem from "../../../components/inputs/form-item";

	export default {
		name: "PxSkinEditor",
		components: {ElFormItem, MonacoEditor},
		data() {
			return {
				visible: false,
				// QAList:this.$t("QAList"),
				// qa:this.$t("QAList")[0],
				pxProjectName: '',
				skin: null,
				operate: 0,
				monacoEditorOptions,
				rules: {
					name: [
						{required: true, message: this.$t('Skin name required'), trigger: 'blur'},
					],
					/*html: [
						{required: true, message: this.$t('Skin html required'), trigger: 'blur'},
					],*/
				}
			}
		},
		methods: {
			async edit(operate, skin, pxProjectName) {
				this.pxProjectName = pxProjectName;
				this.operate = operate;
				this.skin = clonePureObj(skin);
				if (!this.skin.html) {
					this.skin.html = '';
				}
				this.visible = true;
			},
			clickSave() {
				if (!this.skin.html) {
					this.$message(this.$t('Skin html required'));
				} else {
					this.$refs.form.validate(async (valid) => {
						if (valid) {
							try {
								this.$emit('input', this.skin, this.operate);
							} catch (e) {
								console.warn(e);
							}
						}
					});
				}
			},
			clickClose() {
				this.visible = false;
			},
			onSaveSuccess() {
				this.clickClose();
			},
		}
	}
</script>

<style scoped>

</style>