<template>
  <el-container>
    <el-aside style="width: 180px; padding: 0">
      <div class="header">
        <div>Database</div>
        <div>
          <el-dropdown trigger="click" @command="handleAdd">
            <el-button type="primary" icon="el-icon-plus" size="mini" circle/>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1"><svg-icon icon-class="1"/> Mysql</el-dropdown-item>
              <el-dropdown-item command="2"><svg-icon icon-class="2"/> Redis</el-dropdown-item>
              <el-dropdown-item command="3"><svg-icon icon-class="3"/> Oracle</el-dropdown-item>
              <el-dropdown-item command="4"><svg-icon icon-class="4"/> MongoDB</el-dropdown-item>
              <el-dropdown-item command="5"><svg-icon icon-class="5"/> SQL Server</el-dropdown-item>
              <el-dropdown-item command="6"><svg-icon icon-class="6"/> PostgreSQL</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="list" v-if="list && list.length > 0">
        <div v-for="item in list" :key="item.id" :class="'item'+(selectedKey === item.id ? ' is-active' : '')" @click="handleListClick(item)">
          <svg-icon :icon-class="item.type.toString()"/>
          {{ item.name }}
        </div>
      </div>
      <el-empty v-else description="暂无数据" :image-size="100"/>
    </el-aside>
    <el-main>
      <div v-if="selectedKey">
        <el-form :model="form" ref="form">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="数据源名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入HTTP Server名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="主机" prop="host">
                <el-input v-model="form.host" placeholder="请输入主机地址"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="端口" prop="port">
                <el-input v-model="form.port" placeholder="请输入端口号"/>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.type !== 3">
              <el-form-item label="库名" prop="dbName">
                <el-input v-model="form.dbName" placeholder="请输入库名"/>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.type === 3">
              <el-form-item label="服务名" prop="dbName">
                <el-input v-model="form.dbName" placeholder="请输入服务名"/>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.type === 4">
              <el-form-item label="认证库名" prop="authDb">
                <el-input v-model="form.authDb" placeholder="请输入认证库名"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" show-password placeholder="请输入密码"/>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.type === 2">
              <el-form-item label="集群模式" prop="cluster">
                <el-switch v-model="form.cluster" active-color="#13ce66" inactive-color="#ff4949" />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.type === 2">
              <el-form-item label="MasterName" prop="masterName">
                <el-input v-model="form.masterName" placeholder="哨兵模式下，请输入MasterName"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="footer">
          <el-button type="primary" @click="save">保 存</el-button>
          <el-button type="danger" @click="del">删除</el-button>
        </div>
      </div>
      <el-empty v-else description="暂无数据"/>
    </el-main>
  </el-container>
</template>

<script>

import {addDatasource, delDatasource, getDatasource, listDatasource, updateDatasource} from "@/api/test/database";

export default {
  name: 'Database',
  dicts: ["http_protocol"],
  data() {
    return {
      list: [],
      selectedKey: "",
      form: {},
    }
  },
  created() {
    this.getData();
    this.$nextTick(() => {

    })
  },
  methods: {
    getData(selectedKey) {
      const loading = this.setLoading();
      listDatasource().then(res => {
        this.list = res.data;
        if (selectedKey) {
          this.handleListClick({id: selectedKey})
        } else if (this.list && this.list.length > 0) {
          this.handleListClick({id: this.list[0].id})
        }
        loading.close();
      })
    },
    handleListClick(item) {
      const loading = this.setLoading();
      this.selectedKey = item.id;
      getDatasource(item.id).then(res => {
        this.form = res.data;
        if (!this.form.header) {
          this.form.header = []
        } else {
          this.form.header = JSON.parse(this.form.header);
        }
        this.form.header.push({
          key: "",
          value: ""
        })
      })
      loading.close();
    },
    handleAdd(type) {
      this.$prompt('请输入名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(?!\s*$).+/,
        inputErrorMessage: '名称不能为空'
      }).then(({value}) => {
        if (value) {
          const loading = this.setLoading();
          addDatasource({
            name: value,
            type: type
          }).then(res => {
            this.$message.success("添加成功")
            this.getData(res.data.id);
            loading.close();
          })
        }
      });
    },
    save() {
      updateDatasource(this.form).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.getData();
      })
    },
    del() {
      this.$modal.confirm('是否确认删除？').then(() => {
        return delDatasource(this.selectedKey);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        this.selectedKey = "";
        this.getData();
      })
    },
    setLoading() {
      return this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.footer {
  text-align: right;
  margin-top: 20px;
}

.header {
  font-weight: bold;
  line-height: 45px;
  border-bottom: 1px solid #eee;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
}

.list {
  .item {
    padding: 0 20px;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    border-right: 2px solid #eee;
  }

  .item.is-active {
    color: var(--current-color);
    border-right: 2px solid var(--current-color);
  }
}
</style>
