<template>
  <div>

    <el-form ref="form" :model="connectDTO" label-width="130px" :inline="true">
      <el-form-item  label="接入源名称:">
        <el-input v-model="connectDTO.accSourName" style="width: 300px;"></el-input>
      </el-form-item>

      <el-form-item label="数据来源系统名称:">
        <el-input v-model="connectDTO.dataSourSystemName" style="width: 300px;"></el-input>
      </el-form-item>

      <el-form-item label="数据接入类型:">
        <el-input v-model="connectDTO.dataAccType" style="width: 300px;"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="selectConnectList">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="insertConnectList" plain>添加</el-button>
    <el-button type="danger" plain>删除</el-button>
    <el-button type="warning" plain>导出</el-button>


    <template>
      <el-table
        ref="multipleTable"
        :data="connect"
        tooltip-effect="dark"
        :style="{width: tableWidth}"
        @selection-change="handleSelectionChange">

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

        <el-table-column
          label="接入源名称">
          <template slot-scope="scope">{{ scope.row.accSourName }}</template>
        </el-table-column>

        <el-table-column
          label="数据来源系统名称">
          <template slot-scope="scope">{{ scope.row.dataSourSystemName }}</template>
        </el-table-column>

        <el-table-column
          label="ip地址">
          <template slot-scope="scope">{{ scope.row.ipAddress }}</template>
        </el-table-column>

        <el-table-column
          label="端口号地址">
          <template slot-scope="scope">{{ scope.row.port }}</template>
        </el-table-column>

        <el-table-column
          label="数据接入类型">
          <template slot-scope="scope">{{ scope.row.dataAccType }}</template>
        </el-table-column>

        <el-table-column
          label="数据库名称">
          <template slot-scope="scope">{{ scope.row.databaseName }}</template>
        </el-table-column>

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

          <template slot-scope="scope">
            <el-tag v-if="scope.row.initialization==='Y'" type="success">初始化</el-tag>
            <el-tag v-if="scope.row.initialization==='N'" type="danger">不初始化</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="备注">
          <template slot-scope="scope">{{ scope.row.notes }}</template>
        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="selectHandleClick(scope.row)" type="text" size="small">同步资产结构</el-button>
            <el-button @click="textHandleClick(scope.row)" type="text" size="small">测试</el-button>
            <el-button @click="updHandleClick(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="delHandleClick(scope.row)" type="text" size="small">删除</el-button>
          </template>

        </el-table-column>
      </el-table>


