<template>
  <div class="judg-rule-setting">
    <div class="selft-form-item">
      <div class="form-item-label">评分形式:</div>
      <div class="form-item-content">
        <el-select v-model="trainRules.judgmentShape" placeholder="请选择">
          <el-option key="1" label="自动评分" :value="1"> </el-option>
          <el-option key="2" label="人工评分" :value="2"> </el-option>
        </el-select>
      </div>
    </div>
    <div class="selft-form-item-height">
      <div class="form-item-label">
        评判规则:
        <div style="font-size: 12px; color: #8a8a8a; text-algin: right">
          (自动评分)
        </div>
      </div>
      <div class="form-item-content">
        <div class="rule-item">
          <span class="form-item-label">组员</span>= 总分 - 总分 /
          个人操作总步骤数 × 一般性错误步骤数×
          <el-input-number
            v-model="trainRules.automaticScoring[1].percentage"
            size="mini"
            controls-position="right"
            :min="1"
            :max="10"
          ></el-input-number>
        </div>
        <div>
          <span class="form-item-label">组长</span>=
          <template
            v-for="(rule, index) in trainRules.automaticScoring[0]
              .percentageList"
          >
            <span :key="index"
              >组员{{ index + 1 }}成绩×
              <el-input-number
                v-model="rule.percentage"
                :step="0.05"
                :precision="2"
                size="mini"
                controls-position="right"
                :min="0"
                :max="1"
              >
              </el-input-number>
              <span
                v-if="
                  index <
                  trainRules.automaticScoring[0].percentageList.length - 1
                "
                style="padding: 0 5px"
              >
                +
              </span></span
            >
          </template>
        </div>
      </div>
    </div>
    <div class="selft-form-item" v-if="trainRules.judgmentShape == 2">
      <div class="form-item-label">
        评分形式:
        <div style="font-size: 12px; color: #8a8a8a; text-algin: right">
          (人工评分)
        </div>
      </div>

      <div class="form-item-content">
        <span class="form-item-label">各类型组员</span>= 组员自动评分成绩 ×
        <el-input-number
          v-model="trainRules.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
            v-model="trainRules.manualScoring.percentage"
            :step="0.05"
            :precision="2"
            size="mini"
            controls-position="right"
            :min="0"
            :max="1"
          >
          </el-input-number
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    trainRules: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.judg-rule-setting {
  .selft-form-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .selft-form-item-height {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    ::v-deep .el-textarea__inner {
      height: 100%;
    }
    .form-item-label {
      margin-top: 5px;
    }
  }
  .form-item-content {
    width: 100%;
  }
  .form-item-label {
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    text-align: left;
    margin-right: 10px;
  }
  .rule-item {
    margin-bottom: 20px;
  }
}
</style>
