<template>
  <v-container>
    <v-tabs>
      <v-tab @click="selectTab(0)">视频</v-tab>
      <v-tab @click="selectTab(1)">图片</v-tab>
    </v-tabs>
    <v-simple-table>
      <template v-slot:default>
        <thead>
          <tr>
            <th class="text-left">
              author
            </th>
            <th class="text-left">
              pub date
            </th>
            <th class="text-left">
              title
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="item in pageList"
            :key="item.pageUrl"
            @click="jumpPage(item.pageUrl)"
          >
            <td>{{ item.author }}</td>
            <td>{{ item.pubDate }}</td>
            <td>{{ item.title }}</td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
    <v-pagination
        v-model="page"
        :length="length"
        :total-visible="7"
        @input="pageChange"
    />
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      type: 0,
      page: 1,
      length: 0,
      pageList: []
    }
  },
  created() {
    this.getPageList('video', 1)
  },
  methods: {
    selectTab(type) {
      console.log(type)
      if (type === this.type) {
        return
      }

      this.type = type
      this.page = 1
      if (type === 0) {
        this.$vuetify.goTo(type)
        this.getPageList('video', 1)
      } else if (type === 1) {
        this.$vuetify.goTo(type)
        this.getPageList('image', 1)
      }
    },
    pageChange(page) {
      this.page = page
      if (page !== this.currentPage) {
        if (this.type === 0) {
          this.getPageList('video', page)
        } else if (this.type === 1) {
          this.getPageList('image', page)
        }
      }
    },
    getPageList(pageType, page) {
      const url = 'http://localhost:9988/api/t66y/page/list/' + pageType + '?page=' + page
      fetch(url, {
        method: 'GET'
      }).then(response => response.json())
        .then(json => {
          if (json.code === 0) {
            const dataList = json.data
            this.pageList.splice(0, this.pageList.length)
            for (const item of dataList.list) {
              this.pageList.push(item)
            }
            this.currentPage = dataList.currentPage
            this.length = dataList.totalPages
          }
        })
        .catch(e => {
          return null
        })
    },
    jumpPage(pageUrl) {
      console.log('跳转页面 + ' + pageUrl)
      const routeUrl = this.$router.resolve({
        path: '/t66y/page',
        query: {
          pageUrl: pageUrl
        }
      })
      window.open(routeUrl.href, '_blank')
    }
  }
}
</script>

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