<template>
  <div ref="myBody" class="add-question flex">
    <div class="text flex">
      <div class="left">
        目前录入题目是第<span>{{ questionNextNum }}</span
        >道题
      </div>

      <div>
        <el-radio-group
          v-model="form.topicType"
          size="mini"
          @input="topicTypeChange"
        >
          <el-radio-button :label="1">单选</el-radio-button>
          <el-radio-button :label="2">多选</el-radio-button>
          <el-radio-button :label="3">判断</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <el-form class="form flex" ref="form" :model="form" label-width="auto">
      <!-- <div class="top flex"> -->
      <div>
        <el-form-item
          label="题目"
          prop="topicTitle"
          :rules="{
            required: true,
            message: '必须输入题目内容',
            trigger: 'blur',
          }"
        >
          <el-input
            type="textarea"
            placeholder="多行输入"
            resize="none"
            rows="4"
            v-model="form.topicTitle"
          >
          </el-input>
        </el-form-item>
      </div>

      <div class="bottom">
        <!-- <el-form-item label="选项1" prop="title">
            <el-input v-model="form.title" placeholder="请输入"></el-input>
          </el-form-item> -->
        <el-form-item
          v-for="(question, index) in form.questions"
          :label="'选项' + (index + 1)"
          :key="question.key"
          :prop="'questions.' + index + '.value'"
          :rules="{
            required: true,
            message: '第一项不能为空不能为空',
            trigger: 'blur',
          }"
        >
          <div class="add-select flex">
            <el-input
              type="textarea"
              placeholder="多行输入"
              style="flex: 1; margin-right: 10px"
              rows="2"
              v-model="question.value"
            ></el-input>
            <div class="flex algin-items">
              <el-button
                @click="rightAnswerClick(index)"
                class="right"
                :class="{
                  active: answerNum.indexOf(index) >= 0,
                }"
                icon="el-icon-check"
              >
                设为答案
              </el-button>
              <el-button
                size="mini"
                type="danger"
                v-if="index > 0 && form.topicType != 3"
                @click.prevent="removeDomain(question)"
                plain
                icon="el-icon-delete"
                >删除</el-button
              >
            </div>
          </div>
        </el-form-item>

        <!-- <el-form-item
          class="noAttr"
          :label="`选项${form.questions.length + 1}`"
          prop=""
        >
          <div class="add-select flex">
            <el-input
              type="textarea"
              placeholder="多行输入"
              resize="none"
              rows="2"
              v-model="addValue"
              style="flex: 1; margin-right: 10px"
            >
            </el-input>
            <div class="flex algin-items">
              <el-button
                @click="rightAnswerClick(form.questions.length)"
                class="right"
                :class="{ active: answerNum === form.questions.length }"
                icon="el-icon-check"
              >
                设为答案
              </el-button>

              <el-button
                size="mini"
                class="right1"
                @click.prevent="add(addValue)"
                icon="el-icon-plus"
                >新增</el-button
              >
            </div>
          </div>
        </el-form-item> -->
        <div style="padding-left: 55px" v-if="form.topicType != 3">
          <el-button
            size="mini"
            style="background: #0bab0c; color: #fff; border: 1px solid #0bab0c"
            @click.prevent="add(addValue)"
            >新增选项</el-button
          >
        </div>
      </div>
    </el-form>
  </div>
</template>

  <script>
