<template>
  <!--连接管理-->
  <div id="dataSources" class="asideBgc tab">
    <div class="butClick">
      <xf-buttons
        @changes="searChange"
        :btnAuthority="authority"
        @add="dataEditSql = true"
        @edit="clickeEdit"
        @deletes="delectVals"
        @get="searchChange"
        :searchPlaceholder="searchPlaceholder"
        :addText="addText"
      >
        <!-- 下拉列表框 -->
        <!-- <template #dataSource>
          <span>
            <el-dropdown trigger="click" @command='handleCommand'>
              <span class="el-dropdown-link">
                <i class="iconfont icon-xiala"></i> 连接添加
              </span>
              <el-dropdown-menu slot="dropdown">
                <ul class="iconSql">
                  <ul class="el-select-group__wrap" v-for="(group,index) in mysqls" :key="index">
                    <li class="el-select-group__title">{{group.label}}</li>
                    <li>
                      <ul class="el-select-group">
                        <li v-for="item in group.options" :key='item.label'>
                          <el-dropdown-item :command='item.value' :icon="item.iconfont">{{item.label}}
                          </el-dropdown-item>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </ul>
              </el-dropdown-menu>
            </el-dropdown>

          </span>
        </template> -->
      </xf-buttons>
    </div>

    <xfTable
      ref="table"
      :btnAuthority="authority"
      @sizeSee="sizeChange"
      @selectionChange="selectionChange"
      @currentChange="currentChange"
      @refreshChange="refreshChange"
      @handleEdit="handleEdit"
      @delectVal="delectVal"
      @ruleAdden="ruleAdden"
      :slotOverhidden="slotName"
    >
    </xfTable>

    <!-- 数据添加 -->
    <el-dialog
      :title="modelH"
      :visible.sync="dataEdit"
      :close-on-click-modal="closeOnClick"
      :lock-scroll="closeOnClick"
      width="50%"
      @open="openContent"
      @close="closeContent"
      :modal="closeOnClick"
    >
      <SqlSource
        ref="sqlSources"
        @dataEdits="dataEdits"
        @updateData="getLists"
      ></SqlSource>
    </el-dialog>

    <!-- 数据库类型和队列类型 -->
    <el-dialog
      title="添加数据库或队列"
      :visible.sync="dataEditSql"
      :close-on-click-modal="closeOnClick"
      :lock-scroll="closeOnClick"
      width="50%"
      :modal="closeOnClick"
    >
      <div v-for="(item, index) in mysqls" :key="index">
        <p class="sqlGx">{{ item.label }}</p>

        <el-row type="flex" class="sqlIcon">
          <el-col
            :span="5"
            :offset="1"
            v-for="items in item.options"
            :key="items.value"
            class="text-center"
            @click.native="handleCommand(items.value)"
          >
            <el-card shadow="hover">
              <span><i :class="items.iconfont"></i></span>
              <p>{{ items.value }}</p>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dataEditSql = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import project from "../../mixins/project";
import * as locasto from "../../util/item";
import SqlSource from "../../model/sqlSource";
var moment = require("moment");

import { notify } from "../../util/item";

