<template>
  <el-drawer :size="800" @closed="$emit('closed', data)" :destroy-on-close="true" title="选项" v-model="visible">
    <el-container v-loading="loading">
      <el-main style="padding:0 6px 6px 6px">
        <el-alert title="扩展配置为系统业务所有的配置" type="warning" style="margin-bottom: 15px;"></el-alert>
       	<el-input placeholder="请填写JSON" type="textarea" rows="20" v-model="jsonData"></el-input>

       	<!-- <sc-code-editor ref="editor" v-model="jsonData" mode="javascript" :height="500"></sc-code-editor> -->
      </el-main>
      <el-footer>
        <el-button @click="submit" type="primary">
          提交
        </el-button>
      </el-footer>
    </el-container>
  </el-drawer>
</template>
<script>

	import { defineAsyncComponent } from 'vue';
	const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor'));


	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				visible: false,
				issave: false,
				data:{},
				jsonData:'',
				filtersAddTemplate: {
					key: null,
					value: null,
				},
			}
		},
		components: {
			scCodeEditor
		},
		mounted() {

		},
		methods: {
			close(){
				this.visible = false;
			},
			//表单提交方法
			submit(){

				try {
				  this.data.options = JSON.parse(this.jsonData);

				  this.close()
				  this.$emit('success', this.data, this)


				} catch (error) {

							this.$alert('无效的 JSON 数据: ' + error, "提示", {type: 'error'});
				}


			},
			//显示
			open(){
				this.visible = true;
				return this;
			},
			//表单注入数据
			setData(o){
				this.data = o
				this.jsonData = JSON.stringify(o.options, null, 4)
				// this.$refs.editor.init
			},
		}
	}
</script>
<style>
</style>
