<template>
  <div class="page">
    <div class="searchArea">
      <el-form ref="form"
               v-model="search"
               label-width="100px">
        <el-form-item label="系统名"
                      class="searchItem">
          <el-input v-model="search.systemCode"
                    placeholder="输入系统名"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="主表名"
                      prop="mainTableName"
                      class="searchItem">
          <el-select size="small"
                     v-model="search.mainTableName"
                     @change="changeMainTable"
                     placeholder="选择主表">
            <el-option v-for="item in mainTableList"
                       :key="item.tableId"
                       :label="item.mainTableName"
                       :value="item.tableId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主键字段名"
                      class="searchItem">
          <el-input v-model="search.mainField"
                    placeholder="输入主键字段名"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="从表名"
                      class="searchItem">
          <el-input v-model="search.foreignTableName"
                    placeholder="输入从表"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="外键字段名"
                      class="searchItem">
          <el-input v-model="search.foreignField"
                    placeholder="输入外键字段名"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item class="searchItem">
            <el-button type="primary"
                     @click="searchData"
                     size="small"
                     icon="el-icon-search">查询</el-button>
          <el-button type="primary"
                     @click="cancel"
                     size="small"
                     icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="labelManage" :style="isSearch">
      <div id="main">
        <div id="diagramContainer">
          <div id="table1"
               class="table">
            <div class="tableTitle">{{erList[0].tableName}}</div>
            <div id="1"
                 class="tableColumn">{{erList[0].tableField}}</div>
          </div>
          <div id="table2"
               class="table">
            <div class="tableTitle">{{erList[1].tableName}}</div>
            <div id="2"
                 class="tableColumn">{{erList[1].tableField}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'keyManagement',
  data () {
    return {
      tableLoading: false,
      search: {
        systemCode: '',
        mainTableName: '',
        mainField: '',
        foreignTableName: '',
        foreignField: ''
      },
      tableData: [
        {
          correlationName: '用户表',
          correlationDesc: 'fieldName',
          correlationClass: '员工ID',
          relation: '一对多',
          primaryTableName: '字符型',
          primaryKey: '是',
          slaveTableName: '是',
          foreignKey: '',
          isCreated: '啊啊',
          status: '有效'
        }
      ],
      mainTableList:{},
      yesOrNo: [{
        label: '是',
        value: true
      }, {
        label: '否',
        value: false
      }],
      arrID: 0,
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      erList: [{
        tableName: '',
        tableField: ''
      }, {
        tableName: '',
        tableField: ''
      }],
      isSearch: 'opacity: 0;'
    }
  },
  mounted () {
      this.getKeyManage()
  },
  methods: {
    // 获取&查询数据
    queryData: function (status, url) {
      let that = this,
        defaultParms = {
          pageSize: that.pageSize,
          pageNum: that.pageIndex
        },
        params = status || defaultParms,
        getUrl = url || 'pass/v1/mdtablerelates/';
      that.tableLoading = true;
      that.axios.get(getUrl, {
        params: params
      }
      ).then(function (response) {
        if (response) {
          let data = response.data;
          that.tableData = data.list;
          that.erList[0].tableName = data.list[0].mainTableName;
          that.erList[0].tableField = data.list[0].mainField;
          that.erList[1].tableName = data.list[0].mainTableName;
          that.erList[1].tableField = data.list[0].mainField;
          that.isSearch = 'opacity: 1';
          that.init();
        
        }
      }).catch(function () {
      });
    },
    getKeyManage(){
        let that = this,
        defaultParms = {
          pageSize: 10000,
          pageNum: 1
        },
        params = defaultParms,
        getUrl = 'pass/v1/mdtablerelates/';
      that.tableLoading = true;
      that.axios.get(getUrl, {
        params: params
      }
      ).then(function (response) {
        if (response) {
          let data = response.data;
          that.mainTableList = data.list;
        }
        that.tableLoading = false;
      }).catch(function () {
        that.tableLoading = false;
      });
    },
    // 搜索
    searchData () {
      let that = this,
        params = {
          pageSize: that.pageSize,
          pageNum: that.pageIndex,
          systemCode: that.search.systemCode,
          mainTableName: that.search.mainTableName,
          mainField: that.search.mainField,
          foreignTableName: that.search.foreignTableName,
          foreignField: that.search.foreignField
        };
    //   if(params.mainTableName || params.mainField || params.systemCode || params.foreignTableName || params.foreignField){
        that.searchStatus = true;
        that.pageIndex = 1;
        that.queryData(params);    
    //   }else {          
    //       that.$message.error('搜索参数不能为空')      
    //   }      
    },
    // 取消
    cancel () { },
    // 分页方法
    handleCurrentChange (pageIndex) {
      this.pageIndex = pageIndex
      this.getTableData();
    },
    handleSizeChange (pageSize) {
      this.pageIndex = 1
      this.pageSize = pageSize;
      this.getTableData()
    },
    // 刷新
    refreshAll () {

    },
    refreshChoice () {

    },
    // 编辑 新增 删除 查看 前往其他页面
    addRow () {
      this.$router.push({ name: 'keyManagementDetail', params: { code: 'add' } })
    },
    editRow () {
      this.$router.push({ name: 'keyManagementDetail', params: { code: 'edit' } })
    },
    deletRow () { },
    showRow () {
      this.$router.push({ name: 'keyManagementDetail', params: { code: 'show' } })
    },
    goPage () { },
    init (row) {
      jsPlumb.ready(function () {
        var jsPlumb = window.jsPlumb;
        var j = jsPlumb.getInstance();
        j.addEndpoint($('#table1 .tableColumn').eq(0), { uuid: 1, anchor: 'Right', isSource: true });
        j.addEndpoint($('#table2 .tableColumn').eq(0), { uuid: 2, anchor: 'Left', isTarget: true });
        j.addEndpoint($('#table3 .tableColumn').eq(0), { uuid: 3, anchor: 'Right', isTarget: true });
        j.addEndpoint($('#table4 .tableColumn').eq(0), { uuid: 4, anchor: 'Left', isTarget: true });

        j.connect({
          uuids: [1, 2],
          endpoint: 'Dot',
          anchor: 'Continuous',
          connector: 'Straight',
          paintStyle: { stroke: 'lightblue', strokeWidth: 1 },
          endpointStyle: { fill: 'lightblue', outlineStroke: 'lightblue', outlineWidth: 1 },
          overlays: [['Custom', { width: 12, length: 12, location: 0.4 }]]
        })
      });
    },
    changeMainTable(key){
        let data = this.mainTableList;
        for (let i = 0; i < this.mainTableList.length; i++){
            if(this.mainTableList[i].tableId === key){
                this.search.mainTableName = this.mainTableList[i].mainTableName;
                this.search.mainField = this.mainTableList[i].mainField;
                this.search.foreignTableName = this.mainTableList[i].foreignTableName;
                this.search.foreignField = this.mainTableList[i].foreignField;
            }
        }
    }
  }
}
</script>

