<!-- 连接管理 -  符合数据库列表进行定制的内容 -->
<template>
  <div id="sqlSource text-center">
    <p class="sqlType">数据库类型：{{ ruleForm.dbType }}</p>

    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :label-width="randerWidth"
      class="demo-ruleForm"
    >
      <el-col :span="12">
        <el-form-item label="连接名称：" prop="dataSourceName">
          <el-input
            v-model="ruleForm.dataSourceName"
            :disabled="dataSourceDis"
            placeholder="请输入连接名称"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12" style="height:62px;">
        <el-form-item label="连接url：" prop="url">
          <el-col :span="22">
            <el-input
              v-model="ruleForm.url"
              placeholder="请输入连接url"
            ></el-input>
          </el-col>
          <el-col :span="2" class="text-right">
            <div class="aboutType">
              <el-tooltip
                class="item"
                effect="dark"
                :content="'点击图标复制示例：' + examples"
                placement="top-start"
              >
                <span
                  ><i
                    class="iconfont icon-49"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    v-clipboard:copy="examples"
                  ></i>
                </span>
              </el-tooltip>
            </div>
          </el-col>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="用户名：" prop="userName">
          <el-input
            v-model="ruleForm.userName"
            @keyup.native="notEmpty(ruleForm.userName, 'userName')"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="用户密码：" prop="userPassword">
          <el-input
            type="password"
            v-model="ruleForm.userPassword"
            @keyup.native="notEmpty(ruleForm.userPassword, 'userPassword')"
            placeholder="请输入用户密码"
          >
          </el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="备注：">
          <el-input v-model="ruleForm.mark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item v-show="!messageQueue" label="数据库属性串：">
          <el-input
            v-model="ruleForm.properties"
            placeholder="请输入数据库属性串"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item
          v-show="!messageQueue"
          label="额外数量连接属性："
          prop="extendProperties"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.extendProperties"
            placeholder="请输入额外数量连接属性"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="交换机名称：" v-show="messageQueue">
          <el-input
            v-model="exchange"
            placeholder="请输入交换机名称"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-form>

    <span slot="footer" class="dialog-footer" :style="modelFloor">
      <el-button
        @click.native="connectionTesting"
        size="mini"
        class="f_left connection"
        >连 接 测 试</el-button
      >
      <p class="f_left" :style="errorText" v-show="errorConnect">
        {{ errorHtml }}
      </p>
      <el-button type="primary" v-show="editAdd" @click="submitForm(1)"
        >添 加</el-button
      >
      <el-button type="primary" v-show="!editAdd" @click="submitForm(2)"
        >修 改</el-button
      >
      <el-button @click.native="dataEdits">取 消</el-button>
    </span>
  </div>
</template>

<script>
import { isJSON, notify } from "../util/item";
import project from "../mixins/project";