<!--      修改-->
      <el-dialog title="修改配置参数" :visible.sync="updDialogFormVisible" width="1100px">
        <el-form :model="connectDTO" :inline="true" :label-width="formLabelWidth">
          <el-form-item label="ID" style="display: none;">
            <el-input v-model="connectDTO.id" autocomplete="off" placeholder="Id"></el-input>
          </el-form-item>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本配置信息</span>
            </div>
            <div  class="text item" :label-width="formLabelWidth">
              <el-form-item label="接入源名称">
                <el-input v-model="connectDTO.accSourName" autocomplete="off" placeholder="请输入接入源名称"></el-input>
              </el-form-item>
              <el-form-item label="数据来源系统名称" label-width="125px">
                <el-input v-model="connectDTO.dataSourSystemName" autocomplete="off" placeholder="请输入数据来源系统"></el-input>
              </el-form-item>

              <el-form-item label="ip地址">
                <el-input v-model="connectDTO.ipAddress" autocomplete="off" placeholder="请输入IP地址"></el-input>
              </el-form-item>

              <el-form-item label="端口号地址">
                <el-input v-model="connectDTO.port" autocomplete="off" placeholder="请输入端口号地址"></el-input>
              </el-form-item>

              <el-form-item label="数据接入类型" label-width="110px">
                <template>
                  <el-select v-model="connectDTO.dataAccType" placeholder="请选择" label-width="100px">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
                <!--                <el-input v-model="connectDTO.name" autocomplete="off" placeholder="请输入数据接入类型"></el-input>-->
              </el-form-item>

              <el-form-item label="数据库名称">
                <el-input v-model="connectDTO.databaseName" autocomplete="off" placeholder="请输入数据库名称"></el-input>
              </el-form-item>

              <el-form-item label="数据库用户">
                <el-input v-model="connectDTO.userName" autocomplete="off" placeholder="数据库用户"></el-input>
              </el-form-item>

              <el-form-item label="数据库密码" label-width="125px">
                <el-input v-model="connectDTO.password" autocomplete="off" placeholder="数据库密码"></el-input>
              </el-form-item>

              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>数据连接参数</span>
                </div>
                <div  class="text item" >
                  <el-form-item label="数据连接参数">
                    <el-input v-model="connectDTO.dataConnParam" autocomplete="off" placeholder="请输入数据连接参数" style="width: 990px;"></el-input>
                  </el-form-item>
                </div>
              </el-card>
            </div>
          </el-card>

          <el-card class="box-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>连接池配置</span>
            </div>
            <div  class="text item" >
              <el-form-item label="初始连接数量">
                <el-input v-model="connectDTO.initSize" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
              </el-form-item>

              <el-form-item label="最大连接数量">
                <el-input v-model="connectDTO.maxNumConn" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
              </el-form-item>

              <el-form-item label="最大等待时间">
                <el-input v-model="connectDTO.maxWaitTime" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
              </el-form-item>

              <el-form-item label="最大等待次数">
                <el-input v-model="connectDTO.maxWaitTimes" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
              </el-form-item>
            </div>
          </el-card>

          <el-card class="box-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>其他信息</span>
            </div>
            <div  class="text item" >
              <el-form-item label="是否初始化" :label-width="formLabelWidth">
                <el-radio v-model="connectDTO.initialization" label="Y">是</el-radio>
                <el-radio v-model="connectDTO.initialization" label="N">否</el-radio>
              </el-form-item>

              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :rows="2"
                  :cole="1000"
                  placeholder="请输入内容"
                  v-model="connectDTO.notes" style="width: 850px;">
                </el-input>
              </el-form-item>
            </div>
          </el-card>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updsDialogFormVisible">确 定</el-button>
        </div>
      </el-dialog>
      <!-- Form -->
<!--添加-->
      <el-dialog title="添加配置参数" :visible.sync="addDialogFormVisible" width="1100px">
        <el-form :model="connectDTO" :inline="true" :label-width="formLabelWidth">

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本配置信息</span>
            </div>
            <div  class="text item" :label-width="formLabelWidth">
              <el-form-item label="接入源名称">
                <el-input v-model="connectDTO.accSourName" autocomplete="off" placeholder="请输入接入源名称"></el-input>
              </el-form-item>
              <el-form-item label="数据来源系统名称" label-width="125px">
                <el-input v-model="connectDTO.dataSourSystemName" autocomplete="off" placeholder="请输入数据来源系统"></el-input>
              </el-form-item>

              <el-form-item label="ip地址">
                <el-input v-model="connectDTO.ipAddress" autocomplete="off" placeholder="请输入IP地址"></el-input>
              </el-form-item>

              <el-form-item label="端口号地址">
                <el-input v-model="connectDTO.port" autocomplete="off" placeholder="请输入端口号地址"></el-input>
              </el-form-item>

              <el-form-item label="数据接入类型" label-width="110px">
                <template>
                  <el-select v-model="connectDTO.dataAccType" placeholder="请选择" label-width="100px">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