export default {
  name: "AnswerLesson",
  data() {
    return {
      form: {
        topicType: 1,
        topicTitle: "",
        questions: [{ value: "" }, { value: "" }],
      },
      answerNum: [],
      addValue: "",
      // 录入的是第几道题
      questionNextNum: 1,
      courseName: "",
    };
  },

  created() {},
  methods: {
    topicTypeChange(num) {
      if (num == 1) {
        this.answerNum = [];
      } else if (num == 2) {
        this.answerNum = [];
        // this.form.questions=[{ value: "" }, { value: "" }];
      } else {
        this.answerNum = [];
        const form = {
          topicType: 3,
          topicTitle: this.form.topicTitle,
          questions: [{ value: "对" }, { value: "错" }],
        };
        this.form = form;
      }
    },
    //设置正确答案
    // rightAnswerClick(index) {
    //   this.answerNum = index;
    // },
    rightAnswerClick(index) {
      if (this.form.topicType === 2) {
        const ind = this.answerNum.indexOf(index);
        if (ind < 0) {
          this.answerNum.push(index);
        } else {
          this.answerNum.splice(ind, 1);
        }
        this.answerNum = this.answerNum.sort((a, b) => {
          return a - b;
        });
        console.log(this.answerNum);
      } else {
        // 判断跟单选模式差不多
        this.answerNum = [index];
      }
    },
    // 删除选项
    // removeDomain(question) {
    //   const index = this.form.questions.indexOf(question);
    //   // 如果是正确答案,就让正确答案清空
    //   if (this.answerNum === index) {
    //     this.answerNum = null;
    //   }
    //   if (index >= 0) {
    //     this.form.questions.splice(index, 1);
    //   }
    // },
    removeDomain(question) {
      const index = this.form.questions.indexOf(question);
      console.log(index);
      // 如果是正确答案,就让正确答案清空
      const ind = this.answerNum.indexOf(index);
      if (ind >= 0) {
        this.answerNum.splice(ind, 1);
      }
      // 如果是最后一位呗删除,那不用管,如果不是最后一位置,这一位删除之后,则这一位后面的所有数字都要-1;
      if (index != this.form.questions.length - 1) {
        this.answerNum = this.answerNum.map((item, i) => {
          if (item >= index) {
            return item - 1;
          } else {
            return item;
          }
        });
      }
      if (index >= 0) {
        this.form.questions.splice(index, 1);
      }
      console.log(this.answerNum);
      // console.log(this.form.questions)
    },
    // 新增选项
    add(addValue) {
      this.form.questions.push({ value: addValue });
    },
    reset() {
      this.form = {
        topicTitle: "",
        questions: [{ value: "" }, { value: "" }],
      };
      this.answerNum = null;
      this.addValue = "";
    },
  },
};
</script>
  <style lang="scss" scoped>
.add-question {
  width: 100%;
  height: 250px;
  // overflow: hidden;
  flex-direction: column;
  padding-bottom: 7px;
  margin-bottom: 20px;
  border-bottom: 1px solid #bbbbbb;
  justify-content: space-between;
  .form {
    flex: 1;
    flex-direction: column;
    height: 100%;
    .bottom {
      overflow-y: auto;
      height: 330px;
      box-sizing: border-box;

      .algin-items {
        align-items: center;
        width: 200px;
      }
      .right {
        display: inline-block;
        width: 133px;
        margin-right: 10px;
        line-height: initial;
        padding: 4px 0;
        border: 1px solid #0bab0c;
        color: #0bab0c;
        font-size: 12px;
        text-align: center;
        border-radius: 4px;
        box-sizing: border-box;
        cursor: pointer;
        &.active {
          background-color: #0bab0c;
          color: #ffffff;
        }
        &:hover {
          background-color: rgba(11, 171, 12, 0.5);
          color: #ffffff;
        }
      }
      .right1 {
        display: inline-block;
        margin-right: 10px;
        line-height: initial;
        width: 90px;
        border: 1px solid #0bab0c;
        color: #0bab0c;
        font-size: 12px;
        padding: 4px 0;
        text-align: center;
        border-radius: 4px;
        box-sizing: border-box;
        cursor: pointer;
        &.active {
          background-color: #0bab0c;
          color: #ffffff;
        }
        &:hover {
          background-color: rgba(11, 171, 12, 0.5);
          color: #ffffff;
        }
      }
    }
  }
  .text {
    margin-top: 13px;
    margin-bottom: 34px;
    justify-content: space-between;
    height: 28px;
    .left {
      line-height: 28px;
      color: #101010;
      font-size: 14px;
    }
    .right {
      width: 411px;
      line-height: 28px;
      background: #1d84ff;
      padding-right: 5px;
      color: #fff;
      text-align: right;
    }
  }
}
</style>