<template>
  <div class="app-container">
    <div class="list">
      <!-- <el-header>同步系统列表</el-header> -->
      <div class="list-title">同步系统列表</div>
      <el-tree :data="teeeData" ref="tree" :props="defaultProps" @node-click="handleNodeClick" highlight-current :current-node-key='currentKey' node-key="id"></el-tree>
    </div>
    <div class="list-table">
      <el-table :data="tableData" style="width: 100%" stripe fit highlight-current-row :header-cell-style="{'background-color':'#f5f5f5','text-align':'center'}" :cell-style="{'text-align':'center'}">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column prop="synType" label="类型" width="180">
        </el-table-column>
        <el-table-column prop="synResult" label="上次执行结果" width="180">
        </el-table-column>
        <el-table-column prop="synStatistics" label="监控统计">
        </el-table-column>
        <el-table-column prop="synTotal" label="共享数据条数">
        </el-table-column>
        <el-table-column prop="synSize" label="共享数据量大小">
        </el-table-column>
        <el-table-column prop="executionDate" label="执行时间">
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getRrcordList } from '@/api/dataSynchronism/index.js'
export default {
  data () {
    return {
      currentKey: 1,
      teeeData: [{
        id: 1,
        label: '购销合同系统',
      }, {
        id: 2,
        label: '业务管理信息系统',
      }, {
        id: 3,
        label: '惠三农系统',
      }, {
        id: 4,
        label: '资金日预算系统',
      }, {
        id: 5,
        label: '智慧监管系统',
      }, {
        id: 6,
        label: '一卡通系统',
      },],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tableData: [{
        synType: '数据上传',
        executionDate: '2016-05-02',
        synResult: '正常',
        synStatistics: '成功率100%',
        synTotal: '2782',
        synSize: '171GB',
      }],
      treeLabel: '',
      listQuery: {
        condition: "",
        page: 1,
        limit: 10,
        total: 10,
      },
    }
  },
  created () {
    this.currentKey = this.teeeData[0].id
    // this.$refs.tree.setCheckedKeys(this.defaultList)
    // 如果发现还是没有渲染,可能是dom树渲染的问题,通过this.$nextTick(() => {})解决

    this.$nextTick(() => {
      this.$refs.tree.setCurrentKey(this.currentKey)
      // this.$refs.tree.getCurrentNode()

    })

  },
  mounted () {
    this.getList()
  },
  methods: {
    handleNodeClick (data) {
      // console.log(data);
       let condition = {
        // system_type: this.$refs.tree.getCurrentNode().label,
        system_type: data.label,
        orgCode: JSON.parse(localStorage.getItem("userInfo")).orgCode,
      }
      let pageParam = {
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit,
        condition: JSON.stringify(condition)
      }
      getRrcordList(pageParam).then(res => {
        console.log(res, 'getRrcordList')
        if (res.code == 200) {
          this.tableData = res.data.records
          this.listQuery.limit = res.data.size
          this.listQuery.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getList () {
      let condition = {
        // system_type: this.$refs.tree.getCurrentNode().label,
        system_type: "购销合同系统",
        orgCode: JSON.parse(localStorage.getItem("userInfo")).orgCode,
      }
      let pageParam = {
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit,
        condition: JSON.stringify(condition)
      }
      getRrcordList(pageParam).then(res => {
        // console.log(res, 'getRrcordList')
        if (res.code == 200) {
          this.tableData = res.data.records
          this.listQuery.limit = res.data.size
          this.listQuery.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
      })
    },
    indexMethod (index) {
      return index * 2;
    },
    sizeChange (v) {
      this.listQuery.limit = v
      console.log(`每页 ${v} 条`);
      this.list.splice(v, this.list.length - 1)
    },
    pageChange (v) {
      this.listQuery.page = v
      console.log(`当前页: ${v}`);
    },

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.list {
  width: 20%;
  height: 100%;
  // padding: 0 10px;
  background: #fff;
  .list-title {
    color: #5283e7;
    font-size: 16px;
    font-weight: 600;
    padding-left: 10px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    background-color: #ccc;
    // border-left: 4px solid #5283e7;
  }
  .el-tree {
    padding: 20px 10px;
  }
}
.list-table {
  width: 79%;
  background-color: #fff;
  height: 100%;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
::v-deep .el-tree-node__content {
  height: 40px;
}
::v-deep .el-tree-node__label {
  font-size: 16px;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  // background: #f0f4ff;
  color: #5283e7;
  font-weight: bold;
}
</style>