export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else if (!isJSON(value)) {
        callback(new Error("额外数量连接属性，为JSON格式"));
      } else {
        callback();
      }
    };

    return {
      errorText: {
        color: "#F56C6C",
        lineHeight: "45px",
        marginLeft: "10px"
      },
      randerWidth: "",
      errorHtml: "",
      editAdd: true,
      examples: "",
      messageQueue: false,
      dataSourceDis: false,
      errorConnect: false,
      exchange: "",
      editId: "",
      testPass: 0,
      ruleForm: {
        dataSourceName: "",
        dbType: "",
        userName: "",
        extendProperties: "",
        userPassword: "",
        properties: "",
        url: "",
        mark: ""
      },
      modelFloor: {
        display: "block",
        textAlign: "right",
        padding: "0 0 22px 0"
      },
      rules: {
        dataSourceName: [
          {
            required: true,
            message: "请输入连接名称",
            trigger: "blur"
          }
        ],
        extendProperties: [
          {
            validator: validatePass2,
            trigger: "blur"
          }
        ],
        url: [
          {
            required: true,
            message: "请输入连接url",
            trigger: "blur"
          }
        ],
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        userPassword: [
          {
            required: true,
            message: "请输入用户密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mixins: [project],
  components: {},
  computed: {},
  mounted() {},
  methods: {
    mysqlVal(val, row = "") {
      /**
       * 数据库类型的判断
       * @param {String} val 数据库类型
       * @param {Object} row 表格参数
       */
      this.dataSourceDis = false;

      this.resetForm("ruleForm");
      this.editAdd = true;

      // 连接名为小写
      this.ruleForm.dbType = val;
      let low = val.toLocaleLowerCase();

      // 数据库类型示例
      if (val === "MongoDB") {
        this.examples = "127.0.0.1:27010/monitoring";
      } else {
        this.examples = `jdbc:${low}://server:1433;databasename=test`;
      }
      this.randerWidth = "170px";

      if (val === "RabbitMQ") {
        this.messageQueue = true;
        this.randerWidth = "120px";
        this.examples = "127.0.0.1:5672";

        // 新增窗口队列
        if (row === "") {
          this.exchange = "";
          // this.dataSourceFlage = false;
        } else {
          // 修改窗口队列
          let properties = JSON.parse(row["properties"]);
          this.exchange = properties["exchange"];
          // this.dataSourceFlage = true;
        }
        return;
      }
      this.messageQueue = false;
    },
    editVal(row) {
      /**
       * 修改窗口
       * @param {Object} row 表格行点击参数
       */
      this.mysqlVal(row.dbType, row);
      this.editAdd = false;
      this.dataSourceDis = true;
      let { keys } = Object;
      this.editId = row.id;
      for (let item of keys(this.ruleForm)) {
        this.ruleForm[item] = row[item];
      }
    },
    connectionTesting() {
      /**
       * 连接测试，数据矫正
       */
      this.correct("ruleForm", () => {
        // 消息队列
        this.$http
          .post(this.nozzle.testSource, this.ruleForm)
          .then(response => {
            if (response.data.code === 200) {
              this.testPass = 200;
              this.errorConnect = true;
              this.errorText.color = "#41ca4c";
              this.errorHtml = "测试连接成功";
            } else {
              this.testPass = 0;
              this.errorHtml = response.data.data;
              this.errorConnect = true;
              this.errorText.color = "#F56C6C";
            }
          });
      });
    },
    dataEdits() {
      /**
       * 按钮取消事件
       */

      this.errorConnect = false;
      this.testPass = 0;
      this.$emit("dataEdits", false);
    },
    async addParameter(api, dif = 1) {
      // 新增数据传值
      let datas = this.ruleForm;

      // 消息队列
      if (this.ruleForm.dbType === "RabbitMQ") {
        datas["properties"] = JSON.stringify({
          exchange: this.exchange
        });
      }

      // 修改数据
      if (dif === 2) {
        datas["id"] = this.editId;
      }

      const response = await this.$http.post(api, datas);
      notify(response);
      if (response.data.code === 200) {
        this.updateData();
      }
    },
    resetForm(formName) {
      // 清空表格数据
      this.$refs[formName].resetFields();
    },
    correct(formName, cb, dif = 1) {
      // 数据矫正
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 连接测试
          // if (dif === 2) {
          //   if (this.testPass === 0) {
          //     this.$notify({
          //       type: 'warning',
          //       message: '请先完成连接测试'
          //     })
          //     return
          //   }
          // }
          cb();
          return true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    updateData() {
      /**
       * 更新数据
       */
      this.$emit("updateData");
    },
    submitForm(dif) {
      // 添加数据,修改数据
      this.correct(
        "ruleForm",
        () => {
          let api = "";
          if (dif === 1) {
            api = this.nozzle.addSource;
            this.addParameter(api);
          } else {
            api = this.nozzle.updateSource;
            this.addParameter(api, 2);
          }
          this.dataEdits();
        },
        2
      );
    }
  }
};
</script>

<style>
#sqlSource {
  width: 100%;
}

/* .sqlType {
  font-size: 16px;
  color: var(--white) !important;
  margin-bottom: 20px;
  padding-left: 11px;
} */

.connection {
  margin-top: 5px;
}
</style>