<template>
	<div>
    <el-dialog
    v-dialogDrag
    title=""
    :visible="Visible"
    @close="cancelForm"
    :close-on-click-modal="false"
    class="el-dialog-single"
    width="80%"
  >   
    <div>mapKey:<input type="text" v-model="mapKey"></div>
    <div>template:<SqlEditor v-if="show" ref="sqleditor"
        :value="basicInfoForm.sqlMain"
        @changeTextarea="changeTextarea($event)"
      /></div>
    <div>note:<input type="text" v-model="note"></div>
      <el-button type="primary" size="small" class="sql-btn" @click="formaterSql (basicInfoForm.sqlMain)">格式化sql</el-button>
      <el-button type="primary" size="small" class="sql-btn" @click="putChangeMappingDetails">保存</el-button>
    </el-dialog>
	</div>
</template>
<script>
import { putChangeMappingDetailsApi } from "@/api/staffApi.js"
    import sqlFormatter from 'sql-formatter'
    import SqlEditor from './SqlEditor'
	export default {
        components: {
            SqlEditor
        },
        data() {
	        return{
	        	basicInfoForm:{
	        		sqlMain: ''
				    },
            show:false,
            Visible:this.editroshowdialog,
            mapKey:'',
            note:'',
            id:''
			}
		},
    props:['editroshowdialog'],
    watch:{
      editroshowdialog(){
        this.Visible = this.editroshowdialog
      }
    },
        methods:{
          initialization(e){
            let params = JSON.parse(e)
            console.log(params)
            this.show = true
            this.mapKey = params.mapKey
            this.note = params.note
            this.$set(this.basicInfoForm, 'sqlMain', params.template)
            this.id = params.id
            console.log(this.basicInfoForm)
          },
        	changeTextarea (val){
        	   this.$set(this.basicInfoForm, 'sqlMain', val)  
        	},
        	formaterSql (val) {
                let dom = this.$refs.sqleditor
                dom.editor.setValue(sqlFormatter.format(dom.editor.getValue()))
           },
          putChangeMappingDetails(){
            let data = {
              id:this.id,
              params:{
                mapKey:this.mapKey,
                note:this.note,
                template:this.basicInfoForm.sqlMain
              }
            }
            putChangeMappingDetailsApi(data).then(res => {
              console.log(res)
              this.$message({ type: "success", message: "修改成功" });
            })
          },
          cancelForm() {
            this.mapKey = ''
            this.note = ''
            this.id = ''
            this.$set(this.basicInfoForm, 'sqlMain', '')
            this.show = false
            //取消关闭
            this.$emit("update:editroshowdialog", false);
          },
        },
     }
</script>