<template>
  <TrainChunkBox title="人员信息">
    <div class="user-info-box">
      <div class="info-item">
        <div class="info-label">操作人员：</div>
        <div class="info-content">
          <el-select
            style="width: 200px"
            size="mini"
            v-model="checkedUser"
            filterable
            @change="changeUser"
            placeholder="请需要统计的操作人员"
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">平均成绩：</div>
        <div class="info-content">
          {{
            userTrainInfo ? Math.round(userTrainInfo?.avgScore) : "请选择用户"
          }}
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">成绩排名：</div>
        <div class="info-content">
          {{
            userTrainInfo
              ? ` ${userTrainInfo.top} / ${userTrainInfo?.total}`
              : "请选择用户"
          }}
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">训练次数：</div>
        <div class="info-content">
          {{ userTrainInfo ? userTrainInfo?.trainTimes : "请选择用户" }}
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">综合评定：</div>
        <div class="info-content">
          {{ userTrainInfo ? userTrainInfo?.level : "请选择用户" }}
        </div>
      </div>
      <div class="info-item"></div>
    </div>
    <div slot="title-left">
      <el-button
        size="mini"
        class="self-button"
        @click="$html2Pdf('user-evaluation')"
        >导出</el-button
      >
      <el-button
        size="mini"
        class="self-button"
        @click="$html2Pdf('user-evaluation', true)"
        >打印</el-button
      >
    </div>
  </TrainChunkBox>
</template>

<script>
import { findUserByRoleApi } from '@/api/system/user'
import TrainChunkBox from '@/views/training/training/components/train-chunk-box.vue'
import { getUserTrainInfoApi } from '@/api/training/train-evealuation'
export default {
  components: { TrainChunkBox },
  data () {
    return {
      userList: [],
      checkedUser: null,
      userTrainInfo: null
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data } = await findUserByRoleApi(3)
      this.userList = data
      this.checkedUser = data[data.length - 1].id
      this.$emit('changUser', data[data.length - 1].id)
      this.getUserTrainInfo()
    },
    async getUserTrainInfo () {
      const { data } = await getUserTrainInfoApi(this.checkedUser)
      this.userTrainInfo = data
    },
    changeUser (id) {
      this.getUserTrainInfo()
      this.$emit('changUser', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info-box {
  height: 100%;
  width: 100%;
  padding: 10px;
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .info-label {
    font-size: 14px;
    font-weight: 700;
    min-width: 70px;
  }
  .info-content {
    flex: 1;
    font-weight: 700;
    font-size: 14px;
    color: #02a7f0;
  }
}
</style>
