<template>
  <div class="user-evaluation" id="user-evaluation">
    <div>
      <UserInfo @changUser="changUser" />
      <UserPostion :userId="userId"></UserPostion>
      <UserTrainDuration :userId="userId" />
    </div>
    <div><UserSubjectGrade :userId="userId"/><UserPositionGrade :userId="userId"/></div>
    <div><UserTrainSubjectGrade :userId="userId"/><UserOpeartionResult  :userId="userId"/></div>
  </div>
</template>

<script>
// import SearchInput from '@/components/widget/QueryInput.vue'
import UserInfo from './components/UserInfo.vue'
import UserPostion from './components/UserPostion.vue'
import UserTrainDuration from './components/UserTrainDuraion.vue'
import UserSubjectGrade from './components/UserSubjectGrade.vue'
import UserPositionGrade from './components/UserPositionGrade.vue'
import UserTrainSubjectGrade from './components/UserTrainSubjectGrade.vue'
import UserOpeartionResult from './components/UserOpeartionResult.vue'
export default {
  components: {
    UserInfo,
    UserPostion,
    UserTrainDuration,
    UserSubjectGrade,
    UserPositionGrade,
    UserTrainSubjectGrade,
    UserOpeartionResult
  },
  data () {
    return {
      userId: null
    }
  },
  methods: {
    changUser (id) {
      this.userId = id
    }
  }
}
</script>

<style lang="scss" scoped>
.user-evaluation {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  > :first-child {
    max-width: 350px;
  }
  > div {
    flex: 1;
    height: 100%;
    max-width: 630px;
    display: flex;
    flex-direction: column;
  }
}
</style>
