<template>
    <view class="page-container">
        <button class="btn-view" @click="novelView">当前界面加载</button>
        <button class="btn-view" @click="hideNovelView">隐藏</button>
        <button class="btn-view" @click="removeNovelView">移除</button>
        <view class="ad-container" :style="{height:containerHeight+'px'}"></view>
    </view>
</template>

<script>
    var isShowing = false
    export default {
        data() {
            return {
                containerTop: 0,
                containerLeft: 0,
                containerWidth: 0,
                containerHeight: 0,
                devicePixelRatio: 0,
            }
        },
        onLoad() {

        },
        onReady() {
            var _this = this;
            uni.getSystemInfo({
                success: function(ret) {
                    _this.devicePixelRatio = ret.devicePixelRatio
                    uni.createSelectorQuery()
                        .select(".ad-container")
                        .boundingClientRect(function(boundRect) {
                            _this.containerTop = boundRect.top + ret.windowTop
                            _this.containerLeft = boundRect.left
                            _this.containerWidth = boundRect.width
                            _this.containerHeight = ret.windowHeight - boundRect.top - 30;
                        }).exec();
                }
            });
            this.zjJSBridge.ready(() => {
                this.zjJSBridge.setListener((event, data) => {
                    if (event != this.zjJSBridge.events.novel) {
                        return
                    }
                    switch (data.action) {
                        case this.zjJSBridge.actions.onAdLoadFailed:
                            uni.showModal({
                                showCancel: false,
                                title: '小说加载失败',
                                content: "错误码:" + data.code + "\n错误信息:" + data.msg + "\n" + data.extra
                            })
                            break;
                        case this.zjJSBridge.actions.onAdLoadSuccess:
                            console.log('小说加载成功');
                            break;
                        case this.zjJSBridge.actions.onPageEnter:
                            console.log('进入小说阅读页')
                            break;
                        case this.zjJSBridge.actions.onPageLeave:
                            console.log('退出小说阅读页')
                            break;
                        case this.zjJSBridge.actions.onReadTime:
                            // 用户单次打开阅读器阅读时长，翻页过程不被纳入阅读时长
                            // 在可读页面（非预览和购买章节）第一次翻页完成后开始计时，每页停留时长＞1秒算有效停留时长
                            // 第一页、最后一页、翻页均不计入有效时长，且单页时长不超过30S
                            console.log('阅读时长为:' + data.msg)
                            break;
                    }
                })
            })
        },
        onBackPress(event) {
            this.onBackPressed()
        },
        onUnload() {
            if (isShowing) {
                this.onBackPressed()
            }
            this.zjJSBridge.removeListener()
        },
        methods: {
            onBackPressed() {
                if (isShowing) {
                    this.removeNovelView()
                }
                return true
            },
            toNativePx(px) {
                return parseInt(this.devicePixelRatio * px)
            },
            novelView() {
                this.zjJSBridge.novel({
                    // 广告位ID，必填
                    posId: "J3023431556",
                    // 用户ID，选填
                    userId: "13000000000",
                    width: this.toNativePx(this.containerWidth),
                    height: this.toNativePx(this.containerHeight),
                    top: this.toNativePx(this.containerTop),
                    left: this.toNativePx(this.containerLeft)
                }, function(succ, data) {
                    console.log("succ = " + succ + " & data = " + data)
                    if (succ) {
                        isShowing = true
                    }
                })
            },
            hideNovelView() {
                this.zjJSBridge.novel({
                    // 广告位ID，必填
                    posId: "J3023431556",
                    // 用户ID，选填
                    userId: "13000000000",
                    // 当hide为true时，暂时隐藏小说界面，再次调用novel方法会恢复显示
                    hide: true
                }, function(succ, data) {
                    console.log("succ = " + succ + " & data = " + data)
                })
            },
            removeNovelView() {
                isShowing = false
                this.zjJSBridge.novel({
                    // 广告位ID，必填
                    posId: "J3023431556",
                    // 用户ID，选填
                    userId: "13000000000",
                    // 当remove为true时，移除小说界面，再次调用novel方法会重新加载
                    remove: true
                }, function(succ, data) {
                    console.log("succ = " + succ + " & data = " + data)
                })
            }
        }
    }
</script>