<template>
  <div class="creatpaper">
    <Dec :content="content" />
    <div class="add">
      <p class="footer">
        <el-button v-show="active==1" type="primary" @click="next">下一步</el-button>
        <el-button v-show="active==1" type="danger" @click="close">取消</el-button>

        <el-button v-show="active==2" type="primary" @click="prev">上一步</el-button>
        <el-button v-show="active==2" type="primary" @click="next">发布</el-button>
        <el-button v-show="active==2" type="primary" @click="close">取消</el-button>
        <el-button v-show="active==2" type="primary" @click="save">存为草稿</el-button>

        <el-button v-show="active==3" type="primary" @click="close">返回列表页</el-button>
      </p>
      <div style="height:calc(100% - 40px);overflow:auto;">
        <el-steps :active="active" style="width:60%;margin:0 auto;">
          <el-step title="基本信息" />
          <el-step title="创建答题卡" />
          <el-step title="完成发布" />
        </el-steps>
        <div v-show="active==1">
          <el-form ref="paper" :model="paper" label-width="100px" style="margin-top:30px;">
            <el-form-item label="试卷名称：">
              <el-input v-model="paper.name" style="width:500px;" placeholder="请输入试卷名称" maxlength="30" show-word-limit />
            </el-form-item>
            <el-form-item label="试卷分类：">
              <el-select v-model="paper.type" placeholder="请选择">
                <el-option label="月考" value="month" />
                <el-option label="周考" value="week" />
              </el-select>
            </el-form-item>
            <el-form-item label="可视权限：">
              <el-select v-model="paper.permission" placeholder="请选择">
                <el-option label="月考" value="month" />
                <el-option label="周考" value="week" />
              </el-select>
            </el-form-item>
            <el-form-item label="科目：">
              <el-select v-model="paper.subject" placeholder="请选择">
                <el-option label="语文" value="yw" />
                <el-option label="数学" value="sx" />
              </el-select>
            </el-form-item>
            <el-form-item label="年级：">
              <el-select v-model="paper.schoollength" placeholder="请选择">
                <el-option label="小学" value="xx" />
                <el-option label="中学" value="zx" />
              </el-select>
              <el-select v-model="paper.grade" placeholder="请选择">
                <el-option label="一年级" value="one" />
                <el-option label="二年级" value="two" />
              </el-select>
            </el-form-item>
            <el-form-item label="考试时长：">
              <el-input v-model="paper.timelength" style="width:500px;" placeholder="" />
            </el-form-item>
          </el-form>
        </div>
        <div v-show="active==2">
          <p style="text-align:center;color:#888;">无需编辑题目，添加选项及答案即可快速组卷，考生通过纸质试卷或其他载体异步答题</p>
          <div class="leftbox"><span>选择题型：</span></div>
          <div class="typebox">
            <el-row>
              <el-col :span="8">
                <p>题型</p>
                <el-select v-model="qtype" @change="selctChange">
                  <el-option label="单选" value="1" />
                  <el-option label="多选" value="2" />
                  <el-option label="判断" value="3" />
                  <el-option label="数字" value="4" />
                  <el-option label="排序" value="5" />
                </el-select>
              </el-col>
              <el-col :span="8">
                <div v-if="'12'.includes(qtype)">
                  <p>选项个数</p>
                  <el-input-number v-model="qnum" :min="1" :max="10" label="描述文字" @change="numFun" />
                </div>
              </el-col>
              <el-col :span="8">
                <p>单题分值</p>
                <el-input-number v-model="score" :min="1" :max="100" label="描述文字" @change="scoreFun" />
              </el-col>
            </el-row>
          </div>
          <div class="leftbox" style="padding-top:10px;"><span>题目名称：</span></div>
          <div class="typebox" style="padding-top:10px;">
            <el-input v-model="qtitle" placeholder="填写题目名称；例如：一、单选题" style="width:500px;" />
          </div>
          <div class="leftbox" style="padding-top:10px;"><span>添加答案：</span></div>
          <div class="typebox">
            <p v-if="qtype=='1'" style="margin-top:10px;">直接输入单题答案添加题目，例（若添加10道题）：“ABCCD DCAAA”</p>
            <p v-if="qtype=='2'" style="margin-top:10px;">题目之间用空格隔开，例（若添加5道题）：“ABCD AB ACD ABD ABCD”</p>
            <p v-if="qtype=='3'" style="margin-top:10px;">请点击“✔”或者“✘”添加答案</p>
            <p v-if="qtype=='4'" style="margin-top:10px;">题目之间用空格隔开，例如（若添加5道题）：“2.4 33 0 1 12”</p>
            <p v-if="qtype=='5'" style="margin-top:10px;">题目之间用空格隔开，例如（若添加2道题）：“12345 53421”</p>
            <el-button v-if="qtype=='3'" type="primary" class="el-icon-check" @click="checktrue" />
            <el-button v-if="qtype=='3'" type="primary" class="el-icon-close" @click="checkfail" />
            <el-input v-model="aswString" placeholder="请输入内容" style="width:500px;" />
            <el-button type="primary" @click="creatPaper">添加</el-button>
          </div>
          <div style="clear:both" />
          <div class="paperbox">
            <h2 class="center">答题卡</h2>
            <p class="center">卷面总分：{{ totalscore }}分</p>
            <div v-for="(item,index) in paperdata" :key="index" class="bigq">
              <!--单选题-->
              <div v-if="item.type==1">
                <h2>{{ item.title }}<span class="qtotal">共{{ item.total }}分</span></h2>
                <el-row>
                  <el-col :span="2">题号</el-col>
                  <el-col :span="2">分数</el-col>
                  <el-col :span="20">选项及答案</el-col>
                </el-row>
                <el-row v-for="(list,index1) in item.info" :key="index1" style="margin-top:10px;">
                  <el-col :span="2" style="line-height:40px;">{{ list.rank }}</el-col>
                  <el-col :span="2"><el-input v-model="list.score" maxlength="2" style="width:50px;" @change="reoder" /></el-col>
                  <el-col :span="20">
                    <li v-for="count in list.num" :key="count" :class="list.right == String.fromCharCode(64 + parseInt(count))?'right':''" class="option" @click="checkoption(index,index1,count)">{{ String.fromCharCode(64 + parseInt(count)) }}</li>

                    <el-button type="primary" icon="el-icon-plus" circle @click="addOption(index,index1)" />
                    <el-button type="danger" icon="el-icon-delete" circle @click="delOption(index,index1)" />
                  </el-col>
                </el-row>
                <p style="text-align:center">
                  <el-button type="primary" @click="addQue(index)">添加单选题目</el-button>
                </p>
              </div>
              <!--多选题-->
              <div v-if="item.type==2">
                <h2>{{ item.title }}<span class="qtotal">共{{ item.total }}分</span></h2>
                <el-row>
                  <el-col :span="2">题号</el-col>
                  <el-col :span="2">分数</el-col>
                  <el-col :span="20">选项及答案</el-col>
                </el-row>
                <el-row v-for="(list,index1) in item.info" :key="index1" style="margin-top:10px;">
                  <el-col :span="2" style="line-height:40px;">{{ list.rank }}</el-col>
                  <el-col :span="2"><el-input v-model="list.score" maxlength="2" style="width:50px;" @change="reoder" /></el-col>
                  <el-col :span="20">
                    <li v-for="count in list.num" :key="count" :class="list.right.includes( String.fromCharCode(64 + parseInt(count)))?'right':''" class="option" @click="checkoption2(index,index1,count)">{{ String.fromCharCode(64 + parseInt(count)) }}</li>

                    <el-button type="primary" icon="el-icon-plus" circle @click="addOption(index,index1)" />
                    <el-button type="danger" icon="el-icon-delete" circle @click="delOption(index,index1)" />
                  </el-col>
                </el-row>
                <p style="text-align:center">
                  <el-button type="primary" @click="addQue(index)">添加多选题目</el-button>
                </p>
              </div>
              <!--判断题-->
              <div v-if="item.type==3">
                <h2>{{ item.title }}<span class="qtotal">共{{ item.total }}分</span></h2>
                <el-row>
                  <el-col :span="2">题号</el-col>
                  <el-col :span="2">分数</el-col>
                  <el-col :span="20">选项及答案</el-col>
                </el-row>
                <el-row v-for="(list,index1) in item.info" :key="index1" style="margin-top:10px;">
                  <el-col :span="2" style="line-height:40px;">{{ list.rank }}</el-col>
                  <el-col :span="2"><el-input v-model="list.score" maxlength="2" style="width:50px;" @change="reoder" /></el-col>
                  <el-col :span="20">
                    <li :class="list.right=='✔'?'right':''" class="option" @click="checkoption3(index,index1,1)">✔</li>
                    <li :class="list.right=='✘'?'right':''" class="option" @click="checkoption3(index,index1,2)">✘</li>
                    <el-button type="danger" icon="el-icon-delete" circle @click="delOption(index,index1)" />
                  </el-col>
                </el-row>
                <p style="text-align:center">
                  <el-button type="primary" @click="addQue3(index)">添加判断题目</el-button>
                </p>
              </div>
              <!--数字题-->
              <div v-if="item.type==4">
                <h2>{{ item.title }}<span class="qtotal">共{{ item.total }}分</span></h2>
                <el-row>
                  <el-col :span="2">题号</el-col>
                  <el-col :span="2">分数</el-col>
                  <el-col :span="20">选项及答案</el-col>
                </el-row>
                <el-row v-for="(list,index1) in item.info" :key="index1" style="margin-top:10px;">
                  <el-col :span="2" style="line-height:40px;">{{ list.rank }}</el-col>
                  <el-col :span="2"><el-input v-model="list.score" maxlength="2" style="width:50px;" @change="reoder" /></el-col>
                  <el-col :span="20">
                    <el-input v-model="list.right" type="primary" style="width:100px;" />
                    <el-button type="danger" icon="el-icon-delete" circle @click="delOption(index,index1)" />
                  </el-col>
                </el-row>
                <p style="text-align:center">
                  <el-button type="primary" @click="addQue3(index)">添加数字题目</el-button>
                </p>
              </div>
              <!--排序题-->
              <div v-if="item.type==5">
                <h2>{{ item.title }}<span class="qtotal">共{{ item.total }}分</span></h2>
                <el-row>
                  <el-col :span="2">题号</el-col>
                  <el-col :span="2">分数</el-col>
                  <el-col :span="20">选项及答案</el-col>
                </el-row>
                <el-row v-for="(list,index1) in item.info" :key="index1" style="margin-top:10px;">
                  <el-col :span="2" style="line-height:40px;">{{ list.rank }}</el-col>
                  <el-col :span="2"><el-input v-model="list.score" maxlength="2" style="width:50px;" @change="reoder" /></el-col>
                  <el-col :span="20">
                    <el-input v-model="list.right" type="primary" style="width:200px;" />
                    <el-button type="danger" icon="el-icon-delete" circle @click="delOption(index,index1)" />
                  </el-col>
                </el-row>
                <p style="text-align:center">
                  <el-button type="primary" @click="addQue3(index)">添加排序题目</el-button>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div v-show="active==3">
          789
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Dec from '@/components/Dec'
export default {
  name: 'Creatpaper',
  components: {
    Dec
  },
  data() {
    return {
      content: '',
      active: 1,
      num: '',
      qtype: '1',
      qnum: '',
      qtitle: '',
      aswString: '',
      score: '',
      value: '1',
      totalscore: 0,
      paper: {
        name: '',
        type: '',
        promission: '',
        subject: '',
        grade: '',
        schoollength: '',
        testtime: ''
      },
      paperdata: [
      ]
    }
  },
  created() {
    this.reoder()
  },
  methods: {
    next() {
      this.active++
      if (this.active > 3) {
        return
      }
    },
    close() {
      this.$router.push('/testpaper/test')
    },
    prev() {
      this.active--
      if (this.active < 1) {
        return
      }
    },
    save() {
      this.$router.push('/testpaper/test')
    },
    handleChange() {

    },
    numFun() {

    },
    scoreFun() {

    },
    checkoption(bqindex, smindex, opindex) {
      this.paperdata[bqindex].info[smindex].right = String.fromCharCode(64 + parseInt(opindex))
    },
    checkoption2(bqindex, smindex, opindex) {
      console.log(!this.paperdata[bqindex].info[smindex].right.includes(String.fromCharCode(64 + parseInt(opindex))))
      if (!this.paperdata[bqindex].info[smindex].right.includes(String.fromCharCode(64 + parseInt(opindex)))) {
        this.paperdata[bqindex].info[smindex].right += String.fromCharCode(64 + parseInt(opindex))
      } else {
        this.paperdata[bqindex].info[smindex].right = this.paperdata[bqindex].info[smindex].right.replace(String.fromCharCode(64 + parseInt(opindex)), '')
      }
    },
    checkoption3(bqindex, smindex, opindex) {
      this.paperdata[bqindex].info[smindex].right = opindex === 1 ? '✔' : '✘'
    },
    addOption(bqindex, smindex) {
      if (this.paperdata[bqindex].info[smindex].num < 10) { this.paperdata[bqindex].info[smindex].num++ }
    },
    delOption(bqindex, smindex) {
      this.paperdata[bqindex].info.splice(smindex, 1)
      for (let i = 0; i < this.paperdata[bqindex].info.length; i++) {
        this.paperdata[bqindex].info[i].rank = i + 1
      }
      this.reoder()
      console.log(this.paperdata)
    },
    addQue(bqindex) {
      this.paperdata[bqindex].info.push({
        rank: this.paperdata[bqindex].info.length + 1,
        score: 1,
        num: 4,
        right: ''
      })
      this.reoder()
    },
    addQue3(bqindex) {
      this.paperdata[bqindex].info.push({
        rank: this.paperdata[bqindex].info.length + 1,
        score: 1,
        right: ''
      })
      this.reoder()
    },
    checktrue() {
      this.aswString += '✔'
    },
    checkfail() {
      this.aswString += '✘'
    },
    reoder() {
      let index = 0
      let totalscore = 0

      for (let i = 0; i < this.paperdata.length; i++) {
        let qtotal = 0
        for (let j = 0; j < this.paperdata[i].info.length; j++) {
          index++
          totalscore += parseFloat(this.paperdata[i].info[j].score)
          qtotal += parseFloat(this.paperdata[i].info[j].score)
          this.totalscore = totalscore
          this.paperdata[i].info[j].rank = index
        }
        this.paperdata[i].total = qtotal
      }
    },
    selctChange(value) {
      console.log(value)
    },
    creatPaper() {
      let paramdata = {}
      let qlength = []
      const aswarr = []
      switch (this.qtype) {
        case '1':
          qlength = this.aswString.split('')
          for (let i = 0; i < qlength.length; i++) {
            aswarr.push({
              rank: 1,
              score: this.score,
              num: this.qnum,
              right: qlength[i]
            })
          }
          paramdata = {
            title: this.qtitle,
            type: 1,
            total: qlength.length * this.score,
            num: this.qnum,
            info: aswarr
          }
          this.paperdata.push(paramdata)
          this.score = 1
          this.qnum = 1
          this.aswString = ''
          this.qtitle = ''
          this.qtype = '1'
          this.reoder()
          break
        case '2':
          qlength = this.aswString.split(' ')
          for (let i = 0; i < qlength.length; i++) {
            aswarr.push({
              rank: 1,
              score: this.score,
              num: this.qnum,
              right: qlength[i]
            })
          }
          paramdata = {
            title: this.qtitle,
            type: 2,
            total: qlength.length * this.score,
            num: this.qnum,
            info: aswarr
          }
          this.paperdata.push(paramdata)
          this.score = 1
          this.qnum = 1
          this.aswString = ''
          this.qtitle = ''
          this.qtype = '1'
          this.reoder()
          break
        case '3':qlength = this.aswString.split('')
          for (let i = 0; i < qlength.length; i++) {
            aswarr.push({
              rank: 1,
              score: this.score,
              num: this.qnum,
              right: qlength[i]
            })
          }
          paramdata = {
            title: this.qtitle,
            type: 3,
            total: qlength.length * this.score,
            info: aswarr
          }
          this.paperdata.push(paramdata)
          this.score = 1
          this.aswString = ''
          this.qtitle = ''
          this.qtype = '1'
          this.reoder()
          break
        case '4':
          qlength = this.aswString.split(' ')
          for (let i = 0; i < qlength.length; i++) {
            aswarr.push({
              rank: 1,
              score: this.score,
              num: this.qnum,
              right: qlength[i]
            })
          }
          paramdata = {
            title: this.qtitle,
            type: 4,
            total: qlength.length * this.score,
            num: this.qnum,
            info: aswarr
          }
          this.paperdata.push(paramdata)
          this.score = 1
          this.aswString = ''
          this.qtitle = ''
          this.qtype = '1'
          this.reoder()
          break
        case '5':
          qlength = this.aswString.split(' ')
          for (let i = 0; i < qlength.length; i++) {
            aswarr.push({
              rank: 1,
              score: this.score,
              num: this.qnum,
              right: qlength[i]
            })
          }
          paramdata = {
            title: this.qtitle,
            type: 5,
            total: qlength.length * this.score,
            num: this.qnum,
            info: aswarr
          }
          this.paperdata.push(paramdata)
          this.score = 1
          this.aswString = ''
          this.qtitle = ''
          this.qtype = '1'
          this.reoder()
          break
      }
    }

  }
}
</script>
<style scoped>
.add{
    max-width: 1700px;
    min-width: 1100px;
    height:calc(100vh - 115px);
    margin:0 auto;
    background: #fff;
    margin-top:15px;
    padding:20px;
    font-size: 14px;
    position: relative;
}
.add .footer{
    width:100%;
    height:40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    bottom:10px;
    left:0;
    background: #fff;

}
.leftbox{
    width:20%;
    float: left;
}
.typebox{
    width:80%;
    float: left;
}
.typebox p{
    margin-top:0;
}
.option{
    border:1px solid #ccc;
    width:40px;
    height:40px;
    margin-right:5px;
    border-radius: 5px;
    display: inline-block;
    list-style: none;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}
.right{
    background: green;
    border:1px solid green;
    color:#fff;
}
.qtotal{
    font-size:14px;
    color:#888;
    margin-left: 10px;
}
.center{
    text-align: center
}
.paperbox{
    padding-top: 20px;
}
</style>
