<template>
  <Modal class="th-new-database-modal" v-model="addDatabaseDlg" title="数据库参数" width="440" @on-close="hide" :mask-closable="false">
    <Form class="th-form" :model="dbOptions" :label-width="75">
      <FormItem label="名称：" prop="name">
        <Input v-model="dbOptions.name"/>
      </FormItem>
      <FormItem label="类型：" prop="type">
        <RadioGroup v-model="dbOptions.type">
          <Radio label="postgres" :disabled="!!options">
            <span>postgresql</span>
          </Radio>
          <Radio label="mysql" :disabled="!!options">
            <span>mysql</span>
          </Radio>
          <Radio label="mssql" :disabled="!!options">
            <span>sqlserver</span>
          </Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="地址：" prop="host">
        <Input v-model="dbOptions.host"/>
      </FormItem>
      <FormItem label="端口：" prop="port">
        <Input v-model="dbOptions.port"/>
      </FormItem>
      <FormItem label="数据库：" prop="database">
        <Input v-model="dbOptions.database"/>
      </FormItem>
      <FormItem label="用户名：" prop="username">
        <Input v-model="dbOptions.username"/>
      </FormItem>
      <FormItem label="密码：" prop="password">
        <Input v-model="dbOptions.password" type="password"/>
      </FormItem>
    </Form>
    <Button type="primary" @click="connectionTest()">测试连接</Button>
    <LoadingCircle class="loading-circle" :width="15" :height="15" v-if="loading"/>
    <span :class="connectionMessage.type" v-if="connectionMessage" style="margin-left:10px;">{{connectionMessage.message}}</span>
    <template #footer>
      <Button textColor="#ffffff" width="80" height="30" @click="hide" style="width: 80px;">取消</Button>
      <Button type="primary" @click="ok" style="width: 80px;">确定</Button>
    </template>
  </Modal>
</template>

<script>
import LoadingCircle from '../loading/LoadingCircle.vue'
import {databaseTest} from '../../libs/request'
export default {
  props: ['options'],
  components: {LoadingCircle},
  methods: {
    show() {
      this.addDatabaseDlg = true
    },
    hide() {
      this.dbOptions = {
        name: '新建数据库',
        type: 'postgres',
        host: '',
        port: '5432',
        database: '',
        username: '',
        password: ''
      }
      this.addDatabaseDlg = false
      this.connectionMessage = null
      this.testPassed = false
      this.loading = false
    },
    validate() {
      let {name, host, port, database, username, password} = this.dbOptions
      if (!name) {
        this.connectionMessage = {
          type: 'error',
          message: '名称不能为空'
        }
        return false
      }
      if (!host) {
        this.connectionMessage = {
          type: 'error',
          message: '请输入正确的IP地址'
        }
        return false
      }
      if (!port || Number.isNaN(+port)) {
        this.connectionMessage = {
          type: 'error',
          message: '请输入正确的端口号'
        }
        return false
      }
      if (!database) {
        this.connectionMessage = {
          type: 'error',
          message: '数据库不能为空'
        }
        return false
      }
      if (!username) {
        this.connectionMessage = {
          type: 'error',
          message: '用户名不能为空'
        }
        return false
      }
      if (!password) {
        this.connectionMessage = {
          type: 'error',
          message: '密码不能为空'
        }
        return false
      }
      this.connectionMessage = null
      return true
    },
    connectionTest(callback) {
      this.connectionMessage = null
      if (this.validate()) {
        this.loading = true
        databaseTest(this.dbOptions).then(() => {
          this.connectionMessage = {
            type: 'success',
            message: '连接成功'
          }
          this.loading = false
          this.testPassed = true
          if (callback) {
            callback()
          }
        }).catch(err => {
          this.connectionMessage = {
            type: 'error',
            message: `连接失败：${err.response.data.message}`
          }
          this.loading = false
          this.testPassed = false
        })
      }
    },
    ok() {
      if (this.validate()) {
        this.$emit('on-ok', this.dbOptions)
        this.hide()
      }
      /*if(this.testPassed) {
        this.$emit('on-ok', this.dbOptions)
        this.hide()
      } else {
        this.connectionTest(() => {
          this.$emit('on-ok', this.dbOptions)
          this.hide()
        })
      }*/
    }
  },
  data() {
    return {
      addDatabaseDlg: false,
      connectionMessage: null,
      dbOptions: {
        name: '新建数据库',
        type: 'postgres',
        host: '',
        port: '5432',
        database: '',
        username: '',
        password: ''
      },
      loading: false,
      testPassed: false  // 测试是否已经通过
    }
  },
  watch: {
    options() {
      if (this.options) {
        this.dbOptions = Object.assign({}, this.dbOptions, this.options)
      }
    }
  }
}  
</script>