<template>
  <div class="ls-vertical process-config">
    <navbar  title="流程配置"  icon="set" :buttons="btns"   @clickbutton="clickbtn"> </navbar>
    <div class="ls-container" >
      <el-tabs type="border-card"  v-model="activeTab" @tab-click="doSwitchTab"   tab-position="left">
            <el-tab-pane label="流程定义" name="processConf">
                <ProcessDefConf  ref="processConfRef"></ProcessDefConf>
             </el-tab-pane >
            <el-tab-pane label="审批人配置" name="apploverConf">
              <ProcessApproverConf  ref="apploverConfRef"></ProcessApproverConf>
            </el-tab-pane>
      </el-tabs>
    </div><!-- lx-container -->
  </div>
</template>

<script>
  export default {
      name: 'process-list',
      components: {
          ProcessDefConf: () => import('./components/process-def-conf'),//流程定义
          ProcessApproverConf: () => import('./components/process-approver-conf')
      },
      mounted () {

      },
      methods: {

          //tabs 切换
          doSwitchTab(value) {
            this.activeName = value.paneName
          },

          // 导航栏按钮操作
          clickbtn (type) {
              switch (type) {
                  case 'refresh':
                      if(this.activeTab ==='processConf'){
                        this.$refs.processConfRef.doQuery(1);
                      } else {
                        this.$refs.apploverConfRef.doQuery(1);
                      }
                      break;
              }
          }
      },
      data () {
          return {
              activeTab: 'processConf',  //tabs name
              btns: [
                  {
                      title: '',
                      btnEvent: 'refresh',
                      size: '',
                      circle: 'circle',
                      type: 'refresh',
                      show: true,
                      icon: ''
                  }
              ],

          }
      },

  }
</script>

<style type="text/css" lang="scss">
.process-config {
   .process-btns {
      float: right;
      padding: 0 0 8px;
   }
  .ls-container {
    margin: 0;
    overflow: hidden;
    .el-tabs.el-tabs--left.el-tabs--border-card {
      height: 100%;
      display: flex;
      flex-direction: row!important;
      box-sizing: border-box;
    }
    .el-tabs .el-tabs__content {
      flex: 1;
      display: flex;
      padding: 15px ;
    }
    .el-tab-pane {
      flex: 1;
    }
    .el-tabs__item.is-left {
      border-bottom: 1px solid #E4E7ED;
    }
    .process-contain {
      flex: 1;
      display: flex;
      flex-direction: column;
      .lx-search-form {
        border-top: none;
        .search-style {
          margin: 2px 0 11px 0px !important;
          .el-col {    padding-left: 0!important;  }
          .query-btn{ margin:  0; }
        }
      }
      .table-wrap{
        flex: 1;
        overflow: hidden;
      }
    }

    .el-tabs--border-card>.el-tabs__header {
        background-color: #F5F7FA;
        border-bottom: 1px solid #E4E7ED;
        margin: 0;
        border-bottom-color: #008CEE !important;
    }
    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
        color: #fff !important;
        border-right-color: #DCDFE6;
        border-left-color: #DCDFE6;
        background: #008CEE;
    }
    .el-tabs__item {
        border-right-color: #DCDFE6 !important;
        border-left-color: #DCDFE6 !important;

    }
    .el-tabs--border-card>.el-tabs__header .el-tabs__item {
        border: 1px solid transparent;
        margin-top: -1px;
        color: #000000;
    }


    .ls-search-form {
      border-top: none;
      padding: 0;
      .el-col>label {
        min-width: 72px;
      }
      .query-btn{
        float: right;
        padding-right: 10px;
      }

    }


  }

}
</style>
