<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"></group-list>
        </div>
        <div class="list-right p-20 border-box">
          <dm-sub-title text="配置标签" class="m-b-10">
            <div class="title">
              <span>员工活码</span>
              <span class="info-content cur-po"><i class="el-icon-info info-icon"></i>指标说明</span>
            </div>
          </dm-sub-title>
          <select-clerk @change="onChange"></select-clerk>
          <act-code-table></act-code-table>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import GroupList from './views/group-list.vue';
import ActCodeTable from './views/act-code-table.vue';
import SelectClerk from '../components/select-clerk/index.vue';
export default {
  name: 'staffActCode',
  components: {
    GroupList,
    ActCodeTable,
    SelectClerk
  },
  data() {
    return {};
  },
  methods: {
    onChange(data) {
      console.log(data);
    }
  }
};
</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;
  .info-content {
    color: #2f54eb;
    font-size: 14px;
  }
  .info-icon {
    margin-right: 8px;
  }
}
.cur-po {
  cursor: pointer;
}
</style>