<style scoped>
.page {
  padding: 10px;
}
header {
  width: 100%;
  height: 50px;
  background: rgb(248, 248, 248);
  padding-left: 10px;
  font-size: 15px;
  color: #000;
  line-height: 50px;
  margin-bottom: 10px;
}
/* 搜索 */
.searchArea {
  padding: 0px 0px 10px 0px;
  border-bottom: solid 1px rgb(68, 68, 68);
  text-align: left;
}
.searchItem {
  width: 30%;
  display: inline-block;
}
.searchItem .el-input, .searchItem .el-select {
  width: 100%;
}
.searchButton {
  width: 100%;
  text-align: center;
}
.searchButton button {
  display: inline-block;
}
/* 控制条 */
.controlBar {
  padding: 0px 10px 10px 10px;
  border-bottom: solid 1px rgb(68, 68, 68);
  text-align: left;
  margin-top: 10px;
}
.controlBar ul li {
  list-style: none;
  width: 60px;
  height: 40px;
  cursor: pointer;
  display: inline-block;
  margin-right: 5px;
}
.controlBar ul li:hover {
  color: #70baf2;
}
.controlBar ul li i {
  width: 60px;
  height: 20px;
  font-size: 20px;
  text-align: center;
}
.controlBar ul li span {
  display: inline-block;
  width: 60px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.table {
  margin-top: 10px;
}
/* DEMO */
#labelManage {
  padding: 10px;
  text-align: center;
  position: relative;
}
#diagramContainer {
  width: 100%;
  height: 400px;
}
.table {
  border: 1px solid #888888;
  width: 200px;
  float: left;
  margin-right: 100px;
}
.table div {
  border-bottom: 1px solid #888;
  height: 60px;
  line-height: 30px;
  text-align: center;
}
.item {
  width: 100px;
  height: 100px;
  border: 1px solid #344545;
}
.tableTitle {
  background: #344545;
  color: #fff;
  height: 36px !important;
  line-height: 36px !important;
}
</style>
