<template>
  <standard-table :table-title="section"
                  :table-headers="tableHeaders"
                  :table-data="tableData"
                  @returnButton="returnToTextbook"
                  @openRoute="openExercise"
  >

  </standard-table>
</template>

<script>
import StandardTable from "@/components/StandardTable"
import {myAxios} from '@/includes'

export default {
  name: "Section",
  components: {StandardTable},
  computed:{
    textbookSection(){
      return this.textbook+this.section
    }
  },
  watch:{
    textbookSection(){
      this.getSection()
    }
  },
  created() {
    this.getSection()
  },
  props: {
    textbook: String,
    section: String
  },
  methods: {
    returnToTextbook() {
      this.$router.push({name: 'textbook', params: {textbook: this.textbook}})
    },
    openExercise(item) {
      this.$router.push({
        name: 'exercise',
        params: {...item, tableData: this.tableData}
      })
    },
    getSection() {
      this.$emit('setCardLoadingStatus', true)
      console.log('ajax get section')
      this.tableData = []
      myAxios.get('textbook/' + this.textbook + '/' + encodeURIComponent(this.section)).then(resp => {
        if (resp.data.status) {
          this.tableData = resp.data.data.map((single, index, array) => {
            let modified = single
            if (!modified.part) {
              modified.part = 'exercises'
            }
            return modified
          })
        }
        this.$emit('setCardLoadingStatus', !resp.data.status)
      }).catch(reason => {
        this.$emit('setCardLoadingStatus', true)
      })
    }
  },
  data() {
    return {
      tableHeaders: [
        {text: '题号', value: 'exercise'},
        {text: 'Section', value: 'section', sortable: false},
        {text: '类型', value: 'part', sortable: false},
        {text: '页码', value: 'page'},
        {text: '操作', value: 'action', sortable: false},
      ],
      tableData: []
    }
  }
}
</script>

<style scoped>

</style>
