<template>
  <div class="answer-record">
    <div class="answer-record-list">
      <ul>
        <li
          v-for="{ id, user_real_name, user_image_url, is_finish } in answer_record_list"
          :key="id"
          :class="['record-item', { active: answer_record_id === id }]"
          @click="selectShareRecord(id)"
        >
          <el-avatar :src="user_image_url" :size="24" />
          <span class="user-name nowrap-ellipsis">{{ user_real_name }}</span>
          <span v-if="is_finish === 'true'" class="tip">已提交</span>
        </li>
      </ul>
    </div>
    <div class="answer-report-container">
      <div class="answer-report">
        <div class="header">
          <div class="back round" @click="goBack">
            <i class="el-icon-arrow-left"></i>
            <span>返回</span>
          </div>
        </div>
        <div class="title">测试报告</div>
        <div class="answer-info">
          <div>
            <span>完成时间</span>
            <span>{{ answer_record.finish_time }}</span>
          </div>
          <div>
            <span>耗时</span>
            <span>{{ secondFormatConversion(answer_record.answer_duration, 'chinese') }}</span>
          </div>
          <div>
            <span>正确</span>
            <span>{{ answer_record.right_count }}</span>
          </div>
          <div>
            <span>错误</span>
            <span>{{ answer_record.error_count }}</span>
          </div>
          <div>
            <span>正确率</span>
            <span>{{ answer_record.right_percent }}%</span>
          </div>
        </div>

        <div class="answer-list">
          <span
            v-for="({ question_id, is_objective, answer_status, is_remarked }, i) in question_list"
            :key="question_id"
            :class="[
              'answer-list-item',
              { subjectivity: is_objective === 'false', error: answer_status === 2 || answer_status === 0 },
              { remarked: is_remarked === 'true' },
            ]"
            @click="selectQuestion(i)"
          >
            {{ i + 1 }}
          </span>
        </div>

        <div class="footer">
          <el-button type="primary" size="large" @click="finishAnswerRemark">完成</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { secondFormatConversion } from '@/utils/transform';
import { GetUserAnswerRecordList, GetAnswerRecordReport, FinishAnswerRemark, GetShareConfig } from '@/api/exercise';

export default {
  name: 'AnswerRecordList',
  data() {
    const { exercise_share_record_id, answer_record_id, exercise_id, share_record_id } = this.$route.query;

    return {
      backURL: `/answer_data?exercise_id=${exercise_id}&share_record_id=${share_record_id}`,
      secondFormatConversion,
      exercise_share_record_id,
      answer_record_id,
      exercise_share_url_path: '', // 分享链接
      answer_record: {},
      question_list: [],
      answer_record_list: [],
    };
  },
  computed: {
    // 当前答题记录id
    curAnswerRecordId() {
      return this.answer_record_list.find((item) => item.id === this.answer_record_id)?.id;
    },
  },
  watch: {
    curAnswerRecordId(val) {
      if (!val) return;
      this.getAnswerRecordReport(val);
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getShareConfig();
      this.getUserAnswerRecordList();
    },
    getShareConfig() {
      GetShareConfig().then(({ exercise_share_url_path }) => {
        this.exercise_share_url_path = exercise_share_url_path;
      });
    },
    getUserAnswerRecordList() {
      GetUserAnswerRecordList({ exercise_share_record_id: this.exercise_share_record_id }).then(
        ({ answer_record_list }) => {
          this.answer_record_list = answer_record_list;
        },
      );
    },
    /**
     * 选择答题记录
     * @param {string} answer_record_id 答题记录id
     */
    selectShareRecord(answer_record_id) {
      if (this.answer_record_id === answer_record_id) return;
      this.answer_record_id = answer_record_id;
    },
    /**
     * 获取答题记录报告
     * @param {string} answer_record_id 答题记录id
     */
    getAnswerRecordReport(answer_record_id) {
      GetAnswerRecordReport({ answer_record_id }).then(({ answer_record, question_list }) => {
        this.answer_record = answer_record;
        this.question_list = question_list;
      });
    },
    /**
     * 选择题目
     * @param {number} i 题目索引
     */
    selectQuestion(i) {
      window.open(
        `${this.exercise_share_url_path}?share_record_id=${this.exercise_share_record_id}&answer_record_id=${
          this.curAnswerRecordId
        }&exercise_id=${this.answer_record.exercise_id}&question_index=${i}&back_url=${encodeURIComponent(
          window.location.href,
        )}`,
        '_blank',
      );
    },
    goBack() {
      this.$router.push(this.backURL);
    },
    /**
     * 完成批注
     */
    finishAnswerRemark() {
      FinishAnswerRemark({ answer_record_id: this.curAnswerRecordId }).then(() => {
        this.$message.success('批注成功');
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.answer-record {
  display: flex;
  height: 100%;

  &-list {
    width: 210px;
    overflow: auto;
    background-color: #fff;

    > ul {
      display: flex;
      flex-direction: column;
      row-gap: 2px;

      .record-item {
        display: flex;
        column-gap: 8px;
        align-items: center;
        justify-content: center;
        height: 40px;
        padding: 8px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;

        .user-name {
          flex: 1;
        }

        .tip {
          color: #00c264;
        }

        &.active {
          background-color: #e7eeff;
        }
      }
    }
  }

  .answer-report-container {
    flex: 1;
    padding: 16px;

    .answer-report {
      display: flex;
      flex-direction: column;
      row-gap: 24px;
      align-items: center;
      height: 100%;
      padding: 16px;
      background-color: #fff;
      border-radius: 16px;

      .header {
        display: flex;
        align-items: center;
        width: 100%;
        height: 38px;
        font-size: 14px;

        .back {
          cursor: pointer;
        }
      }

      .title {
        font-size: 32px;
        font-weight: bold;
        color: $light-main-color;
      }

      .answer-info {
        display: flex;
        column-gap: 120px;
        justify-content: center;
        width: 1020px;
        padding: 24px 40px;
        background-color: #f7f7f7;
        border-radius: 8px;

        > div {
          display: flex;
          flex-direction: column;
          row-gap: 8px;

          :first-child {
            color: #949494;
          }

          :last-child {
            font-size: 24px;
            font-weight: bold;
            color: #000;
          }
        }
      }

      .answer-list {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        gap: 24px;
        align-content: flex-start;
        width: 770px;

        &-item {
          position: relative;
          width: 56px;
          height: 40px;
          padding: 8px;
          line-height: 24px;
          text-align: center;
          cursor: pointer;
          background-color: #f0f0f0;
          border-radius: 20px;

          &.error {
            color: #fff;
            background-color: $error-color;
          }

          &.subjectivity {
            color: $font-color;
            background-color: #fef2a4;
          }

          &.remarked {
            &::before {
              position: absolute;
              top: 0;
              right: 0;
              display: inline-block;
              width: 6px;
              height: 6px;
              content: '';
              background-color: #f2555a;
              border-radius: 50%;
            }
          }
        }
      }

      .footer {
        .el-button {
          width: 256px;
          border-radius: 40px;
        }
      }
    }
  }
}
</style>

<style>
.answer .answer-container {
  padding: 0;
}
</style>
