<template>
  <div class="proficiency-edit">
    <el-form ref="modalFormComp" label-width="180px">
      <el-form-item
        v-for="(item, ind) in modalForm"
        :key="ind"
        :label="`${item.title}：`"
      >
        <div
          :class="[
            'rate-input',
            { 'rate-input-offset-left': ind === modalForm.length - 1 }
          ]"
        >
          <el-input-number
            v-if="ind !== modalForm.length - 1"
            v-model="item.startRate"
            placeholder="请输入"
            :min="0"
            :max="100"
            :step="1"
            step-strictly
            size="small"
            :controls="false"
            @change="rateChange"
          ></el-input-number>
          <span v-if="ind !== modalForm.length - 1">≤</span>
          <span>个人得分率</span>
          <span v-if="ind !== 0">＜</span>
          <el-input-number
            v-if="ind !== 0"
            v-model="item.endRate"
            placeholder="请输入"
            :min="0"
            :max="100"
            :step="1"
            step-strictly
            size="small"
            :controls="false"
            @change="rateChange"
          ></el-input-number>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const initRateSet = [
  {
    level: "A",
    title: "熟练掌握",
    startRate: null,
    endRate: 100
  },
  {
    level: "B",
    title: "较好掌握",
    startRate: null,
    endRate: null
  },
  {
    level: "C",
    title: "基本掌握",
    startRate: null,
    endRate: null
  },
  {
    level: "D",
    title: "部分掌握",
    startRate: null,
    endRate: null
  },
  {
    level: "E",
    title: "没有掌握，需从头再学",
    startRate: 0,
    endRate: null
  }
];

export default {
  name: "proficiency-edit",
  props: {
    rates: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      modalForm: [...initRateSet]
    };
  },
  mounted() {
    const defRates = this.rates.length ? this.rates : initRateSet;
    this.modalForm = defRates.map(item => {
      return { ...item };
    });
  },
  methods: {
    rateChange() {
      this.$emit("data-change", this.modalForm);
    }
  }
};
</script>
