<import name="x-book" src="../../components/book/book.ux"></import>
<template>
    <div class='readerover'>
        <div class='top-box'>
            <div if='bookstatus.status==0'>
                <stack class="unfinished-box">
                    <img class='' src="https://cdn-novel.iycdm.com/static/img/nocompletev2.jpg" alt="">
                    <div>
                        <img @click='urgeUpdate()' if='urge_status==0' class='reminder' src="../../assets/imgs/push-more.png" alt="">
                        <img else class='reminder' src="../../assets/imgs/push-more-suc.png" alt="">
                    </div>
                </stack>
            </div>
            <div class="over-box" if='bookstatus.status==1'>
                <img class='overimg' src="https://cdn-novel.iycdm.com/h5/complete.png" alt="">
                <text>本书已经看完啦</text>
            </div>
        </div>
        <div class='recommend-title'>
            <text>作者推荐</text>
            <text @click='changebooklist()'>换一换</text>
        </div>
        <div>
            <x-book multi="{{true}}" width="{{180}}" book="{{bookdata[0]}}">
            </x-book>
        </div>
        <div class='booklist'>
            <block for="{{bookdata.slice(1)}}">
                <x-book book='{{$item}}'></x-book>
            </block>
        </div>
    </div>
</template>
<script>
import { readOverRecommend, urgeUpdate } from "../../api";
import prompt from '@system.prompt'

export default {
    protected: {
        bid: ""
    },
    private: {
        bookdata: [],
        bookstatus: {},
        urge_status: 0
    },
    onInit() {
        this.changebooklist()
    },
    urgeUpdate() {
        urgeUpdate({ bid: this.bid }).then(r => {
            this.urge_status = 1
            prompt.showToast({ message: '催更成功' })
        })
    },
    changebooklist() {
        readOverRecommend({ bid: this.bid }).then(r => {
            this.bookdata = r.recommend_result
            this.bookstatus = r.book_status
            this.urge_status = r.book_status.urge_status
        })
    }
}
</script>
<style lang="less">
@import "../../assets/less/readerover.less";
</style>
