<template>
    <ifbp-page>
        <!-- title -->
        <ifbp-breadcrumb name="流程监控"></ifbp-breadcrumb>  
        <!-- 按钮，搜索区域 -->
        <ifbp-button-area>
            <el-button type="primary" class="fl">新增</el-button>
        </ifbp-button-area>
        <!-- 主体区域 -->
        <ifbp-main-area type="list">
            <!-- 树结构 -->
            <el-tree
              class="filter-tree leftSider fl"
              :data="treeData"
              :props="defaultProps"
              default-expand-all
              :highlight-current="true"
              :filter-node-method="filterNode"
              ref="tree2"
              @current-change="handleAppChange">
            </el-tree>
            <!-- table区域 -->
            <el-table
                class="process-table"
                :data="tableTreeData"
                :table-tree="true"
                :highlight-current-row="true"
                max-height="600"
                @row-click="handleTableTreeRowClick">
                <el-table-column prop="orgcode" label="状态"></el-table-column>
                <el-table-column prop="orgname" label="发起人"></el-table-column>
                <el-table-column prop="pid_name" label="流程实例名称"></el-table-column>
                <el-table-column prop="enablestate" label="启用时间"></el-table-column>
                <el-table-column prop="orgcode" label="结束时间"></el-table-column>
                <el-table-column>
                    <template scope="scope">
                        <el-tooltip effect="dark" placement="top" content="查看/修改">
                            <i class="el-icon-search" @click="handleCheck(scope)"></i>
                        </el-tooltip>
                        <el-tooltip effect="dark" placement="top" content="删除">
                            <i class="el-icon-delete" @click="handleDelete(scope)"></i>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页部分 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalElements">
            </el-pagination>
        </ifbp-main-area>
    </ifbp-page>
</template>

<script>
export default {
  data() {
    return {
        //树结构，默认值
        treeData: [],
        defaultProps: {
            children: "children",
            label: "name"
        },

        //table默认值
        tableTreeData:[],

        //分页默认值
        totalElements: 0,
        currentPage: 0,
        size: 10,

    };
  },
  methods: {
    //左侧树
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //当前选中节点变化时触发的事件
    handleAppChange(value) {
        this.$http({
          url: '/ifbp-app-attach/attach/attachattachmentstate/findByBusiCode.ilf?busiCode=' + value.code +'&busiName=' + value.name
        }).then((res) => {
            console.log("res-----",res)
          if(res.data.success) {
            // 成功时的逻辑

          } else {
            this.$message.error('没有查找到数据！');
          }
        }).catch(() => {
          this.$message.error('请求数据出错！');
        });
    },
    // 获取树数据的方法
    getTree(){
        this.$http({
          url: '/ifbp-app-sm/buz/display'
        }).then((res) => {
          if(res.data.success) {
            this.treeData = res.data.data;
          } else {
            this.$message.error('请求失败！');
          }
        }).catch(() => {
          this.$message.error('请求出错！');
        });
    },
    //点击table某一行获取数据的事件
    handleTableTreeRowClick(){

    },
    //每页显示的条数
    handleSizeChange(val){

    },
    //当前页
    handleCurrentChange(val){

    },
  },
  created() {
    //获取树数据
    this.getTree();
  }
};
</script>

<style scoped>
.leftSider {
  width: 304px;
  background: #fff;
  min-height: 414px;
}
.process-table{
    margin-left: 320px;
}
</style>
