<template>
  <div class="personnel-container">
    <el-collapse v-model="activeNames" class="personnel-manage">
      <!-- Staff -->
      <el-collapse-item :title="$t('trials:staff:title:staff')" name="Staff">
        <Staff ref="staffList" />
      </el-collapse-item>
      <!-- Sites -->
      <el-collapse-item :title="$t('trials:siteAndStaff:title:site')" name="Sites">
        <Site ref="siteList" @refreshPage="refreshPage" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import Staff from './components/staff'
import Site from './components/site'
export default {
  name: 'PersonnelManage',
  components: { Staff, Site },
  data() {
    return {
      activeNames: ['Staff', 'Sites']
    }
  },
  methods: {
    refreshPage() {
      this.$refs['staffList'].handleReset()
      this.$refs['siteList'].handleReset()
    }
  }
}
</script>
<style lang="scss">
.personnel-container{
  width: 100%;
  height: 100%;
  display: flex;
  background: #fff;
  .personnel-manage{
    width: 100%;
    flex: 1;
    .el-collapse-item__header{
      background:#e5ecef;
      padding-left:10px;
    }

  }
}

</style>
