<template>
    <el-dialog
     :close-on-click-modal="false"
    id="addSqlBuilderDialog"
    v-loading="loading"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
  >
  <el-form ref="form" :model="form" label-width="80px" :rules="rules">
  <el-form-item label="名称" prop="name">
    <el-input v-model="form.name" placeholder="请输入SQL构建器名称"></el-input>
  </el-form-item>
  <el-form-item label="JNDI" prop="dataSourceMark">
    <el-input v-model="form.dataSourceMark" placeholder="请选择适配器" @focus="closeconnectorListDialog(true)"></el-input>
  </el-form-item>
  <el-form-item label="描述" prop="description">
    <el-input v-model="form.description" type="textarea" placeholder="请输入描述内容"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer">
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="closeDiola">取消</el-button>
  </span>
<connector-list v-model='connectorListVisible' @closeconnectorListDialog="closeconnectorListDialog" @getConnerctorName="getConnerctorName"></connector-list>
  </el-dialog>
</template>

<script>
import {
  saveSqlBuilderDetail,
  getSqlSheelList
  // getSqlColumnList,
  // getSqlBuilderDetail,
  // createSqlForm,
  // executSqlForm,
  // createParams,
} from '@/api/esb_global_management'
import { checkFormData } from '@/utils/common'
import connectorList from '@/views/esb_service/sql_builder/connector_list'
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  components: {
    connectorList
  },
  data() {
    return {
      title: 'SQL构建器',
      loading: false,
      // 表列表
      dataSheetList: [],
      dialogVisible: false,
      connectorListVisible: false,
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: ['change', 'blur'] }
        ],
        projectName: [
          { required: true, message: '项目名称不能为空', trigger: ['change', 'blur'] }
        ],
        'dataSourceMark': [
          { required: true, message: 'JNDI不能为空', trigger: ['change', 'blur'] }
        ]
      },
      // 选中列名，本地缓存
      columnName: [],
      // 表单信息
      form: {
        name: '',
        dataSourceMark: '',
        projectName: '', // 项目名称
        description: '', // 描述
        operate: '', // 选择操作
        customSql: '' // 自定义sql
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: true
    },
    id: {
      type: String,
      default: ''
    },
    projectId: {
      type: String,
      default: ''
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      if (val) {
        this.form = {
          name: '',
          dataSourceMark: ''
        }
      }
      this.$emit('closeAddDialog', val)
    }
  },
  computed: {
    ...mapGetters(['projectID'])
  },
  methods: {
    ...mapMutations(['setPayloadType']),

    // 关闭弹窗
    closeDiola() {
      this.$emit('closeAddDialog', false)
    },
    // 获取适配器列表，类型为DB
    // 打开

    // 关闭
    closeconnectorListDialog(val) {
      this.connectorListVisible = val
    },
    getConnerctorName(val) {
      this.connectorListVisible = false
      this.form.dataSourceMark = val.mark
    },
    // 提交表单
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$set(this.form, 'projectId', this.projectId)
          saveSqlBuilderDetail(this.form).then((rt) => {
            if (rt.status === '200') {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$emit('confirmAdd')
            }
          }).catch((err) => {
            console.log(err)
            // 全部为空也不会报错
          })
        }
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
</style>
