<template>
  <list
    id="catalog"
    class="catalog-wrap"
    @scrollbottom="loadCatalog"
    @scrolltop="loadPrev"
    v-if="list.length > 0"
  >
    <block for="list">
      <list-item
        type="catalog-item"
        class="catalog-item {{$idx == chapter_sequence_index ? 'checked' : ''}}"
        @click="jumpReader($item)"
      >
        <text
          class="catalog-name {{$idx == chapter_sequence_index ? 'catalog-name__check' : ''}}"
          >{{ $item.chapter_name }}</text
        >
        <image
          show="{{$item.chapter_is_vip}}"
          src="../../assets/imgs/book-vip.png"
        ></image>
      </list-item>
    </block>
    <list-item type="loading-text" class="loading-wrap" if="!end">
      <progress type="circular"></progress>
      <text>加载中...</text>
    </list-item>
    <list-item type="loading-text" class="loading-wrap" else>
      <text>已经到底了</text>
    </list-item>
  </list>
</template>

<script>
import { getCatalog } from '../../api'
import router from '@system.router'
import prompt from '@system.prompt'
import storage from '@system.storage'

const PER_PAGE_NUM = 50

export default {
  protected: {
    bid: '',
    chapter_id: '',
    chapter_sequence: '',
    fromReader: false
  },
  private: {
    list: [],
    meta: {},
    chapter_sequence_index: 0,
    startpage: 1,
    loading: false,
    end: false,
    send_order_id: false
  },
  async onInit() {
    let send_order_id = (await storage.get({ key: 'send_order_id' })).data
    if (send_order_id) this.send_order_id = send_order_id
    // let page = 1
    // var chapter_sequence_index = 0
    // if (this.chapter_sequence) {
    //   var chapter_sequence = this.chapter_sequence
    //   chapter_sequence_index = chapter_sequence % PER_PAGE_NUM - 1
    //   this.chapter_sequence_index = chapter_sequence_index
    //   page = Math.ceil(chapter_sequence / PER_PAGE_NUM)
    // }
    // this.startpage = page;
    // getCatalog({ bid: this.bid, page: page, page_size: PER_PAGE_NUM }).then(r => {
    //   this.list = r.list
    //   this.meta = r.meta
    //   setTimeout(() => {
    //     this.$element('catalog').scrollTo({ index: chapter_sequence_index })
    //   }, 500)
    // })
  },
  onShow() {
    let page = 1
    var chapter_sequence_index = 0
    if (this.chapter_sequence) {
      var chapter_sequence = this.chapter_sequence
      chapter_sequence_index = (chapter_sequence % PER_PAGE_NUM) - 1
      this.chapter_sequence_index = chapter_sequence_index
      page = Math.ceil(chapter_sequence / PER_PAGE_NUM)
    }
    this.startpage = page

    getCatalog({ bid: this.bid, page: page, page_size: PER_PAGE_NUM }).then(
      r => {
        this.list = r.list
        this.meta = r.meta
        setTimeout(() => {
          this.$element('catalog').scrollTo({ index: chapter_sequence_index })
        }, 500)
      }
    )
  },
  jumpReader(info) {
    if (info.is_need_charge == 1) {
      this.chapter_sequence = info.chapter_sequence
      router.push({
        uri: '/views/Pay',
        params: {
          bid: info.bid,
          fee: info.need_coin
        }
      })
      return
    }
    if (!this.send_order_id && info.next_chapter_status == 2) {
      prompt.showDialog({
        title: '温馨提示',
        message: `阅读本章将消耗${info.next_price}书币哟~`,
        buttons: [
          {
            text: '阅读本章',
            color: '#EF5952'
          },
          {
            text: '我再想想',
            color: '#999'
          }
        ],
        success: function(data) {
          if (data.index === 0) {
            router.replace({
              uri: '/views/Reader',
              params: {
                bid: info.bid,
                chapter_id: info.chapter_id
              }
            })
          }
        },
        cancel: function() {
          console.log('取消前往')
        }
      })
    } else {
      router.replace({
        uri: '/views/Reader',
        params: {
          bid: info.bid,
          chapter_id: info.chapter_id
        }
      })
    }
  },
  loadCatalog() {
    if (this.meta.last_page < this.meta.current_page + 1) {
      prompt.showToast({ message: '已经到底啦' })
      this.end = true
      return
    }
    let params = {
      bid: this.bid,
      page: this.meta.current_page + 1,
      page_size: PER_PAGE_NUM
    }
    this.initCatalog(params)
    // getCatalog({ bid: '5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY', page: this.meta.current_page + 1, page_size: PER_PAGE_NUM }).then(r => {
    //   console.log(...r.list)
    //   this.list.push(...r.list)
    //   this.meta = r.meta
    // })
  },
  loadPrev() {
    console.log('get prev catalog')
    if (this.startpage - 1 < 1)
      return prompt.showToast({ message: '已经到顶啦' })
    let params = {
      bid: this.bid,
      page: this.startpage - 1,
      page_size: PER_PAGE_NUM
    }
    this.initCatalog(params, true)
    // getCatalog({ bid: '5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY', page: this.startpage - 1, page_size: PER_PAGE_NUM }).then(r => {
    //   console.log(...r.list)
    //   this.list.unshift(...r.list)
    //   this.startpage = r.meta.current_page
    // })
  },
  initCatalog(params, isLoadPrev = false) {
    this.end = false
    getCatalog(params).then(r => {
      if (isLoadPrev) {
        this.list.unshift(...r.list)
        this.startpage = r.meta.current_page
      } else {
        this.list.push(...r.list)
        this.meta = r.meta
      }
    })
  },
  onBackPress() {
    if (this.fromReader) {
      router.replace({
        uri: '/views/Reader',
        params: {
          bid: this.bid,
          chapter_id: this.chapter_id
        }
      })
    } else {
      router.back()
    }
    return true
  }
}
</script>

<style lang="less">
@import '../../assets/less/catalog.less';
</style>