<!--                <el-input v-model="connectDTO.name" autocomplete="off" placeholder="请输入数据接入类型"></el-input>-->
              </el-form-item>

              <el-form-item label="数据库名称">
                <el-input v-model="connectDTO.databaseName" autocomplete="off" placeholder="请输入数据库名称"></el-input>
              </el-form-item>

              <el-form-item label="数据库用户">
                <el-input v-model="connectDTO.userName" autocomplete="off" placeholder="数据库用户"></el-input>
              </el-form-item>

              <el-form-item label="数据库密码" label-width="125px">
                <el-input v-model="connectDTO.password" autocomplete="off" placeholder="数据库密码"></el-input>
              </el-form-item>

              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>数据连接参数</span>
                </div>
                <div  class="text item" >
                  <el-form-item label="数据连接参数">
                    <el-input v-model="connectDTO.dataConnParam" autocomplete="off" placeholder="请输入数据连接参数" style="width: 990px;"></el-input>
                  </el-form-item>
                </div>
              </el-card>
            </div>
          </el-card>

          <el-card class="box-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>连接池配置</span>
            </div>
            <div  class="text item" >
              <el-form-item label="初始连接数量">
                <el-input v-model="connectDTO.initSize" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
              </el-form-item>

              <el-form-item label="最大连接数量">
                <el-input v-model="connectDTO.maxNumConn" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
              </el-form-item>

              <el-form-item label="最大等待时间">
                <el-input v-model="connectDTO.maxWaitTime" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
              </el-form-item>

              <el-form-item label="最大等待次数">
                <el-input v-model="connectDTO.maxWaitTimes" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
              </el-form-item>
            </div>
          </el-card>

          <el-card class="box-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>其他信息</span>
            </div>
            <div  class="text item" >
              <el-form-item label="是否初始化" :label-width="formLabelWidth">
                <el-radio v-model="connectDTO.initialization" label="Y">是</el-radio>
                <el-radio v-model="connectDTO.initialization" label="N">否</el-radio>
              </el-form-item>

              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :rows="2"
                  :cole="1000"
                  placeholder="请输入内容"
                  v-model="connectDTO.notes" style="width: 850px;">
                </el-input>
              </el-form-item>
            </div>
          </el-card>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addsDialogFormVisible">确 定</el-button>
        </div>
      </el-dialog>

    </template>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {
  delHandleClick,
  getConnectList,
  insertConnectList,
  selectHandleClick,
  textHandleClick,
  updConnectList
} from '@/api/property/property'

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

    return {
      connectDTO:{
        maxWaitTimes: 3,
        maxWaitTime: 3000,
        maxNumConn: 20,
        initSize: 5,
        dataConnParam:'useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior'
      },
      connect:[],
      tableWidth: '100%',
      multipleSelection: [],
      addDialogFormVisible: false,
      updDialogFormVisible: false,
      formLabelWidth:'100px',
      options: [{
        value: 'Mysql',
        label: 'Mysql'
      }, {
        value: 'Oracle',
        label: 'Oracle'
      }],
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    selectHandleClick(row){
      selectHandleClick(row).then(res=>{
        console.log(res.data)
        this.$message.success(res.msg)
      })
    },
    delHandleClick(row){
      delHandleClick(row.id).then(res=>{

        this.$message.success(res.msg)
        this.getConnectList()
      })
    },
    textHandleClick(row){
      textHandleClick(row).then(res=>{
        this.$message.success(res.msg)
      })
    },
    updHandleClick(row){
      console.log(row)
      this.connectDTO=row
      this.updDialogFormVisible=true
    },
    updsDialogFormVisible(){
      updConnectList(this.connectDTO).then(res=>{

        this.updDialogFormVisible=false

        this.$message.success(res.msg)
        this.getConnectList()
      })
    },
    insertConnectList(){
      this.addDialogFormVisible=true
    },
    addsDialogFormVisible(){
      insertConnectList(this.connectDTO).then(res=>{

        this.addDialogFormVisible=false

        this.$message.success(res.msg)
        this.getConnectList()
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getConnectList(){
      getConnectList(this.connectDTO).then(res=>{
         this.connect=res.data
      })
    },
    selectConnectList(){
      this.getConnectList();
    },

    mounted() {
      window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize);
    },
      handleResize() {
        // 根据窗口宽度更新表格宽度
        this.tableWidth = window.innerWidth < 768 ? '100%' : '80%';
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getConnectList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style scoped>

</style>