/*负责导出组件*/
export default {
  name: "dataSources",
  data() {
    return {
      deleteId: "id", //标记删除字段
      addText: "添加连接", //标记删除字段
      modelHead: ["添加连接信息", "修改连接信息"],
      modelH: "",
      mysqls: [
        {
          label: "数据库",
          options: [
            {
              value: "MySQL",
              iconfont: "iconfont icon-mysql",
              label: "MySQL"
            },
            {
              value: "Oracle",
              iconfont: "iconfont icon-oracle",
              label: "Oracle"
            },
            {
              value: "SQLServer",
              iconfont: "iconfont icon-db_mysql_server",
              label: "SQLServer"
            },
            {
              value: "MongoDB",
              iconfont: "iconfont icon-MongoDB",
              label: "MongoDB"
            }
          ]
        },
        {
          label: "消息队列",
          options: [
            {
              value: "RabbitMQ",
              iconfont: "iconfont icon-RabbitMQ",
              label: "RabbitMQ"
            }
          ]
        }
      ],
      mysqlsValue: "",
      searchPlaceholder: "请输入规则名称",
      dialogVisible: false,
      dataEdit: false,
      dataEditSql: false,
      center: true,
      editAdd: true,
      closeOnClick: false,
      slotName: "dataSourceName",
      deleteList: [],
      clickValue: "",
      loadOption: {
        menuWidth: 150,
        selection: true, //多选框选择
        menu: true,
        column: [
          {
            label: "数据库类型",
            prop: "dbType"
          },
          {
            label: "连接名称",
            prop: "dataSourceName",
            overHidden: true,
            solt: true
          },
          {
            label: "数据库地址URL",
            prop: "url"
          },
          {
            label: "创建人",
            prop: "createdby"
          },
          {
            label: "创建时间",
            prop: "created",
            formatter: function(row, value, text, column) {
              if (value === null) {
                return "";
              }
              return moment(value).format("YYYY-MM-DD HH:mm:ss");
            }
          }
        ]
      }
    };
  },
  mixins: [project],
  mounted() {
    this.getLists();
  },
  components: {
    SqlSource
  },
  methods: {
    handleCommand(command) {
      //   下拉选中数据库类型
      this.dataEditSql = false;
      this.mysqlsValue = command;
      this.handleAdd();
    },
    dataEdits(val) {
      /**
       * 隐藏
       */
      this.dataEdit = val;
    },
    searchChange(val = "") {
      // 搜索数据
      if (val === "") {
        this.page.currentPage = 1;
        this.getLists();
      } else {
        this.getLists(val);
      }
    },
    ruleAdden(row, index) {
      console.log(row);
      console.log(index);
    },
    sortDataCopy(row) {
      /**
       * 数据渲染
       */
      for (let [key, value] of Object.entries(this.ruleForm)) {
        this.ruleForm[key] = row[key];
      }
    },
    async getLists(ruleName = null) {
      /**
       * 获取任务列表
       */
      this.deleteList = [];
      let datas = {
        params: {
          pageNo: this.page.currentPage,
          pageSize: this.page.pageSize
        }
      };
      // 获取数据返回状态 日志
      let response = await this.getTableData(datas, this.nozzle.getSource);
      this.rendering(response);
    },
    resetClear(item, keys) {
      for (let items of Object.keys(this.ruleForm[item])) {
        if (items === keys) {
          this.ruleForm[item][items] = [];
        } else {
          this.ruleForm[item][items] = "";
        }
      }
    },
    handleAdd() {
      // 新增按钮
      if (this.mysqlsValue === "") {
        this.$notify({
          type: "info",
          message: "请选择数据库或消息队列再进行数据"
        });
        return;
      }
      this.editAdd = true;
      this.modelH = this.modelHead[0];
      this.dataEdit = true;
      this.$nextTick(function() {
        this.$refs.sqlSources.mysqlVal(this.mysqlsValue);
      });
    },
    clickeEdit() {
      // 单击修改
      if (!this.clickValue) {
        this.$notify.warning("请先选择要修改的行,再进行数据修改!");
        return;
      } else {
        this.handleEdit(this.clickValue);
      }
    },
    handleEdit(row) {
      // 行内点击修改
      this.editAdd = false;
      this.modelH = this.modelHead[1];
      this.dataEdit = true;

      this.$nextTick(function() {
        this.$refs.sqlSources.editVal(row);
      });
    },
    deleteUserLise(ids) {
      // 删除用户
      let datas = {
        params: {
          ids: ids
        }
      };
      this.asyncDelete(datas, this.nozzle.deleteSource);
    }
  }
};
</script>
<style scoped>
#dataSources .formJcDoc {
  font-size: 20px;
  color: #333;
  margin: 15px 0;
}

#dataSources .iconfont[class^="icon"] {
  width: 17px;
}

#dataSources .aboutType {
  color: rgb(102, 177, 255);
  cursor: pointer;
}

.deleteIcon {
  cursor: pointer;
  color: #f15353;
}

.conditiona {
  padding: 0px 0 10px 100px;
}

hr {
  opacity: 0.3;
}

.m-b-20 {
  margin-bottom: 20px;
}

#dataSources .sourceS {
  display: inline-block;
  width: 124px;
  line-height: 29px;
  background-color: #f0f0f0;
  border: 1px solid #d1d1d1;
  margin-right: 10px;
  border-radius: 3px;
  padding-left: 10px;
  transform: translateY(1px);
}

#dataSources .el-dropdown-link {
  color: #333;
}

.iconSql .iconfont[class^="icon"] {
  font-size: 18px;
}

.sqlGx {
  position: relative;
  padding-left: 15px;
  font-size: 20px;
  cursor: pointer;
}

.sqlIcon {
  margin: 20px 0;
}

.sqlIcon p {
  line-height: 36px;
}

.sqlIcon .iconfont[class^="icon"] {
  width: auto !important;
  font-size: 60px;
}

.sqlGx::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  width: 2px;
  height: 80%;
  background-color: #678ee0;
}
</style>