<template>
    <view class="content">
        <button @click="setListener">注册监听</button>
        <button @click="removeListener">移除监听</button>
        <button @click="rewardVideo">激励广告</button>
        <button @click="fullScreenVideo">全屏视频</button>
        <button @click="interstitial">插屏</button>
        <button @click="contentVideo">视频内容</button>
        <button @click="topBanner">顶部 Banner</button>
        <button @click="bottomBanner">底部 Banner</button>
        <button @click="removeBanner">移除 Banner</button>
        <button @click="loadH5">H5</button>
        <button @click="loadTask('cpa')">TASK-CPA</button>
        <button @click="loadTask('cpl')">TASK-CPL</button>
        <button @click="loadTask('history')">TASK-HISTORY</button>
    </view>
</template>

<script module="vconsole" lang="renderjs">
    import VConsole from '../../static/vconsole.min.js'
    new VConsole();

    import jsBridge from '../../static/jsbridge-mini-vue.js'

    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            setListener() {
                jsBridge.zj.setListener((event, data) => {
                    console.log("event:" + event + " | data:" + JSON.stringify(data))
                    // 处理回调
                    switch (event) {
                        case "RewardVideo":
                            switch (data.action) {
                                case "onZjAdShow":
                                    uni.hideLoading()
                                    jsBridge.toast('激励广告展示');
                                    break;
                                case "onZjAdReward":
                                    jsBridge.toast('激励广告发奖');
                                    break;
                                case "onZjAdClose":
                                    jsBridge.toast('激励广告关闭');
                                    break;
                                case "onZjAdError":
                                    uni.hideLoading();
                                    jsBridge.toast('广告出错，错误信息为[' + data.message + "]");
                            }
                            break;
                        case "FullScreenVideo":
                            switch (data.action) {
                                case "onZjAdShow":
                                    uni.hideLoading()
                                    jsBridge.toast('全屏视频开始播放');
                                    break;
                                case "onZjAdClicked":
                                    jsBridge.toast('广告点击');
                                    break;
                                case "onZjAdClosed":
                                    jsBridge.toast('全屏视频关闭');
                                    break;
                                case "onZjAdError":
                                    uni.hideLoading();
                                    jsBridge.toast('广告出错，错误信息为[' + data.message + "]");
                            }
                            break;
                        case "Interstitial":
                            switch (data.action) {
                                case "onZjAdShow":
                                    uni.hideLoading()
                                    jsBridge.toast('插屏开始展示');
                                    break;
                                case "onZjAdClicked":
                                    jsBridge.toast('广告点击');
                                    break;
                                case "onZjAdClosed":
                                    jsBridge.toast('插屏关闭');
                                    break;
                                case "onZjAdError":
                                    uni.hideLoading();
                                    jsBridge.toast('广告出错，错误信息为[' + data.message + "]");
                            }
                            break;
                        case "Banner":
                            switch (data.action) {
                                case "onZjAdShow":
                                    jsBridge.toast('Banner 开始展示');
                                    break;
                                case "onZjAdClicked":
                                    jsBridge.toast('广告点击');
                                    break;
                                case "onZjAdClosed":
                                    jsBridge.toast('Banner 关闭');
                                    break;
                                case "onZjAdError":
                                    jsBridge.toast('广告出错，错误信息为[' + data.message + "]");
                            }
                            break;
                        case "H5":
                            switch (data.action) {
                                case "onGameExit":
                                    jsBridge.toast('退出页面');
                                    break;
                                case "onZjUserBehavior":
                                    jsBridge.toast('onZjUserBehavior[' + data.message + ']');
                                    break;
                            }
                            break;
                    }
                })
            },
            removeListener() {
                jsBridge.zj.removeListener()
            },
            rewardVideo() {
                uni.showLoading({
                    title: '加载中...',
                    mask: true
                })
                // 激励广告，监听 event 为 RewardVideo
                jsBridge.zj.rewardVideo({
                    // 必须，字符串类型，激励广告广告位ID
                    posId: "J7232377272",
                    // 用户标识
                    userId: "13800138000",
                }, (succ, data) => {
                    console.log("succ = " + succ + " & data = " + data)
                });
            },
            fullScreenVideo() {
                uni.showLoading({
                    title: '加载中...',
                    mask: true
                })
                jsBridge.zj.fullScreenVideo({
                    // 必须，字符串类型，全屏视频广告位ID
                    posId: "J9009795731",
                })
            },
            interstitial() {
                uni.showLoading({
                    title: '加载中...',
                    mask: true
                })
                jsBridge.zj.interstitial({
                    // 必须，字符串类型，插屏广告位ID
                    posId: "J3599641705",
                })
            },
            topBanner() {
                // Banner，监听 event 为 Banner
                jsBridge.zj.banner({
                    // 字符串类型，Banner广告位ID
                    posId: "J6683233389",
                    // 数字类型，到顶部的距离
                    top: 20,
                    // 数字类型，刷新间隔(秒)，为0或30~120之间的数字，单位为秒，0表示不自动轮播
                    refreshInterval: 10
                })
            },
            bottomBanner() {
                // Banner，监听 event 为 Banner
                jsBridge.zj.banner({
                    posId: "J6683233389",
                    // 数字类型，到底部的距离
                    bottom: 20,
                    // 数字类型，刷新间隔(秒)，为0或30~120之间的数字，单位为秒，0表示不自动轮播
                    refreshInterval: 10
                })
            },
            removeBanner() {
                // 移除 Banner，监听 event 为 Banner
                jsBridge.zj.banner({
                    remove: true
                })
            },
            contentVideo() {
                // 短视频内容，监听 event 为 ContentVideo
                jsBridge.zj.contentVideo({
                    // 字符串类型，短视频内容广告ID
                    posId: "J4961952628"
                })
            },
            loadH5() {
                // H5内容页，监听 event 为 H5
                jsBridge.zj.h5({
                    // 必须，字符串类型，广告位ID
                    posId: "J7651572906",
                    // 必须，用户信息
                    user: {
                        // 用户ID
                        userID: "13800138000",
                        // 用户名
                        userName: "张三",
                    }
                })
            },
            loadTask(pageName) {
                jsBridge.zj.task({
                    posId: "J8934282083",
                    page: pageName,
                    userId: "18888888888",
                    title: "悬赏任务",
                    darkTheme: true
                }, function(succ, data) {
                    if (!succ) {
                        alert(JSON.stringify(data))
                    }
                })
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>