<template>
  <div class="layout-col-detail">
    <!--外部数据集 添加、编辑框-->
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" :priv="ID === 'new' ? 'Gather.OuterData.DataSetAdd' : 'Gather.OuterData.DataSetEdit'" :loading="confirmLoading" @click="confirm"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel">
        <el-form :model="dataModel" ref="dataSetForm" label-width="140px" label-suffix="：">
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name" :verify="['NotNull']">
                <el-input type="text" v-model="dataModel.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="代码" prop="code" :verify="['NotNull']">
                <el-input type="text" v-model="dataModel.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据库名称" prop="DBID">
                <el-select v-model="dataModel.DBID" clearable style="width:100%;">
                  <el-option v-for="item in DBIDName" :key="item.ID" :label="item.name" :value="item.ID">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="SQL语句" prop="content" :verify="['NotNull']">
                <el-input type="textarea" :rows="3" v-model="dataModel.content"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="memo">
                <el-input type="text" v-model="dataModel.memo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  props: { ID: String },
  data() {
    return {
      dataModel: {},
      confirmLoading: false,
      DBIDName: []
    }
  },
  async created() {
    this.initDataSetDialog()
    if (this.ID !== 'new') {
      let res = await axios.get(`/ui/dataset/${this.ID}`)
      this.dataModel = res.data.data
    }
  },
  methods: {
    // 点击确定
    async confirm() {
      this.confirmLoading = true
      try {
        await util.validateForm(this.$refs['dataSetForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        this.confirmLoading = false
        return
      }
      let res
      if (this.ID === 'new') {
        try {
          res = await axios.post('/ui/dataset', {
            ID: this.dataModel.ID,
            name: this.dataModel.name,
            DBID: this.dataModel.DBID === null ? '' : this.dataModel.DBID,
            code: this.dataModel.code,
            content: this.dataModel.content,
            memo: this.dataModel.memo
          })
        } catch (e) {
          util.showErrorMessageBox(e)
          this.confirmLoading = false
          return
        }
      } else {
        try {
          res = await axios.put(`/ui/dataset/${this.ID}`, {
            name: this.dataModel.name,
            DBID: this.dataModel.DBID === null ? '' : this.dataModel.DBID,
            code: this.dataModel.code,
            content: this.dataModel.content,
            memo: this.dataModel.memo
          })
        } catch (e) {
          util.showErrorMessageBox(e)
          this.confirmLoading = false
          return
        }
      }
      this.confirmLoading = false
      util.showResponseMessage(res.data)
      if (res.data.status === 1 && this.ID === 'new' && res.data.dataSetId) {
        this.$router.replace({path: `/datachannel/outerData/dataSetForm/${res.data.dataSetId}`})
      }
    },

    async initDataSetDialog() {
      // 数据库名称下拉列表数据绑定
      let res = await axios.get('/ui/database/dbidname')
      this.DBIDName = res.data.data
    }
  }
}
</script>
