<template>
  <el-dialog v-dialogDrag title="新增" :visible="Visible" @close="cancelForm" :close-on-click-modal="false"
    class="el-dialog-single" width="80%">
    <div style="text-align: left;padding:20px">
      <el-form label-width="150px" :model="formList" :rules="rules" ref="ruleForm">
        <el-form-item label="选择器：" prop="">
          <el-input type="text" v-model="mapKey" />
        </el-form-item>
        <el-form-item label="模板：" prop="">
          <SqlEditor v-if="show" ref="sqleditor" :value="basicInfoForm.sqlMain"
            @changeTextarea="changeTextarea($event)" />
        </el-form-item>
        <el-form-item label="业务描述：" prop="">
          <el-input type="text" v-model="note"  />
        </el-form-item>
      </el-form>
    </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="submit">提交</el-button>
  </el-dialog>
</template>
<script>
import { postChangeMappingApi } from "@/api/staffApi.js"
import sqlFormatter from 'sql-formatter'
import SqlEditor from './components/SqlEditor'
export default {
  components: {
    SqlEditor
  },
  data() {
    return {
      basicInfoForm: {
        sqlMain: ''
      },
      show: false,
      Visible: this.Addeddialog,
      mapKey: '',
      note: '',
      id: '',
      formList: {},
      rules: {}
    }
  },
  props: ['Addeddialog'],
  watch: {
    Addeddialog() {
      console.log(this.Addeddialog)
      this.Visible = this.Addeddialog
    }
  },
  methods: {
    initialization() {
      console.log("初始化")
      this.show = true
    },
    changeTextarea(val) {
      this.$set(this.basicInfoForm, 'sqlMain', val)
    },
    formaterSql(val) {
      let dom = this.$refs.sqleditor
      dom.editor.setValue(sqlFormatter.format(dom.editor.getValue()))
    },
    submit() {
      let data = {
        mapKey: this.mapKey,
        note: this.note,
        template: this.basicInfoForm.sqlMain
      }
      postChangeMappingApi(data).then(res => {
        console.log(res)
        if (res) {
          this.$message({ type: "success", message: "提交成功" });
          this.$emit("update:Addeddialog", false);
          this.mapKey = ''
          this.note = ''
          this.$set(this.basicInfoForm, 'sqlMain', '')
        }
      })
    },
    cancelForm() {
      this.mapKey = ''
      this.note = ''
      this.$set(this.basicInfoForm, 'sqlMain', '')
      this.show = false
      //取消关闭
      this.$emit("update:Addeddialog", false);
      this.$emit("refurlist",{})
    },
  },
}
</script>