<template>
  <el-dialog :title="!dataForm.id ? '新建连接' : '编辑连接'" :close-on-click-modal="false" :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px">
      <el-form-item label="连接驱动" prop="dbType">
        <el-select v-model="dataForm.dbType" placeholder="请选择" :disabled="!!dataForm.id" @change="handleChange">
          <el-option v-for="item in dbOptions" :key="item.enCode" :label="item.fullName" :value="item.enCode" />
        </el-select>
      </el-form-item>
      <el-form-item label="连接名称" prop="fullName">
        <el-input v-model="dataForm.fullName" placeholder="连接名称" maxlength="50" />
      </el-form-item>
      <el-form-item label="主机地址" prop="host">
        <el-input v-model="dataForm.host" placeholder="主机地址" />
      </el-form-item>
      <el-form-item label="端口" prop="port">
        <el-input v-model.number="dataForm.port" placeholder="端口" />
      </el-form-item>
      <el-form-item label="用户" prop="userName">
        <el-input v-model="dataForm.userName" placeholder="用户即模式" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="dataForm.password" placeholder="密码" />
      </el-form-item>
      <el-form-item label="库名" prop="serviceName" v-if="dataForm.dbType !== 'DM8' && dataForm.dbType !== 'Oracle'">
        <el-input v-model="dataForm.serviceName" placeholder="库名">
          <el-button slot="append" @click="test" :loading="testLoad" v-if="dataForm.dbType !== 'KingbaseES'">测试连接</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="表空间" prop="tableSpace" v-if="dataForm.dbType === 'DM8' || dataForm.dbType === 'Oracle' || dataForm.dbType === 'KingbaseES'">
        <el-input v-model="dataForm.tableSpace" placeholder="表空间">
          <el-button slot="append" @click="test" :loading="testLoad">测试连接</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sortCode">
        <el-input-number :min="0" :max="9999" v-model="dataForm.sortCode" controls-position="right" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('common.cancelButton') }}</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> {{ $t('common.confirmButton') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { DataSourceInfo, DataSourceUpdate, DataSourceCreate, TestDbConnection } from '@/api/systemData/dataSource'
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        dbType: '',
        id: 0,
        fullName: '',
        host: '',
        port: '',
        userName: '',
        password: '',
        serviceName: '',
        tableSpace: '',
        sortCode: 0,
        enabledMark: 1
      },
      dataRule: {
        dbType: [{ required: true, message: '连接驱动不能为空', trigger: 'change' }],
        fullName: [{ required: true, message: '应用名称不能为空', trigger: 'blur' }],
        host: [{ required: true, message: '主机地址不能为空', trigger: 'blur' }],
        port: [
          { required: true, message: '端口不能为空', trigger: 'blur' },
          { pattern: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, message: '请输入正确的端口号', trigger: 'blur' }
        ],
        userName: [{ required: true, message: '用户不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        serviceName: [{ required: true, message: '库名不能为空', trigger: 'blur' }],
        tableSpace: [{ required: true, message: '表空间不能为空', trigger: 'blur' }]
      },
      dbOptions: [],
      btnLoading: false,
      testLoad: false
    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(async () => {
        this.$refs['dataForm'].resetFields()
        const res = await this.$store.dispatch('base/getDictionaryData', { sort: 'dbType' })
        this.dbOptions = JSON.parse(JSON.stringify(res))
        if (this.dataForm.id) {
          DataSourceInfo(this.dataForm.id).then((res) => {
            this.dataForm = res.data
          })
        }
      })
    },
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          const formMethod = this.dataForm.id ? DataSourceUpdate : DataSourceCreate
          formMethod(this.dataForm)
            .then((res) => {
              this.$message({
                message: res.msg,
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.btnLoading = false
                  this.$emit('refreshDataList')
                }
              })
            })
            .catch(() => {
              this.btnLoading = false
            })
        }
      })
    },
    handleChange(val) {
      let port = ''
      switch (val) {
        case 'SQLServer':
          port = '1433'
          break
        case 'MySQL':
          port = '3306'
          break
        case 'Oracle':
          port = '1521'
          break
        case 'DM8':
          port = '5232'
          break
        case 'KingbaseES':
          port = '54321'
          break
        case 'PostgreSQL':
          port = '5432'
          break
        default:
          port = ''
          break
      }
      this.dataForm.port = port
    },
    test() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.testLoad = true
          TestDbConnection(this.dataForm)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1500
                })
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error',
                  duration: 1500
                })
              }
              this.testLoad = false
            })
            .catch(() => {
              this.testLoad = false
            })
        }
      })
    }
  }
}
</script>
