<template>
  <section class="app-detail-wrap">
    <div class="border-box">
      <div class="list-body flex">
        <div class="list-left border-box">
          <group-list ref="groupListRef" @updateList="getCurrentGroupID"></group-list>
        </div>
        <div class="list-right p-20 border-box">
          <dm-sub-title text="配置标签" class="m-b-10">
            <div class="title">
              <span>员工活码</span>
              <el-button type="text" v-jumpLink:code><i class="iconfont-hb3 iconzhibiaoshuoming  m-r-6"></i>指标说明</el-button>
            </div>
          </dm-sub-title>
          <act-code-table :currentGroupId="currentGroupId"></act-code-table>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import GroupList from './views/group-list.vue';
import ActCodeTable from './views/act-code-table.vue';
export default {
  name: 'staffActCode',
  components: {
    GroupList,
    ActCodeTable
  },
  data() {
    return {
      currentGroupId: null
    };
  },
  methods: {
    getCurrentGroupID(CurGroupId) {
      this.currentGroupId = CurGroupId;
    }
  },
  watch: {
    currentGroupId: {
      handler: function(val) {
        console.log(val, 111);
        // if (val != null) {
        this.currentGroupId = val;
        // }
      },
      immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.p-20 {
  padding: 20px;
}
.mb-10 {
  margin-bottom: 10px;
}

.app-detail-wrap {
  height: 100%;
  background: #fff;
  .list-body {
    position: relative;
    width: 100%;
    .list-left {
      position: relative;
      width: 219px;
      min-width: 219px;
      max-width: 219px;
    }
    .list-right {
      position: relative;
      height: 500px;
      min-width: calc(100% - 300px);
      min-height: calc(100vh - 94px);
      border-left: 1px solid #e4e7ed;
    }
  }
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.cur-po {
  cursor: pointer;
}
</style>
