<template>
  <div>
    <a-row style="margin-bottom: 20px;">
      <a-button @click="handlerExam" type="primary">写作业</a-button>
    </a-row>
    <template v-if="dataList && dataList.length > 0">
      <a-card v-for="(item, index) in dataList" :key="index" style="margin-bottom: 15px;">
        <div class="flex-center">
          <div style="flex: 1;">
            <h3>{{ item.name }}</h3>
            <div>
              <span style="margin-right: 20px;">提交时间：{{ item.submitTime }}</span>
              <span>出题范围：{{ item.rangeOfQuestions }}</span>
            </div>
          </div>
          <div style="flex: 0 0 200px; text-align: right;">
            <div @click="handlerDetail(item)" :span="24" style="margin-bottom: 10px;">
              <a-button type="primary" size="small">查看详情</a-button>
            </div>
            <!-- <div @click="handlerPreview(item)" :span="24"><a-button type="danger" size="small">预览</a-button></div> -->
          </div>
        </div>
      </a-card>
    </template>
    <template v-else>
      <a-empty style="margin: 30px 0;" description="暂无相关作业" />
    </template>
  </div>
</template>

<script>
import { reqOperationList } from '@/api/mycourse/index'
export default {
  props: {},
  data () {
    return {
      dataList: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      const { person } = this.$store.state.user
      reqOperationList({
        personId: person.id,
        projectId: this.$route.query.courseId,
        pageSize: 99999,
        pageNum: 1
      }).then(res => {
        this.dataList = res.rows
      })
    },
    handlerExam () {
      this.$router.push({
        path: '/myexamDetail',
        query: { type: 'operation', projectId: this.$route.query.courseId, practiceType: 4 }
      })
    },
    handlerDetail (data) {
      this.$router.push({
        path: '/myreport',
        query: { type: 'operation', reportId: data.id, practiceType: 4 }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
