<template>
  <SelfDialog
    title="学员评分"
    :visible="trainInfo?.isShowCalculate"
    :showClose="false"
    :actionBarOption="{ noCencel: true }"
    @onConfirm="$emit('saveTrainGrade')"
    width="50%"
  >
    <el-tabs tab-position="left" style="height: 200px">
      <el-tab-pane
        :label="`第 ${groupId} 组`"
        v-for="groupId in groupIdList"
        :key="groupId"
      >
        <div style="height: 100%; overflow: auto; padding: 5px">
          <div class="form-item-content">
            <span class="form-item-label">各类型组员</span>= 组员自动评分成绩 ×
            <el-input-number
              disabled
              v-model="trainInfo.rule.manualScoring.percentage"
              :step="0.05"
              :precision="2"
              size="mini"
              controls-position="right"
              :min="0"
              :max="1"
            >
            </el-input-number>
            + 自动评分范围
            <span style="border: 1px solid #ccc; padding: 10px"
              >100 - 组员自动评分成绩 ×
              <el-input-number
                disabled
                v-model="trainInfo.rule.manualScoring.percentage"
                :step="0.05"
                :precision="2"
                size="mini"
                controls-position="right"
                :min="0"
                :max="1"
              >
              </el-input-number
            ></span>
          </div>
          <div
            v-for="user in groupInfo[groupId].usersArray"
            :key="user.id"
            class="user-list-item"
          >
            <span class="user-item-name user-item-device-name"> 设备：</span>
            <el-input
              v-model="user.deviceInfo.deviceInfo.name"
              disabled
              style="width: 100px; margin: 0 15px 0 0"
              size="mini"
            ></el-input>
            <span class="user-item-name user-item-user-name">用户：</span>
            <el-input
              v-model="user.name"
              disabled
              style="width: 100px; margin: 0 15px 0 0"
              size="mini"
            ></el-input>
            <span class="user-item-name user-item-user-name">规则：</span>
            <el-select
              v-model="user.deviceInfo.rule"
              disabled
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in trainInfo.rule.automaticScoring"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <span style="margin: 0 10px; font-weight: bold">分数：</span>
            <span
              style="margin-right: 10px; width: 30px; display: inline-block"
              >{{ user.stepScore + (user.score || 0) }}</span
            >

            <span
              style="
                border: 1px solid #e6e6e6;
                display: inline-block;
                padding: 3px;
              "
            >
              {{ user.stepScore }} +
              <el-input-number
                v-model="user.score"
                size="mini"
                controls-position="right"
                @change="handleChange"
                :min="0"
                :max="100 - user.stepScore"
              ></el-input-number>
            </span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </SelfDialog>
</template>

<script>
import SelfDialog from '@/components/layout/DialogLayout.vue'
export default {
  components: { SelfDialog },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    groupIdList: {
      type: Array,
      default: () => []
    },
    groupInfo: {
      type: Object,
      default: () => {}
    },
    trainInfo: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style lang="scss" scoped>
.user-list-item {
  margin-bottom: 5px;
}
.user-item-name {
  font-weight: bold;
  display: inline-block;
}
.form-item-content {
  margin-bottom: 20px;
}
.form-item-label {
  font-weight: bold;
}
</style>
