<template>
  <div style="display:flex;height:100%;flex-direction: column;justify-content: space-between;">
    <div>
      <div class="gy-area-title">评卷设置</div>
      <div class="write-progress">
        <p>仅看错题：<el-switch v-model="isOnlyMistake" ></el-switch></p>
        <p style="margin-top: 10px;">仅看简答题：<el-switch v-model="isOnlyTextArea"></el-switch></p>
      </div>
      <div class="gy-area-title">信息统计</div>
      <div class="write-progress form">
        <p>学员姓名：<span>{{currentStudentInfo?.realname}}</span></p>
        <p>考试成绩：<span>{{currentStudentInfo?.score}}</span></p>
        <p>考试结果：<span :style="{color:isPass?'#00c782':'#ec0000'}">{{isPass?'及格':'不及格'}}</span></p>
        <p>总题数：<span>{{questionCount}}道</span></p>
        <p>自动评分：<span>{{questionCount - humanEvalCount}}道</span></p>
        <p>人工评分：<span>{{humanEvalCount}}道</span></p>
      </div>
      <div class="action-btn-group" v-if="logs.length>0" style="margin-top:10px;">
        <el-button round type="primary" @click="prevStudent">上一人</el-button>
        <el-button round type="danger"  @click="nextStudent">下一人</el-button>
      </div>
    </div>

    <div class="action-btn-group">
      <el-button round type="primary" @click="handler('submit')">提交评分</el-button>
      <el-button plain round type="danger" @click="handler('cancel')">退出评分</el-button>
    </div>
  </div>
</template>

<script>
import '@/views/assessment-evaluation/utils/gyStyle.scss'
export default {
  props: {
    logs: {
      default: []
    },
    questions: {
      default: []
    },
    onlyMistake: {},
    onlyTextarea: {},
    evalList: {
      default: []
    }
  },
  data () {
    return {
      currentStudentInfo: null
    }
  },
  computed: {
    isOnlyMistake: {
      get () {
        return this.onlyMistake
      },
      set (v) {
        this.$emit('update:onlyMistake', v)
      }
    },
    isOnlyTextArea: {
      get () {
        return this.onlyTextarea
      },
      set (v) {
        this.$emit('update:onlyTextarea', v)
      }
    },
    questionCount () {
      return this.questions.length
    },
    /*
    人工判卷数量
    */
    humanEvalCount () {
      return this.questions.reduce((prev, item) => {
        if (['input', 'textarea'].includes(item.element)) {
          return prev + 1
        }
        return prev
      }, 0)
    },
    isPass () {
      return (this.currentStudentInfo?.score) >= (this.currentStudentInfo?.passSocre)
    }
  },
  watch: {
    historyInfo: {
      deep: true,
      handler (nv) { }
    },

    '$route.params.studentExamId': {
      immediate: true,
      handler (nv) {
        if (this.logs.length > 0) {
          this.currentStudentInfo = this.logs.find(item => item.historyId === +nv)
        } else {
          this.currentStudentInfo = null
        }
      }
    },
    logs: {
      immediate: true,
      handler (nv) {
        this.isOnlyMistake = false
        this.isOnlyTextArea = false

        if (this.currentStudentInfo == null) { this.currentStudentInfo = nv.find(item => item.historyId === +this.$route.params.studentExamId) }
      }
    }
  },

  mounted () {
  },
  activated () {

  },
  deactivated () {
  },
  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
  beforeDestroy () {
  },

  methods: {
    /*
    判断是否提交了评分,并弹窗提示
    */
    checkEvalList () {
      return new Promise((resolve, reject) => {
        if (this.evalList.length > 0) {
          this.$confirm('您的判分还未提交，确定要执行吗？', '提示', { type: 'info' }).then(res => {
            resolve()
          }).catch(() => {
            reject(new Error())
          })
        } else {
          resolve()
        }
      })
    },
    /*
      上一位学员的答卷
    */
    prevStudent () {
      if (this.logs.length === 0) return
      const currentInd = this.logs.findIndex(item => item.historyId === this.currentStudentInfo.historyId)
      if (currentInd > 0) {
        const prev = this.logs[currentInd - 1]
        this.checkEvalList().then(res => {
          this.$router.replace({ path: '/assessment-evaluation/human-evaluation/begin-eval/' + prev.historyId, query: { preview: 3 } })
        }).catch(_ => {})
      } else {
        this.$message.closeAll()
        this.$message.error('已经是第一位学员了')
      }
    },
    /*
      下一位学员的答卷
    */
    nextStudent () {
      if (this.logs.length === 0) return
      const currentInd = this.logs.findIndex(item => item.historyId === this.currentStudentInfo.historyId)
      if (currentInd < this.logs.length - 1) {
        const prev = this.logs[currentInd + 1]
        this.checkEvalList().then(res => {
          this.$router.replace({ path: '/assessment-evaluation/human-evaluation/begin-eval/' + prev.historyId, query: { preview: 3 } })
        }).catch(_ => {})
      } else {
        this.$message.closeAll()
        this.$message.error('已经是最后一位学员了')
      }
    },
    handler (emit) {
      if (emit === 'cancel') {
        this.checkEvalList().then(res => {
          this.$emit(emit)
        })
        return
      }
      this.$emit(emit)
    },
    /*
      格式化毫秒到hh:mm:ss
    */
    formatTime (msTime) {
      const time = msTime / 1000
      let hour = Math.floor(time / 60 / 60)
      hour = hour.toString().padStart(2, '0')
      let minute = Math.floor(time / 60) % 60
      minute = minute.toString().padStart(2, '0')
      let second = Math.floor(time) % 60
      second = second.toString().padStart(2, '0')
      return `${hour}:${minute}:${second}`
    }
  }

}
</script>

<style lang="scss" scoped>
.action-btn-group{
  display: flex;
  align-items: center;
  justify-content: center;
}
.write-progress{
  &.form{
    line-height: 1.5;
    span{
      color:$--color-primary;
    }
  }
  background: #f1f5fe;
  border-radius: 4px;
  margin-top: 15px;
  padding: 10px;
  .percent{
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-weight: bold;
    .ratio{
      font-size: 12px;
      font-weight: normal;
      color:#666;
    }
  }
}
.time-remaining {
  width: 100%;
  height: 40px;
  font-weight: bold;
  display: flex;
  padding:0  10px;

  align-items: center;
  justify-content: space-between;
  border-radius: 25px;
  background: #f1f5fe;

  span {
    font-size: 18px;
    color: #ee0000;
    font-weight: bold;
  }
}
</style>
