<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.DatabaseAdd' : 'Gather.OuterData.DatabaseEdit'" :loading="connectLoading" @click="connectTest"><span><i class="fa fa-link"></i>测试连接</span></el-button>
      <el-button type="button" class="el-button el-button--default save" :priv="ID === 'new' ? 'Gather.OuterData.DatabaseAdd' : 'Gather.OuterData.DatabaseEdit'" :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="databaseForm" label-width="140px" label-suffix="：">
          <el-row>
            <el-col :span="12">
              <el-form-item label="数据库别名" prop="name" :verify="['NotNull']">
                <el-input v-model="dataModel.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务器类型" prop="serverType" :verify="['NotNull']">
                <el-select v-model="dataModel.serverType" style="width:100%;">
                  <el-option v-for="str in serverTypeOptions" :key="str.value" :label="str.label" :value="str.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务器地址" prop="address" :verify="['NotNull']">
                <el-input placeholder="服务器地址为IP地址或者域名" v-model="dataModel.address"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务器端口" prop="port" :verify="['NotNull','Int']">
                <el-input v-model="dataModel.port"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户名" prop="userName" :verify="['NotNull']">
                <el-input v-model="dataModel.userName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" prop="password" :verify="['NotNull']">
                <el-input type="password" v-model="dataModel.password"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据库名称" prop="DBName" :verify="['NotNull']">
                <el-input v-model="dataModel.DBName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="测试表名" prop="testTable" :verify="['NotNull']">
                <el-input v-model="dataModel.testTable"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="memo">
                <el-input 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 },
  async created() {
    this.initDataBaseDialog()
    if (this.ID !== 'new') {
      let res = await axios.get(`/ui/database/${this.ID}`)
      this.dataModel = res.data.data
    }
  },
  data() {
    return {
      dataModel: {},
      confirmLoading: false,
      connectLoading: false,
      serverTypeOptions: [] // 服务器类型选项
    }
  },
  methods: {
    // 数据库表单弹框打开回调
    async initDataBaseDialog() {
      let res = await axios.get('/ui/platform/codes/Database.Type')
      this.serverTypeOptions = res.data.data
    },
    // 新建/编辑数据库连接信息弹框测试链接按钮
    async connectTest() {
      try {
        this.connectLoading = true
        await util.validateForm(this.$refs['databaseForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        this.connectLoading = false
        return
      }
      let res
      try {
        res = await axios.put(`/ui/database/testconnect`, this.dataModel)
      } catch (e2) {
        util.showErrorMessageBox(e2)
        this.connectLoading = false
        return
      }
      this.connectLoading = false
      util.showResponseMessage(res.data)
    },
    // 新建/编辑数据库连接信息弹框确认按钮
    async confirm() {
      this.confirmLoading = true
      try {
        await util.validateForm(this.$refs['databaseForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        this.confirmLoading = false
        return
      }
      // 判断是新建框还是编辑框
      let res
      try {
        if (this.ID === 'new') {
          res = await axios.post('/ui/database', this.dataModel)
        } else {
          res = await axios.put(`/ui/database/${this.ID}`, this.dataModel)
        }
      } catch (e) {
        this.confirmLoading = false
        return
      }
      this.confirmLoading = false
      util.showResponseMessage(res.data)
      if (res.data.status === 1 && this.ID === 'new' && res.data.databaseId) {
        this.$router.replace({path: `/datachannel/outerData/databaseForm/${res.data.databaseId}`})
      }
    }
  }
}
</script>
