<template>
  <div class="v-page classify_page">
    <div class="v-ctx" v-loading="paper_list_loading">
      <TableLayout
        :column="column"
        :data="table_data"
        :pageInfo="page_info"
        @current-change="(e) => pagingChange({ currentPage: e })"
        @size-change="(e) => pagingChange({ pageSize: e })"
      >
        <template v-slot:value="scope">
          <div v-for="(item, ind) in scope.row.value" :key="ind" style="display:flex;">
            <span>{{ item.k }}: </span><el-rate v-model="item.v" disabled></el-rate>
          </div>
        </template>
      </TableLayout>
    </div>
  </div>
</template>

<script>
import { TableLayout } from '@/components/layout'
import '@/views/assessment-evaluation/utils/gyStyle.scss'
import { getCourseEvaluate } from '@/api/online-course/my-course'

export default {
  components: {
    TableLayout
  },

  data: () => ({
    table_data: [],
    page_info: { currentPage: 1, pageSize: 10, total: 0 },
    // 试题分类树是否加载中
    paper_list_loading: false,
    is_show_info: false,
    courseId: null
  }),
  watch: {
    '$route.params.courseId': {
      deep: true,
      immediate: true,
      handler (nv) {
        this.courseId = nv
      }
    }
  },
  created () {
    this.formItems = [
      { prop: 'title' },
      { prop: 'year' },
      { prop: 'btns', model: { class: 'gy-btns' } }
    ]
    this.column = [
      {
        prop: 'uname',
        label: '姓名',
        'min-width': 125,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'eval',
        label: '自我评价',
        'min-width': 125,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'value',
        label: '课程评价',
        'min-width': 300,
        align: 'center'
      }
    ]
  },
  activated () {
    this.pagingFindList()
  },
  methods: {
    toDetails (row) {
      this.$router.push({
        path:
          '/assessment-evaluation/human-evaluation/eval-details/' + row.examId
      })
    },
    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}`
    },
    pagingChange (event) {
      if (
        typeof event.currentPage !== 'number' &&
        typeof event.pageSize !== 'number'
      ) {
        return
      }

      this.page_info = { ...this.page_info, ...event }
      this.pagingFindList()
    },
    initPageInfo () {
      this.page_info = {
        currentPage: 1,
        pageSize: this.page_info.pageSize,
        total: 0
      }
    },
    pagingFindList (e) {
      if (e instanceof PointerEvent) {
        this.initPageInfo()
      }
      this.paper_list_loading = true
      getCourseEvaluate({
        courseId: this.courseId,
        ...this.page_info,
        page: this.page_info.currentPage
      })
        .then((res) => {
          const { page, pageSize, total } = res.data
          this.table_data = res.data.data
          // eslint-disable-next-line eqeqeq
          if (this.table_data.length === 0 && this.page_info.currentPage != 1) {
            this.initPageInfo()
            this.pagingFindList()
          }
          this.page_info = {
            currentPage: +page,
            pageSize: +pageSize,
            total: +total
          }
        })
        .finally((_) => {
          this.paper_list_loading = false
        })
    }
  }
}
</script>
