<script setup lang="ts">
import { getQuestionList, updateQuestionScore, asyncStudentResult } from '../api'
import { ElMessage } from 'element-plus'

const route = useRoute()

onMounted(() => {
  fetchList()
})

// 序号
let orderList = $ref<any[]>([])

// 所有题
let questionList = $ref([])

// 当前题序
let currentIndex = $ref(1)

// 获取当前题
const questionDetail: any = computed(() => {
  return questionList.find((item: any) => item.order === currentIndex)
})
const fetchList = function () {
  getQuestionList({ experiment_id: route.query.id as string, student_id: route.query.sid as string }).then(res => {
    if (res.data?.items) {
      questionList = res.data.items.map((item: any, index: number) => {
        item.order = index
        return item
      })
    }
    orderList = res.data.items.reduce((a: any, b: any, i: number) => {
      if (b.type === '101' || b.type === '102') {
        setData('1', '用户/事件管理')
      }
      if (b.type === '201' || b.type === '202') {
        setData('2', '标签管理')
      }
      if (b.type === '301' || b.type === '302') {
        setData('3', '群组管理')
      }
      if (
        b.type === '401' ||
        b.type === '402' ||
        b.type === '403' ||
        b.type === '404' ||
        b.type === '405' ||
        b.type === '406' ||
        b.type === '407' ||
        b.type === '408'
      ) {
        setData('4', '资料管理')
      }
      function setData(type: string, name: string) {
        const index = a.findIndex((item: { type: string }) => item.type === type)
        b.order = i + 1
        index === -1 ? a.push({ type: type, name: name, q: [b] }) : a[index].q.push(b)
      }
      return a
    }, [])
  })
}

const hasPrev = computed(() => currentIndex > 1)
const hasNext = computed(() => currentIndex < questionList.length)
function handlePrev() {
  currentIndex--
}
function handleNext() {
  currentIndex++
}

const handleOrder = function (order: number) {
  currentIndex = order
}

// 打分
const updateScore = function (item: any) {
  updateQuestionScore({
    question_id: item.id,
    student_id: route.query.sid as string,
    commit_score: item.commit_score
  }).then(res => {
    if (res.data.status) {
      item.is_complete_check = true
      ElMessage({ message: '保存成功', type: 'success' })
    }
  })
}

// 同步分数
const handleSubmit = function () {
  asyncStudentResult({ experiment_id: route.query.id as string, student_id: route.query.sid as string }).then(res => {
    if (res.data.status) {
      ElMessage({ message: '提交成功', type: 'success' })
    }
  })
}
</script>

<template>
  <div v-if="orderList.length">
    <el-card shadow="never" class="question-number">
      <dl v-for="group in orderList" :key="group.type">
        <dt>{{ group.name }}</dt>
        <dd>
          <span
            @click="handleOrder(question.order)"
            :class="{ 'is-active': question.is_complete_check }"
            v-for="question in group.q"
            :key="question.id"
            >{{ question.order }}</span
          >
        </dd>
      </dl>
    </el-card>
    <el-card shadow="never" class="question-item" v-if="questionDetail">
      <!-- <h3 class="question-item__title">标签管理</h3> -->
      <p class="question-item__stem">
        {{ questionDetail?.order }}、{{ questionDetail.title }} <span>（{{ questionDetail.score }}分）</span>
      </p>
      <ul class="question-item__files" v-if="questionDetail.files">
        <li class="question-item__files-item" v-for="file in questionDetail.files" :key="file.url">
          <div class="question-item__files-item__title">
            <p>{{ file.name }}</p>
            <p>{{ file.size }}</p>
          </div>
        </li>
      </ul>
      <p class="question-item__tip">作答详情：详见系统</p>
      <p class="question-item__content">解析：{{ questionDetail.answer_analysis }}</p>
      <div class="question-item-score">
        <span>本题得分</span>
        <el-input-number
          style="width: 100px"
          v-model="questionDetail.commit_score"
          :min="0"
          :max="questionDetail.score"
          size="small"
          controls-position="right"
        />
      </div>
      <el-row justify="center">
        <!-- <el-button>取消</el-button> -->
        <el-button type="primary" @click="updateScore(questionDetail)">保存</el-button>
      </el-row>
    </el-card>
    <el-row justify="center">
      <el-button :disabled="!hasPrev" type="primary" @click="handlePrev">上一题</el-button>
      <el-button :disabled="!hasNext" type="primary" @click="handleNext">下一题</el-button>
      <el-button type="primary" @click="handleSubmit()">提交</el-button>
    </el-row>
  </div>
  <el-empty description="暂无数据" v-else />
</template>

<style lang="scss" scoped>
.question-number {
  dt {
    font-size: 14px;
    margin-bottom: 10px;
  }
  dd {
    span {
      margin-right: 10px;
      margin-bottom: 10px;
      display: inline-block;
      width: 28px;
      height: 28px;
      text-align: center;
      font-size: 14px;
      line-height: 28px;
      border: 1px solid #bbb;
      border-radius: 50%;
      cursor: pointer;
      &.is-active {
        color: #fff;
        background-color: var(--main-color);
        border-color: var(--main-color);
      }
    }
  }
}
.question-item {
  margin-top: 10px;
  margin-bottom: 20px;
}
.question-item__title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
.question-item__stem {
  font-size: 14px;
  color: #101010;
}

.question-item__content {
  // margin-top: 10px;
  font-size: 13px;
  color: #75797b;
}
.question-item__files-item {
  margin-top: 10px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
  border-radius: 6px;
  a {
    margin-left: 10px;
    font-size: 14px;
    color: var(--main-color);
  }
}
.question-item__files-item__title {
  flex: 1;
  font-size: 12px;
  color: #75797b;
}
.question-item__tip {
  margin: 15px 0;
  font-size: 14px;
  color: #101010;
}

.question-item-score {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  span {
    margin-right: 10px;
    font-size: 14px;
  }
}
</style>
