<template>
  <div>

    <el-form  label-width="80px" :model="SourceReq" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">
      <el-form-item label="数据源名称">
        <el-input v-model="SourceReq.dataResourceName"></el-input>
      </el-form-item>
      <el-form-item label="数据来源系统名称">
        <el-input v-model="SourceReq.dataSourcesSystemName"></el-input>
      </el-form-item>
      <el-form-item label="数据库名称">
        <el-input v-model="SourceReq.databaseName"></el-input>
      </el-form-item>
      <el-button @click="findSelectSourceList()">
        查询
      </el-button>
    </el-form>


<!--    <el-button-->
<!--      v-hasPermi="['system:user:remove']"-->
<!--      icon="el-icon-delete"-->
<!--      size="mini"-->
<!--      type="text"-->
<!--      @click="handleDelete(scope.row)"-->
<!--    >删除-->
<!--    </el-button>-->

    <el-button
      v-hasPermi="['tool:gen:import']"
      icon="el-icon-download"
      plain
      size="mini"
      type="warning"
      @click="findSelectSourceExport"
    >导出
    </el-button>


    <el-button
      icon="el-icon-delete"
      plain
      size="mini"
      type="danger"
      @click="insertAdd()"
    >新增
    </el-button>

    <el-button
      icon="el-icon-delete"
      plain
      size="mini"
      type="danger"
      @click="deleteSourceByIds()"
    >删除
    </el-button>


    <el-dialog title="添加数据源接入" :visible.sync="dialogFormVisible">

      <el-form :model="sourceAddReq">
        <el-form-item label="接入源名称">
          <el-input v-model="sourceAddReq.dataResourceName"></el-input>
        </el-form-item>
        <el-form-item label="数据来源系统名称">
          <el-input v-model="sourceAddReq.dataSourcesSystemName"></el-input>
        </el-form-item>
        <el-form-item label="主机地址">
          <el-input v-model="sourceAddReq.host"></el-input>
        </el-form-item>
        <el-form-item label="主机端口">
          <el-input v-model="sourceAddReq.port"></el-input>
        </el-form-item>
        <el-form-item label="数据接入类型">
          <el-input v-model="sourceAddReq.databaseType"></el-input>
        </el-form-item>
        <el-form-item label="数据库名称">
          <el-input v-model="sourceAddReq.databaseName"></el-input>
        </el-form-item>
        <el-form-item label="数据库用户">
          <el-input v-model="sourceAddReq.username"></el-input>
        </el-form-item>
        <el-form-item label="数据库密码">
          <el-input v-model="sourceAddReq.password"></el-input>
        </el-form-item>
        <el-form-item label="数据连接参数">
          <el-input v-model="sourceAddReq.connectionParams"></el-input>
        </el-form-item>
        <el-form-item label="初始化连接数量">
          <el-input v-model="sourceAddReq.initLinkNum"></el-input>
        </el-form-item>
        <el-form-item label="最大连接数量">
          <el-input v-model="sourceAddReq.maxLinkNum"></el-input>
        </el-form-item>
        <el-form-item label="最大等待时间">
          <el-input v-model="sourceAddReq.maxWaitTime"></el-input>
        </el-form-item>
        <el-form-item label="最大等待次数">
          <el-input v-model="sourceAddReq.maxWaitTimes"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="sourceAddReq.remark"></el-input>
        </el-form-item>

      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="textP()">测试</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSource()">确 定</el-button>
      </div>
    </el-dialog>






    <el-table
      :data="source"
      style="width: 100%"

      @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>


      <el-table-column
        label="接入源名称"
        prop="dataResourceName">
      </el-table-column>

      <el-table-column
        label="数据来源系统名称"
        prop="dataSourcesSystemName">
      </el-table-column>

      <el-table-column
        label="主机地址"
        prop="host">
      </el-table-column>

      <el-table-column
        label="端口号"
        prop="port">
      </el-table-column>

      <el-table-column
        label="数据接入类型"
        prop="databaseType">
      </el-table-column>

      <el-table-column
        label="数据库名称"
        prop="databaseName">
      </el-table-column>

      <el-table-column
        label="是否初始化"
        prop="name">
      </el-table-column>

      <el-table-column
        label="备注"
        prop="remark">
      </el-table-column>

      <el-table-column
        align="right">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-pear"
            size="mini"
            type="text"
            @click="update(scope.row)">修改</el-button>

          <el-button
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)">删除</el-button>

          <el-button
            icon="el-icon-service"
            size="mini"
            type="text"
            @click="struceure(scope.row)">同步资产结构</el-button>

          <el-button
            icon="el-icon-aim"
            size="mini"
            type="text"
            @click="textConnect(scope.row)">测试连接</el-button>
        </template>

      </el-table-column>

    </el-table>







  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {selectSourceList} from "@/api/etl/switch";
import {selectSourceExport} from "@/api/etl/switch";
import {connectionTest} from "@/api/etl/switch";
import {insertAdd} from "@/api/etl/switch";
import {deleteSource} from "@/api/etl/switch";
import {getInfo} from "@/api/etl/switch";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      ids:[],
      dialogFormVisible:false,
      SourceReq:{

      },
      sourceAddReq:{

      },
      source:[],
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    deleteSourceByIds(){
      deleteSource(this.ids).then(res=>{
        if(res.code===200){
          alert("删除成功");
        }
      })
    },
    handleDelete(row){
      deleteSource(row.id).then(res=>{
        if(res.code===200){
          alert("删除成功");
        }
      })
    },
    textP(){
      connectionTest(this.sourceAddReq).then(res=>{
        if (res.code===200){
          alert("测试连接成功")
        }else{
          alert("连接失败")
        }
      })
    },
    addSource(){
      insertAdd(this.sourceAddReq).then(res=>{
          if(res.code===200){
            location.reload();
          }
      })
    },
    //测试连接
    textConnect(row){
      connectionTest(row).then(res=>{
          if (res.code===200){
            alert("测试连接成功");
          }else {
            alert("测试连接失败");
          }
      })
    },
    insertAdd(){
      this.dialogFormVisible=true

    },
    findSelectSourceList(){
      selectSourceList(this.SourceReq).then(res=>{
          this.source=res.data.rows;
      })
    },
    findSelectSourceExport(){
      this.download('source/source/export', {
        ...this.SourceReq
      }, `source_${new Date().getTime()}.xlsx`)
    },
    handleSelectionChange(row){
      this.ids=[];
      for (let rowKey in row) {
        this.ids.push(row[rowKey].id)
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.findSelectSourceList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
