<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" style="width:80%" />
        </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" style="width:80%" />
        </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="putChangeMappingDetails">保存</el-button>
  </el-dialog>
</template>
<script>
import { putChangeMappingDetailsApi } 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.showdialog,
      mapKey: '',
      note: '',
      id: '',
      formList:{},
      rules:{}
    }
  },
  props: ['showdialog'],
  watch: {
    showdialog() {
      this.Visible = this.showdialog
    }
  },
  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: "修改成功" });
        this.$emit("update:showdialog", false);
      })
    },
    cancelForm() {
      this.mapKey = ''
      this.note = ''
      this.id = ''
      this.$set(this.basicInfoForm, 'sqlMain', '')
      this.show = false
      //取消关闭
      this.$emit("update:showdialog", false);
      this.$emit("refurlist",{})
    },
  },
}
</script>