<template>
  <div class="answer">
    <div class="title">{{ share_record_info.share_record_name }}</div>

    <div class="search">
      <span class="search-name">搜索</span>
      <el-input
        v-model="searchData.search_content"
        placeholder="全部"
        suffix-icon="el-icon-search"
        @keyup.enter.native="getPageList"
      />

      <span class="search-name">状态</span>
      <el-select v-model="searchData.status_list" multiple placeholder="全部" @change="getPageList">
        <el-option v-for="{ label, value } in statusType" :key="value" :label="label" :value="value" />
      </el-select>
    </div>

    <div class="sum-info">
      <div class="info-item">
        <span>收到邀请</span>
        <span class="info">
          <span>{{ sum_info.finish_person_count + sum_info.unfinish_person_count }}</span>
          <span class="light">人</span>
        </span>
      </div>
      <div class="info-item">
        <span>完成练习</span>
        <span class="info">
          <span>{{ sum_info.finish_person_count }}</span>
          <span class="light">人</span>
        </span>
      </div>
      <div class="info-item">
        <span>平均正确率</span>
        <span class="info">{{ sum_info.avg_right_percent }} <span class="light">%</span></span>
      </div>
      <div class="info-item">
        <span>平均耗时</span>
        <span class="info">
          <template v-if="avgTime.hour"> {{ avgTime.hour }} <span class="light">时</span> </template>
          <template v-if="avgTime.minute"> {{ avgTime.minute }} <span class="light">分</span> </template>
          {{ avgTime.second }} <span class="light">秒</span>
        </span>
      </div>
    </div>

    <el-table :data="answer_record_list" height="100%">
      <el-table-column prop="index" label="序号" width="70">
        <template slot-scope="{ $index }">{{ $index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="user_real_name" label="用户" width="280" />
      <el-table-column prop="finish_time" label="完成时间" width="180" />
      <el-table-column prop="answer_duration" label="耗时" width="180">
        <template slot-scope="{ row }">
          <span>{{ secondFormatConversion(row.answer_duration, 'chinese') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="right_count" label="正确" width="160" />
      <el-table-column prop="error_count" label="错误" width="160" />
      <el-table-column label="正确率">
        <template slot-scope="{ row }">
          <span>{{ row.right_percent }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="operation" label="操作" fixed="right" width="200">
        <template slot-scope="{ row }">
          <span class="link" @click="viewUserAnswerRecordLis(row.exercise_share_record_id, row.id)">查看</span>
        </template>
      </el-table-column>
    </el-table>

    <PaginationPage ref="pagination" :total="total" @getList="pageQueryExerciseUserAnswerRecordList" />
  </div>
</template>

<script>
import { PageQueryExerciseUserAnswerRecordList } from '@/api/exercise';
import { secondFormatConversion } from '@/utils/transform';

import PaginationPage from '@/components/common/PaginationPage.vue';

export default {
  name: 'AnswerData',
  components: {
    PaginationPage,
  },
  data() {
    const { query } = this.$route;

    return {
      total: 0,
      answer_record_list: [],
      share_record_info: { exercise_name: '', share_record_url: '' },
      sum_info: { finish_person_count: 0, unfinish_person_count: 0, avg_right_percent: 0, avg_answer_duration: 0 },
      searchData: {
        exercise_id: query.exercise_id,
        share_record_id: query.share_record_id,
        search_content: '',
        status_list: [],
      },
      statusType: [
        { label: '已完成', value: 0 },
        { label: '未完成', value: 1 },
      ],
      secondFormatConversion,
    };
  },
  computed: {
    avgTime() {
      let duration = this.sum_info.avg_answer_duration;
      let hour = Math.floor(duration / 3600);
      let minute = Math.floor((duration - hour * 3600) / 60);
      let second = duration - hour * 3600 - minute * 60;

      return { hour, minute, second };
    },
  },
  methods: {
    getPageList() {
      this.$refs.pagination.getList();
    },
    /**
     * 查看用户答题记录列表
     * @param {string} exercise_share_record_id 练习分享记录id
     * @param {string} answer_record_id 答题记录id
     */
    viewUserAnswerRecordLis(exercise_share_record_id, answer_record_id) {
      this.$router.push({
        path: '/answer_record_list',
        query: {
          exercise_share_record_id,
          answer_record_id,
          exercise_id: this.searchData.exercise_id,
          share_record_id: this.searchData.share_record_id,
        },
      });
    },
    pageQueryExerciseUserAnswerRecordList(data) {
      PageQueryExerciseUserAnswerRecordList({ ...data, ...this.searchData })
        .then(({ total_count, share_record_info, sum_info, answer_record_list }) => {
          this.answer_record_list = answer_record_list;
          this.total = total_count;
          this.share_record_info = share_record_info;
          this.sum_info = sum_info;
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.answer {
  @include list;

  .title {
    font-size: 20px;
    font-weight: bold;
  }

  .search {
    display: grid;
    grid-template: 30px 32px / repeat(auto-fill, 210px);
    grid-auto-flow: column;
    column-gap: 24px;

    &-name {
      font-size: 14px;
      color: $font-light-color;
    }
  }

  .sum-info {
    display: flex;
    column-gap: 160px;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    padding: 16px;
    background-color: $main-background-color;
    border-radius: 2px;

    .info-item {
      display: flex;
      flex-direction: column;

      :first-child {
        text-align: right;
      }

      .info {
        height: 33px;
        font-size: 22px;
        font-weight: bold;
        text-align: right;
      }

      .light {
        font-size: 12px;
        font-weight: normal;
        color: $font-light-color;
      }
    }
  }
}
</style>
