<template>
  <div
    ref="reader-wrap"
    :class="[
      'reader',
      { 'reader-fixed': five_template && !five_template_clicked }
    ]"
  >
    <x-reader
      ref="reader"
      :class="{
        'x-reader--subscribe': weakSubscribe,
        'x-reader--subscribe__qrcode':
          (subscribeQRcode && !subscribeQRcodeHorizontal) || active
      }"
      :text="text"
      :ad="showAdStatus"
      :adframe="showAdIframe"
      :gift="true"
      :shelf="is_on"
      :showFans="showFans"
      @route="go"
      @addShelf="addShelf"
      @next="next"
      @prev="prev"
      @direction="direction"
      @horizontal-mounted="horizontalMounted"
      @closeBanner="closeBanner"
      @vertical-mounted="verticalMounted"
      @show-gift="showGiftPopup"
      @share="share"
    >
      <!-- <template v-if="showGift">
        <v-touch class="send-gift">
          <v-touch class="send-gift__btn"
                   @tap="showGiftPopup">送礼物</v-touch>
        </v-touch>
      </template>-->
      <!-- <template>
        <div class="ad-wrapper">
          <div data-product="20009"
               data-android-channal="zwsch5a20190102xxl"
               data-ios-channal="zwsch5a20190102xxl"></div>
        </div>
      </template> -->
      <!-- 5元充值入口 -->
      <div
        slot="top"
        class="five_template_entry"
        ref="five_template"
        v-if="five_template && !five_template_clicked"
      >
        <v-touch @tap="tapFiveTemplate">
          <img :src="five_template.banner" alt="" />
        </v-touch>
        <v-touch
          tag="span"
          class="close-area"
          @tap="closeFiveTemplate"
        ></v-touch>
        <v-touch
          tag="span"
          class="close-text-area"
          @tap="closeFiveTemplate"
        ></v-touch>
      </div>
      <!-- 弱关添加 -->
      <template v-if="weakSubscribe">
        <!-- 横版 -->
        <v-touch
          v-if="weakSubscribeHorizontal"
          v-show="!loading"
          key="weakSubscribeHorizontal"
          class="weak-subscribe-wrap--horizontal"
          :style="weakSubscribeStyle"
          @tap="weakSubscribeEv"
        >
          <p
            v-for="i in weakSubscribeHorizontalNum"
            class="weak-subscribe--horizontal weak-subscribe"
            :key="'weakSubscribeHorizontalText-' + i"
          >
            {{ weakSubscribeText[i % weakSubscribeText.length] }}
          </p>
        </v-touch>

        <!-- 竖版 -->
        <v-touch
          v-else
          v-show="!loading"
          key="weakSubscribeVertical"
          @tap="weakSubscribeEv"
        >
          <p class="weak-subscribe--vertical weak-subscribe">
            {{ weakSubscribeTextRandom() }}
          </p>
        </v-touch>
      </template>

      <template v-if="guidepersonalaccount && !crm_guide_pool">
        <!-- 微点需求 -->
        <v-touch
          v-show="!loading"
          key="weakSubscribeVertical"
          @tap="wdQrcodeEv('text')"
        >
          <p class="weak-subscribe--vertical weak-subscribe">
            {{ guidepersonalaccount.title }}
          </p>
        </v-touch>
      </template>

      <!-- crm_guide_pool -->
      <template v-if="crm_guide_pool">
        <v-touch
          v-show="!loading"
          key="weakSubscribeVertical"
          @tap="wdQrcodeEv('text')"
        >
          <p class="weak-subscribe--vertical weak-subscribe">
            {{ crm_guide_pool.title }}
          </p>
        </v-touch>
      </template>

      <!-- 关注二维码 -->
      <template v-if="subscribeQRcode && isChannel123">
        <!-- 横版 -->
        <v-touch
          class="subscribe-qrcode"
          v-if="subscribeQRcodeHorizontal"
          v-show="!loading"
          @tap="toSubscribe"
        >
          <img :src="subscribeQrcodeImg" alt />
        </v-touch>
        <!-- 竖版 -->
        <v-touch
          class="subscribe-qrcode"
          slot="ufooter"
          v-show="!loading"
          @tap="toSubscribe"
          v-else
        >
          <img :src="subscribeQrcodeImg" alt />
        </v-touch>
      </template>
      <!-- 底部标题 -->
      <template v-if="text.push_title && text.push_title.length">
        <v-touch slot="ufooter" class="title_list">
          <div class="title">猜你喜欢</div>
          <div class="title-list-box">
            <v-touch
              class="title-item"
              v-for="(t, i) in text.push_title"
              :key="i"
              @tap="jumpNovel(t.link)"
            >
              <p>{{ t.title }}</p>
              <img :src="t.img" :alt="t.title" />
            </v-touch>
          </div>
        </v-touch>
      </template>
      <!-- 优先级最高 轮播显示 -->
      <template v-if="showPriorityAd && pddAdArr.length">
        <mt-swipe
          slot="ufooter"
          v-show="!loading"
          class="reader-footer__banners"
        >
          <mt-swipe-item v-for="(ad, index) in pddAdArr" :key="index">
            <v-touch @tap="pddActivity(index)">
              <img v-lazy="ad['pic-url']" alt="" />
            </v-touch>
          </mt-swipe-item>
        </mt-swipe>
      </template>
      <!-- 活动添加 -->
      <template v-if="banners.length">
        <mt-swipe
          slot="ufooter"
          v-show="!loading"
          class="reader-footer__banners"
        >
          <mt-swipe-item v-for="(b, index) in banners" :key="index">
            <v-touch @tap="activeEv(index)">
              <img v-lazy="b.img" alt="" />
            </v-touch>
          </mt-swipe-item>
        </mt-swipe>
      </template>
      <!-- <template v-if="active">
        <v-touch v-if="active_horizontal"
                 v-show="!loading"
                 class="active_img"
                 @tap="activeEv">
          <img :src="active_img"
               alt>
        </v-touch>
        <v-touch v-else
                 slot="ufooter"
                 v-show="!loading"
                 class="active_img"
                 @tap="activeEv">
          <img :src="active_img"
               alt>
        </v-touch>
      </template> -->
      <!-- 底部评价功能 -->
      <template v-if="showComment">
        <div class="click-box">
          <v-touch
            class="click-box__item"
            :class="[chooseTap === 'dislike' ? 'cur' : '']"
            @tap="uploadTap('dislike')"
          >
            <span class="tap-icon"></span>差评
          </v-touch>
          <v-touch
            class="click-box__item"
            :class="[chooseTap === 'favor' ? 'cur' : '']"
            @tap="uploadTap('favor')"
          >
            <span class="zan-icon"></span>好看
          </v-touch>
        </div>
      </template>

      <!-- 引导收藏 -->
      <template>
        <v-touch class="click-toCollection" @tap="showCollectionWrap = true"
          >&gt;&gt;点击此处，收藏本书&lt;&lt;</v-touch
        >
      </template>

      <!-- 引导文字链 -->
      <template v-if="bannerSubText.title">
        <v-touch class="click-toCollection" @tap="bannerSubEv">{{
          bannerSubText.title
        }}</v-touch>
      </template>

      <template v-if="showShareEntry">
        <v-touch class="to-share__entry" @tap="toShare">
          <img src="../assets/share_entry.png" alt="" />
        </v-touch>
      </template>

      <template v-if="showAppad && isAndroid">
        <v-touch slot="ufooter" class="active_img" @tap="toAppAdPage">
          <img :src="appAdBanner" />
        </v-touch>
      </template>
      <!-- 引导活动banner -->
      <template v-if="guidepersonalaccount.banner && !crm_guide_pool">
        <v-touch
          slot="ufooter"
          class="active_img"
          @tap="wdQrcodeEv('banner')"
          style="padding-bottom: .2rem"
        >
          <img :src="guidepersonalaccount.banner" />
        </v-touch>
      </template>
      <!-- crm_guide_pool banner -->
      <template v-if="crm_guide_pool">
        <v-touch
          slot="ufooter"
          class="active_img"
          @tap="wdQrcodeEv('banner')"
          style="padding-bottom: .2rem"
        >
          <img :src="crm_guide_pool.banner" />
        </v-touch>
      </template>
    </x-reader>
    <div class="reader-loading" v-show="loading">
      <mt-spinner
        class="reader-loading-icon"
        type="fading-circle"
        color="#32a1ff"
      ></mt-spinner>
    </div>
    <div class="reader-guide" v-if="new_reader && !hideGuide">
      <transition name="fade" @after-leave="new_reader_guide2 = true">
        <div
          class="reader-guide-1"
          v-if="new_reader_guide1"
          @click="new_reader_guide1 = false"
        >
          <div class="reader-guide-1-1"></div>
          <div class="reader-guide-1-2"></div>
          <div class="reader-guide-1-3"></div>
          <div class="reader-guide-1-4">
            <img src="https://cdn-novel.bookkks.com/static/img/uppage.png" />
          </div>
          <div class="reader-guide-1-5">
            <img
              src="https://cdn-novel.bookkks.com/static/img/readermiddel.png"
            />
          </div>
          <div class="reader-guide-1-6">
            <img src="https://cdn-novel.bookkks.com/static/img/downpage.png" />
          </div>
          <div class="reader-guide-1-7"></div>
          <div class="reader-guide-1-8"></div>
          <div class="reader-guide-1-9"></div>
        </div>
      </transition>
      <transition name="fade" @after-leave="new_reader = false">
        <div
          v-if="new_reader_guide2"
          @click="new_reader_guide2 = false"
          class="reader-guide-2"
        >
          <img src="https://cdn-novel.bookkks.com/static/img/readremind.png" />
        </div>
      </transition>
    </div>
    <div
      class="share"
      @touchmove.prevent
      v-show="isshowshare"
      @click="isshowshare = !isshowshare"
    >
      <img src="../assets/分享.png" />
    </div>
    <div
      :class="['ad-status', { 'with-no-activity': !active }]"
      v-if="showAdImg"
      @click="toggleAdType($event)"
    >
      <img :src="adStatusImg" />
    </div>
    <div
      class="coupon-entry__wrap"
      v-if="showCouponEntry && guidepersonalaccount"
      @click="wdQrcodeEv('reader_float')"
    >
      <img src="../assets/coupon-entry.png" alt="" />
    </div>
    <!-- 签到提示入口 -->
    <!-- <template v-if="showSignNoticeWrap">
      <div class="sign-notice__wrap" @click="showSignNoticeWrap = false" @touchmove.prevent>
        <img src="../assets/sign_notice__wrap.png"
            alt="">
      </div>
    </template> -->
    <!-- 收藏引导入口 -->
    <template v-if="showCollectionWrap">
      <div
        class="sign-notice__wrap"
        @click="showCollectionWrap = false"
        @touchmove.prevent
      >
        <img :src="isAndroid ? collectAndroidBg : collectIOSBg" alt="" />
      </div>
    </template>
  </div>
</template>
<script>
import {
  Reader,
  BookCity,
  BookStock,
  Rank,
  BookDetail,
  BookCatalog,
  BookRecommend,
  Pay,
  Subscribe,
  BookShare
} from "./namespace.js";
import {
  SingActive,
  Book1,
  Book2,
  Book3,
  Book4,
  Chapter1,
  Chapter2,
  WeakSubscribe,
  Sign
} from "../components/prompt";
import { popupGift } from "../components/popup";
import {
  getContent,
  addShelf,
  getDetail,
  getError,
  subscribeByRMB,
  subscribeByBalance,
  getweakSubscribeQR,
  chapterComment,
  getChapterComment,
  getGiftList,
  sendGift,
  getSendGiftRecord,
  getRecordShare,
  getWechatJsConfig,
  recordAdClickStatus,
  getReaderAdBanner,
  getMergeBanner
} from "../api";
import {
  clearStorageChapter,
  loadIframeAsync,
  removeIframe,
  crmBannerRandom,
  getRandomCode,
  clipboard,
  needToCopy,
  recordCode
} from "../util";
import XReader from "../components/reader";
import bus from "../components/reader/bus.js";
import wx from "weixin-js-sdk";
import useWxConfig from "../util/share";
// import chapter from "../components/reader/chapter.js";

// 异步加载广告sdk
function loadAdJs() {
  return new Promise((resolve, reject) => {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//cdn.ipadview.com/jssdk/v3/combo.bundle.js";
    document.getElementsByTagName("head")[0].appendChild(script);
    script.onload = () => {
      resolve();
    };
    script.onerror = e => reject(e);
  });
}

const AD_BANNER_URL = "https://cdn-novel.bookkks.com/h5/ad/pdd/";
const AD_URL = "/advertise/pdd?link=";
const AD_MAX_LIMIT_TIMES = 15;
const PDD_AD_REDIRECT = "//banner.66kshu.com/wapredirect";

export default {
  name: Reader.name,
  components: {
    "x-reader": XReader
  },
  data() {
    return {
      showFans: false,
      readerOptions: bus.preset,
      text: {},
      is_on: true,
      loading: true,
      new_reader: false,
      new_reader_guide1: false,
      new_reader_guide2: false,
      active: window.options.is_show_activity,
      active_img: window.options.activity_img,
      active_horizontal: false,
      weakSubscribe: false,
      weakSubscribeHorizontal: false,
      weakSubscribeHorizontalNum: 0,
      weakSubscribeStyle: {},
      weakSubscribeText: [
        "【更多精彩内容  请点击阅读】",
        "【点击阅读海量小说】"
      ],
      subscribeQRcode: true,
      subscribeQRcodeHorizontal: true,
      isChannel123: window.options.distribution_channel_id === 123,
      subscribeQrcodeImg: window.options.special_bottom_sub_banner,
      chooseTap: "",
      canTap: true,
      hideGuide: window.options.hidden_reader_bootstrap,
      showComment: false,
      showGift: false,
      isshowshare: false,
      bookdetail: {},
      href: "",
      showAdStatus: false,
      showAdIframe: false,
      canBeClickToNext: true,
      isFree: require("../assets/to_free.png"),
      isOrder: require("../assets/to_pay.png"),
      adType: localStorage.getItem("adType") || "1",
      adLimit: false,
      freeTimes: 0,
      adCallback: false,
      disableAdMode: false,
      showAppad: window.options.appad,
      appAdBanner: window.options.appad_banner,
      showShareEntry: window.options.share_switch,
      randomBannerIndex: 0,
      guidepersonalaccount: window.options.guidepersonalaccount,
      showPriorityAd: !!window.options.self_pa_ad_switch,
      pddAdArr: [],
      banners: window.options.banners,
      showSignNoticeWrap: false,
      showCollectionWrap: false,
      collectAndroidBg: "//cdn-novel.bookkks.com/h5/android_collect.png",
      collectIOSBg: "//cdn-novel.bookkks.com/h5/iphone_collect.png",
      bannerSubText: {},
      crm_guide_pool: "",
      five_template: "",
      five_template_clicked: true,
      copyVal: ""
    };
  },
  computed: {
    chapterText() {
      return this.text.content;
    },
    adStatusImg() {
      return this.adType === "1" ? this.isOrder : this.isFree;
    },
    showAdImg() {
      return (
        window.options.adTargetId &&
        this.bookdetail.charge_type === "CHAPTER" &&
        this.text.is_show_ad
      );
    },
    adBannerUrl() {
      let randomIndex = window.options.pdd_ad[this.randomBannerIndex];
      if (randomIndex) {
        return AD_BANNER_URL + randomIndex + ".jpg";
      } else return "";
    },
    isAndroid() {
      let u = navigator.userAgent;
      return u.indexOf("iPhone") === -1;
    },
    showCouponEntry() {
      return (
        this.text.sequence >= 7 &&
        window.options.distribution_channel_id === 6687
      );
    }
  },
  watch: {
    text(newt, oldt) {
      // if (newt.is_show_share_button === 1) {
      //   let href = window.location.href;
      //   if (this.isIphone()) {
      //     href = window.signUrl;
      //   }
      //   // getWechatJsConfig(
      //   //   this.text.bid,
      //   //   this.text.chapter_id,
      //   //   encodeURIComponent(href)
      //   // ).then(r => {
      //   //   this.jssdkinit(r, r.share_url, this.bookdetail);
      //   // });
      // }
      // crm随机title和banner
      this.crm_guide_pool = crmBannerRandom(newt.crm_guide_pool);
      // 和喜悦相关的分享
      const xiyue_config = window.options.xiyue_info;
      const is_leyue_site = !!~location.href.indexOf(".leyuee");
      console.log("is leyuee site:", is_leyue_site);
      if (xiyue_config && is_leyue_site) {
        let book = this.bookdetail;
        let redirect_url = `${location.origin}/reader?bid=${book.book_id}&cid=${book.first_cid}`;
        let configuration = {
          // config: newt.share_config,
          book: {
            cover_url: book.cover_url,
            book_summary: book.book_summary,
            book_name: book.book_name
          },
          link:
            xiyue_config.register_url +
            "?openid=" +
            xiyue_config.openid +
            "&redirect=" +
            encodeURIComponent(redirect_url)
        };
        useWxConfig(wx, configuration);
      }
    },
    disableAdMode(val) {
      if (val) {
        console.log("ad disabled");
        this.showAdStatus = false;
        localStorage.setItem("ad_times", AD_MAX_LIMIT_TIMES);
        this.initPayType();
      }
    },
    adType(v) {
      if (v === "1") {
        this.justShowAds(this.text.is_visiable_ad);
      }
    }
  },
  methods: {
    closeBanner() {
      let readQuery = localStorage.getItem("readQuery");
      if (readQuery) {
        readQuery = JSON.parse(readQuery);
        readQuery.isClose = true;
        localStorage.setItem("readQuery", JSON.stringify(readQuery));
      }
      this.showFans = false;
    },
    share() {
      this.isshowshare = !this.isshowshare;
      getRecordShare(this.$route.query.bid, this.$route.query.cid).then(r => {
        //   this.$router.push({
        //   name:BookShare.name,
        //   query:{
        //     bid:this.$route.query.bid,
        //     head_img:r.head_img,
        //     share_url:r.share_url,
        //     username:r.username
        //   }
        // })
      });
    },
    toShare() {
      let { share_domain, uid, distribution_channel_id } = window.options;
      let { bid, cid } = this.$route.query;
      location.href = `${share_domain}?bid=${bid}&cid=${cid}&uid=${uid}&distribution_channel_id=${distribution_channel_id}`;
    },
    activeEv(index) {
      window.location.href = `${
        this.banners[index].jump_url
      }&redirect_url=${encodeURIComponent(window.location.href)}`;
    },
    bannerSubEv() {
      window.location.href = `${
        this.bannerSubText.jump_url
      }&redirect_url=${encodeURIComponent(window.location.href)}`;
    },
    pddActivity(i) {
      let token = this.pddAdArr[i].token;
      const { uid } = window.options;
      window.location.href = `${PDD_AD_REDIRECT}?token=${token}&uid=${uid}`;
    },
    toAppAdPage() {
      window.location.href = `${window.location.origin +
        window.options.appad_url}`;
    },
    getUuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid;
    },
    go(name) {
      switch (name) {
        case "back":
          history.back(-1);
          break;
        case "home":
          this.$router.push(BookCity.route);
          break;
        case "category":
          this.$router.push(BookStock.route);
          break;
        case "rank":
          this.$router.push(Rank.route);
          break;
        case "detail":
          this.$router.push({
            name: BookDetail.name,
            query: { id: this.text.bid }
          });
          break;
        case "catalog":
          this.$router.push({
            name: BookCatalog.name,
            query: this.text.bid
              ? {
                  id: this.text.bid,
                  sequence: this.text.sequence
                }
              : { id: this.$route.query.bid }
          });
          break;
      }
    },
    addShelf() {
      addShelf(this.text.bid).then(r => {
        this.is_on = true;
        this.$Toast("加入书架成功");
      });
    },
    next() {
      // 静默复制
      this.doCopy();
      // 显示广告的时候 不允许下一章阅读
      if (this.showAdStatus) {
        !this.canBeClickToNext &&
          this.$Toast({
            message: "点击广告，并在广告页面中点击其他内容，停留20秒",
            duration: 6000
          });
        return;
      }
      if (this.text.next_jump) {
        location.href = this.text.next_jump_url;
      } else {
        if (this.text.next_cid) {
          this.$router.replace({
            path:`/reader/${this.getUuid()}`,
            query: {
              bid: this.text.bid,
              cid: this.text.next_cid
            }
          });
        } else if (this.text.next_cid === 0) {
          this.$router.push({
            name: BookRecommend.name,
            query: { bid: this.$route.query.bid }
          });
        } else {
          this.$Toast("系统错误");
        }
      }
    },
    prev() {
      if (this.text.prev_cid) {
        this.$router.replace({
          name: Reader.name,
          query: {
            bid: this.text.bid,
            cid: this.text.prev_cid
          },
          params: {
            jump: -1
          }
        });
      } else {
        this.$Toast("第一章！");
      }
    },
    direction(val) {
      if (val === "horizontal" && !localStorage.getItem("old_reader")) {
        this.bus.$emit("menu");
        localStorage.setItem("old_reader", "true");
        this.new_reader = true;
        this.$nextTick(() => {
          this.new_reader_guide1 = true;
        });
      }
      this.weakSubscribeStyle = {};
    },
    subscribe({ bid, chapter_id: cid }) {
      if (this.$route.query.bid == bid && this.$route.query.cid == cid) {
        this.getContent(this.$route.query.bid, this.$route.query.cid)
          .then(r => {
            this.text = r;
          })
          .catch(r => {
            this.text = {};
          });
      } else {
        this.$router.replace({
          name: Reader.name,
          query: {
            bid: bid,
            cid: cid
          }
        });
      }
    },
    getContent(bid, cid, next, from, code) {
      //由于beforeRouteUpdate钩子函数会调用getContent，所以路由或者页面跳转不应该在在此函数，不然会造beforeRouteUpdate钩子函数的next不被调用
      /*
        错误处理
        10012       未关注
        10014       全本订阅余额不足（rmb）
        10015       章订余额不足（充值）
        10016       购买章节(书币)
        10017       购买图书（书币）
        10019       全本订阅余额不足（充值）
        10023       未关注 (跳转渠道接诶)
        ----- 以上是弹窗  -------
        10020       全本订阅余额不足,直接进入充值页
        10021       章节订阅余额不足,直接进入充值页
        10022       进入版权站
        */
      this.loading = true;
      let adStatus = 0;
      if (this.adType === "1") {
        if (this.showAdStatus) {
          adStatus = 0;
        } else {
          adStatus = 1;
        }
      }
      return getContent(bid, cid, adStatus, from, code)
        .catch(r => {
          this.loading = false;
          const data = r.data.data;
          switch (r.data.code) {
            case 10012:
              if (this.is_update) {
                r.url = data.src;
              } else {
                // this.$router.push({
                //   name: Subscribe.name,
                //   query: { src: data.src, head_img: data.head_img }
                // });
                location.replace(data.src);
              }
              break;
            case 10014:
              Book2(data)
                .then(r => {
                  subscribeByRMB(data);
                })
                .catch(e => {
                  if (e === "close") {
                    if (!localStorage.getItem("rc")) {
                      // this.$router.back();
                      history.back();
                    }
                  }
                });
              break;
            case 10015:
              Chapter1(data).then(r => {
                this.$router.push({ name: Pay.name, query: data });
              });
              break;
            case 10016:
              Chapter2(data).then(r => {
                this.loading = true;
                subscribeByBalance(
                  data.book_id,
                  data.chapter_id,
                  r.checked
                ).then(r => {
                  this.subscribe(r);
                });
              });
              break;
            case 10017:
              Book4(data)
                .then(r => {
                  this.loading = true;
                  subscribeByBalance(data.book_id, data.chapter_id).then(r => {
                    this.subscribe(r);
                  });
                })
                .catch(e => {
                  if (!localStorage.getItem("rc")) {
                    // this.$router.back();
                    history.back();
                  }
                });
              break;
            case 10019:
              Book3(r.data.data)
                .then(res => {
                  this.$router.push({ name: Pay.name, query: { ...data, code: r.data.code } });
                })
                .catch(e => {
                  if (e === "close") {
                    if (!localStorage.getItem("rc")) {
                      // this.$router.back();
                      history.back();
                    }
                  }
                });
              break;
            case 10020:
            case 10021:
              this.$router.push({
                name: Pay.name,
                query: { ...data, code: r.data.code }
              });
              break;
            case 10022:
              location.replace(data.url);
              break;
            case 10023:
              location.assign(data.url);
              break;
            default:
              break;
          }
          return Promise.reject(r);
        })
        .then(r => {
          this.resetChooseTap();
          this.subscribeQRcode = r.is_had_subscribe;
          this.loading = false;
          this.weakSubscribe = !!r.is_show_subscribe_link;
          this.canTap = !!r.chapter_comment;
          this.chooseTap = r.chapter_comment;
          this.showGift = true;
          this.five_template = r.five_template;
          this.fiveTemplateLogic(r.five_template);
          this.recordReadChapter();
          //是否显示个人banner

          let readQuery = localStorage.getItem("readQuery");
          if (readQuery) {
            readQuery = JSON.parse(readQuery);
            let cur = new Date().toDateString();
            let time = new Date(readQuery.lastReadTime).toDateString();
            if (cur != time) {
              localStorage.removeItem("readTemp");
              readQuery.lastReadTime = new Date();
              readQuery.isClose = false;
              localStorage.setItem("readQuery", JSON.stringify(readQuery));
            }
          } else {
            let data = {
              lastReadTime: new Date(),
              firstReadTime: new Date(),
              isClose: false
            };
            localStorage.setItem("readQuery", JSON.stringify(data));
          }
          let readerTemp = localStorage.getItem("readTemp");
          if (readerTemp) {
            let temp = JSON.parse(readerTemp);
            let same = false;
            let allweek = false;
            temp.map(item => {
              if (item.bid == bid && item.cid == cid) same = true;
            });
            console.log(same);
            if (!same) {
              temp.push({ bid: bid, cid: cid });
              localStorage.setItem("readTemp", JSON.stringify(temp));
            }
            if (readQuery) {
              let firstTime = new Date(
                JSON.parse(localStorage.getItem("readQuery")).firstReadTime
              );
              let firstTimeZero = new Date(firstTime.toLocaleDateString());
              if (Math.abs(firstTimeZero - new Date()) < 7 * 24 * 3600 * 1000) {
                allweek = false;
              } else {
                allweek = true;
              }
              if (
                temp.length >= 4 &&
                temp.length <= 22 &&
                temp.length % 2 == 0 &&
                !readQuery.isClose &&
                !allweek
              ) {
                this.showFans = true;
              } else {
                this.showFans = false;
              }
            }
          } else {
            let temp = [
              { bid: this.$route.query.bid, cid: this.$route.query.cid }
            ];
            localStorage.setItem("readTemp", JSON.stringify(temp));
          }

          // 显示广告的状态
          console.log("ad status", !!r.is_show_ad);
          console.log("currnet ad type", this.adType);
          if (window.options.adTargetId) {
            this.canBeClickToNext = !r.is_show_ad;
          }
          console.log("btn status", this.canBeClickToNext);
          if (!this.canBeClickToNext) {
            // TODO 待预发测试 本地测试ok
            if (r.is_show_ad) {
              // 广告边界判断
              let times = localStorage.getItem("ad_times");
              if (times && parseInt(times) >= AD_MAX_LIMIT_TIMES) {
                this.adLimit = true;
                this.canBeClickToNext = true;
                this.showAdStatus = false;
                if (window.adcombo) window.adcombo.reset();
              } else {
                this.adType = "1";
                this.showAdStatus = !!r.is_show_ad;
                // this.showAdIframe = !!r.is_show_ad;
                this.adLimit = false;
                // 初始化ad
                if (this.hitAdTarget()) this.initAd();
              }
            } else {
              // this.showAdIframe = false;
              this.showAdStatus = false;
              this.adLimit = true;
              this.adType = "2";
            }
          }
          console.log("current ad status", this.showAdStatus);
          // this.getChapterComment(bid,cid).then(r => {
          //   this.canTap = !!r
          //   this.chooseTap = r
          // })
          return r;
        });
    },
    weakSubscribeTextRandom() {
      return this.weakSubscribeText[Math.floor(Math.random() * 3)];
    },
    weakSubscribeEv() {
      WeakSubscribe();
    },
    wdQrcodeEv(from) {
      location.href = this.guidepersonalaccount.link + "&p_src=" + from;
    },
    crmEvent() {
      location.href = this.guidepersonalaccount.link;
    },
    horizontalMounted(page) {
      if (this.weakSubscribe) {
        this.weakSubscribeHorizontal = true;
        this.weakSubscribeStyle = {
          width: page.scrollWidth + "px"
        };
        this.weakSubscribeHorizontalNum = page.total;
      }
      if (this.subscribeQRcode) this.subscribeQRcodeHorizontal = true;
      if (this.active) this.active_horizontal = true;
    },
    verticalMounted() {
      this.weakSubscribeHorizontal = false;
      this.subscribeQRcodeHorizontal = false;
      this.active_horizontal = false;
    },
    toSubscribe() {
      getweakSubscribeQR().then(r => {
        this.$router.push({
          name: Subscribe.name,
          query: { src: r.src, head_img: r.head_img }
        });
      });
    },
    getChapterComment(bid, cid) {
      return getChapterComment(bid, cid);
    },
    uploadTap(type) {
      // TODOS 需要选择评论类型并上传到服务器
      if (this.canTap) return;
      let { bid, cid } = this.$route.query;
      chapterComment(bid, cid, type).then(r => {
        this.chooseTap = type;
        // 每次点击都将章节对应的tap存入本地缓存
        localStorage.setItem(cid, this.chooseTap);
      });
    },
    resetChooseTap() {
      this.chooseTap = "";
    },
    showGiftPopup() {
      popupGift({ bid: this.text.bid }).catch(e => {
        this.$router.push({ name: Pay.name });
      });
    },
    jumpNovel(url) {
      let options = {
        bg: this.readerOptions.bg,
        font: this.readerOptions.font.default,
        night: this.readerOptions.night
      };
      location.href = `${url}&bg=${options.bg}&font=${options.font}&night=${options.night}`;
    },
    justifyRouter(router) {
      if (!router.query.bid) {
        this.$router.replace("/");
        return false;
      }
      if (typeof router.query.bid !== "string") {
        this.$router.replace({
          name: Reader.name,
          query: {
            bid: router.query.bid[0],
            cid: router.query.cid
          }
        });
        return false;
      } else if (router.query.bid.split(",").length > 1) {
        this.$router.replace({
          name: Reader.name,
          query: {
            bid: router.query.bid.split(",")[0],
            cid: router.query.cid
          }
        });
        return false;
      }
      return true;
    },
    isIphone() {
      const u = navigator.userAgent;
      // return u.indexOf("iPhone") !== -1;
      return true;
    },
    jssdkinit(config, share_url, share_info) {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名，见附录1
        jsApiList: [
          "onMenuShareTimeline",
          "onMenuShareAppMessage",
          "onMenuShareQQ",
          "onMenuShareWeibo"
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
      var that = this;
      wx.ready(function() {
        wx.onMenuShareTimeline({
          title: share_info.book_name + "：" + that.bookdetail.book_summary,
          desc: "我正在阅读《" + share_info.book_name + "》，超好看！",
          link: share_url, // 分享链接
          imgUrl: share_info.cover_url,
          success: function() {
            // this.$Toast("分享成功");
          },
          cancel: function() {
            // this.$Toast("取消分享");
          }
        });
        wx.onMenuShareAppMessage({
          title: share_info.book_name,
          desc: that.bookdetail.book_summary,
          link: share_url, // 分享链接
          imgUrl: share_info.cover_url,
          success: function() {
            // this.$Toast("分享成功");
          },
          cancel: function() {
            // this.$Toast("取消分享");
          }
        });
        wx.onMenuShareQQ({
          title: share_info.book_name,
          desc: that.bookdetail.book_summary,
          link: share_url, // 分享链接
          imgUrl: share_info.cover_url,
          success: function() {
            // this.$Toast("分享成功");
          },
          cancel: function() {
            // this.$Toast("取消分享");
          }
        });
        wx.onMenuShareWeibo({
          title: share_info.book_name,
          desc: that.bookdetail.book_summary,
          link: share_url, // 分享链接
          imgUrl: share_info.cover_url,
          success: function() {
            // this.$Toast("分享成功");
          },
          cancel: function() {
            // this.$Toast("取消分享");
          }
        });
      });
      wx.error(function(res) {
        console.log(res);
      });
    },
    observerAd(book) {
      if (window.adcombo) {
        console.log(book);
        // 配置sdk
        adcombo.setup({
          product: "303",
          channel: window.options.cpc_channel,
          bookName: book.book_name,
          bookId: book.book_id.charCodeAt(1)
        });
        window.adcombo.onready(() => {
          //用户广告浏览时间满足要求时回调
        });
        adcombo.onsuccess(() => {
          // 广告预览时间够 可阅读下一章
          this.limitAdTimes();
          this.showAdStatus = false;
          this.canBeClickToNext = true;
          this.text.is_show_ad = 0;
          // 成功看完广告
          console.log("callback ad status", this.showAdStatus);
          recordAdClickStatus(this.$route.query.bid, this.$route.query.cid);
        });
        window.adcombo.ondisable &&
          window.adcombo.ondisable(() => {
            // 广告禁用 转换成收费模式
            console.log("into disabled api");
            this.disableAdMode = true;
          });
        //用户广告浏览时间不满足时回调
        adcombo.onfail(() => {
          // 预览时间不够 无法继续触发下一章
          console.log("ad fail");
          // this.showAdStatus = true;
          recordAdClickStatus(
            this.$route.query.bid,
            this.$route.query.cid,
            "CLICK"
          );
        });
        adcombo.run();
      }
    },
    showAdObserve(showAdCondition) {
      if (showAdCondition) {
        console.log("show monitor");
        // 显示监听器 并开启看广告任务
        // adcombo.start();
        // adcombo.showMonitor();
        // adcombo.monitor.show();
      }
    },
    initAd() {
      if (window.adcombo && this.showAdStatus) {
        setTimeout(() => {
          // window.adcombo.scanAdSlot();
          window.adcombo.loadAsync({
            el: ".ad-wrapper"
          });
          console.log("init ad status", this.showAdStatus);
          this.showAdObserve(this.showAdStatus);
        }, 50);
      }
    },
    hitAdTarget() {
      if (this.adType === "2") return false;
      if (
        this.bookdetail.charge_type === "CHAPTER" &&
        window.options.adTargetId
      ) {
        return true;
      }
      return false;
    },
    toggleAdType(e) {
      if (this.adLimit) {
        this.$Toast("今日次数已用完，明日可继续免费阅读");
        return;
      }
      // console.log(e.target);
      e.target.classList = "ad-rotate";
      setTimeout(() => {
        e.target.classList = "";
      }, 800);
      if (this.adType === "1") {
        this.initPayType();
      } else {
        // 重新初始化广告
        this.initFreeType();
      }
      localStorage.setItem("adType", this.adType);
    },
    initFreeType() {
      this.adType = "1";
      this.showAdStatus = !!this.text.is_show_ad;
      this.$set(this, "showAdIframe", !!this.text.is_show_ad);
      if (this.showAdStatus && !this.canBeClickToNext) {
        // if (window.adcombo) window.adcombo.monitor.show();
      }
      if (this.hitAdTarget()) this.initAd();
      console.log("init free version --- see ads");
    },
    initPayType() {
      this.adType = "2";
      this.showAdStatus = false;
      this.$set(this, "showAdIframe", false);
      if (window.adcombo) {
        // adcombo.cancel();
        // adcombo.hideMonitor();
        adcombo.monitor.hide();
        // this.canBeClickToNext = true;
      }
      console.log("init pay version -- pay coins");
    },
    limitAdTimes() {
      // 每日广告次数限制
      let times = parseInt(localStorage.getItem("ad_times") || 0);
      let ad_today = new Date().toLocaleDateString();
      let ad_days = localStorage.getItem("ad_days") || ad_today;
      console.log("ad-times", times);
      if (ad_days === ad_today) {
        if (times <= AD_MAX_LIMIT_TIMES)
          localStorage.setItem("ad_times", times + 1);
        else {
          // 超过15 次 给提示
          this.$Toast("今日次数已用完，明日可继续免费阅读");
          localStorage.setItem("ad_days", ad_today);
          this.adLimit = true;
          this.initPayType();
        }
      } else {
        localStorage.setItem("ad_times", 1);
        this.adLimit = false;
        this.initFreeType();
      }
      localStorage.setItem("adType", this.adType);
    },
    initLimitAdTimes() {
      let times = parseInt(localStorage.getItem("ad_times") || 0);
      let ad_today = new Date().toLocaleDateString();
      let ad_days = localStorage.getItem("ad_days") || ad_today;
      console.log("ad_today", ad_today);
      console.log("ad_days", ad_days);
      if (ad_days === ad_today) {
        if (times >= AD_MAX_LIMIT_TIMES) {
          this.adLimit = true;
          this.initPayType();
        } else {
          this.adLimit = false;
          this.initFreeType();
        }
      } else {
        localStorage.setItem("ad_times", 0);
        this.adLimit = false;
        this.initFreeType();
      }
      localStorage.setItem("ad_days", ad_today);
      localStorage.setItem("adType", this.adType);
    },
    recordReadChapter() {
      localStorage.setItem("rc", this.$route.query.cid);
    },
    clearReadChapter() {
      localStorage.removeItem("rc");
    },
    reportStart(chapterId) {
      if (window.adcombo) {
        window.adcombo.reportReadStart(chapterId);
      }
    },
    reportEnd(chapterId, isShowAd) {
      console.log(chapterId, isShowAd);
      if (window.adcombo && window.options.adTargetId) {
        window.adcombo
          .reportReadEnd(chapterId, {
            ignore: isShowAd
          })
          .then(res => {
            console.log(res);
            let times = localStorage.getItem("ad_times");
            if (res.continueRead === 0) {
              if (times && parseInt(times) >= AD_MAX_LIMIT_TIMES) {
                this.adLimit = true;
                this.canBeClickToNext = true;
                this.showAdStatus = false;
                if (window.adcombo) window.adcombo.reset();
              } else {
                this.canBeClickToNext = false;
                this.showAdStatus = true;
                // window.adcombo.monitor.show();
              }
            } else {
              this.canBeClickToNext = true;
              this.showAdStatus = false;
              if (times && parseInt(times) < AD_MAX_LIMIT_TIMES)
                this.text.is_show_ad = 0;
            }
          })
          .catch(e => console.log(e));
      }
    },
    getAdTimes() {
      let times = localStorage.getItem("ad_times");
      if (times && parseInt(times) >= AD_MAX_LIMIT_TIMES) return false;
      return true;
    },
    justShowAds(status) {
      this.showAdIframe = !!status;
      if (this.showAdIframe && window.adcombo) {
        console.log("scan ads");
        console.log("can be click? :", this.showAdStatus);
        setTimeout(() => {
          window.adcombo.loadAsync({
            el: ".ad-wrapper",
            clickable: this.showAdStatus
          });
        }, 80);
      }
    },
    getRandomBannerIndex() {
      let banner_len = window.options.pdd_ad.length;
      if (banner_len) {
        let random = Math.ceil(Math.random() * banner_len);
        this.randomBannerIndex = random - 1;
      } else return banner_len;
    },
    getReaderAdBanner() {
      let uid = window.options.uid;
      getReaderAdBanner()
        .then(r => {
          let uid = window.options.uid;
          this.pddAdArr = r.map(a => {
            let url = a["pic-url"];
            return Object.assign(a, {
              "pic-url": url + "&uid=" + uid
            });
          });
        })
        .catch(e => {
          this.pddAdArr = [];
        });
    },
    mergeBanner() {
      getMergeBanner()
        .then(r => {
          if (r.img) {
            this.banners.push(r);
            this.bannerSubText = r;
          }
        })
        .catch(e => console.log(e));
    },
    replaceURLAfterChange(cid, newCid) {
      console.log("cid", cid);
      console.log("newCid", newCid);
      let url = window.location.href.replace(`cid=${cid}`, `cid=${newCid}`);
      console.log("replace url", url);
      window.history.replaceState({}, "", url);
    },
    fiveTemplateLogic(five_obj) {
      if (!five_obj) return;
      let five_template_prev_clicked = localStorage.getItem("5_template_day");
      if (five_template_prev_clicked) {
        let today = new Date().toDateString();
        if (five_template_prev_clicked === today)
          this.five_template_clicked = true;
        else this.five_template_clicked = false;
      } else this.five_template_clicked = false;
    },
    tapFiveTemplate() {
      localStorage.setItem("5_template_day", new Date().toDateString());
      location.href = this.five_template.url;
    },
    closeFiveTemplate() {
      if (this.inTaping) return;
      this.inTaping = true;
      this.$refs.five_template.style.height = "0";
      this.$refs["reader-wrap"].style.paddingTop = "0";
      // 关闭弹窗提醒
      setTimeout(() => {
        localStorage.setItem("5_template_day", new Date().toDateString());
        this.five_template_clicked = true;
        this.inTaping = false;
      }, 300);
    },
    setCopyVal() {
      // 如果本身已经有了 则不需要重复获取
      if (this.copyVal) return;
      this.copyVal = getRandomCode();
    },
    doCopy() {
      // 复制
      let is_need_copy = needToCopy();
      if (is_need_copy)
        this.$copyText(this.copyVal).then(e => recordCode(this.copyVal));
      // 不需要复制 置空
      else this.copyVal = "";
    }
  },
  async created() {
    if (!this.justifyRouter(this.$route)) return;
    this.href = window.location.href;
    // 获取书籍详情
    await getDetail(this.$route.query.bid).then(m => {
      this.bookdetail = m;
      this.is_on = !!m.is_on_user_shelf;
      if (window.options.show_title_in_reader)
        document.title = window.options.title;
      else document.title = m.book_name;
    });
    if (
      this.bookdetail.charge_type === "CHAPTER" &&
      window.options.adTargetId
    ) {
      // let prevPage = localStorage.getItem("prevPage") || window.prevPage;
      // 广告限制初始化
      if (
        window.prevPage.indexOf("catalog") === -1 &&
        window.prevPage.indexOf("pay") === -1
      ) {
        console.log("not from catalog or pay");
        this.initLimitAdTimes();
      } else {
        this.adType = "2";
        // let times = localStorage.getItem('ad_times')
        // if (times && parseInt(times) >= 10) this.adLimit = true;
        console.log("from catalog or pay");
      }
    } else {
      this.adLimit = true;
      // this.adType = "2";
      // this.showAdIframe = this.showAdStatus = false;
      // if (window.adcombo) adcombo.monitor.();
      this.initPayType();
    }
    // 获取章节内容
    let isFromCatalog = !!~window.prevPage.indexOf("/catalog");
    let page_from = isFromCatalog ? "chapter_dir" : "";

    this.getContent(this.$route.query.bid, this.$route.query.cid, "", page_from)
      .then(r => {
        // NOTE:
        // 设置需要copy的值
        // 第一次进入放在获取内容后生成值 避免还没复制的时候就将值传给后端
        this.setCopyVal();
        this.text = r;
        this.isFromSubscribe = false;
        // 获取adbanner随机数
        // this.getRandomBannerIndex();
        if (this.getAdTimes()) {
          if (
            this.bookdetail.charge_type === "CHAPTER" &&
            window.options.adTargetId
          ) {
            this.observerAd(this.bookdetail);
            // 仅显示广告展示
            this.justShowAds(r.is_visiable_ad);
            // 开始上报阅读状态
            this.reportStart(r.chapter_id);
            console.log("upload ad info");
            if (!!r.is_show_ad) {
              if (!localStorage.getItem("is_views")) {
                localStorage.setItem("is_views", "1");
                setTimeout(() => {
                  this.reportEnd(r.chapter_id, !r.is_show_ad);
                }, 1000);
              }
            }
          }
        } else {
          if (window.options.adTargetId) {
            this.observerAd(this.bookdetail);
            // 仅显示广告展示
            this.justShowAds(r.is_visiable_ad);
          }
        }
        if (r.sign_status) {
          // SingActive({ sign_reard: r.sign_reard });
          this.showSignNoticeWrap = true;
          // Sign({
          //   sign_reard: r.sign_reard,
          //   signDays: r.sign_days,
          //   is_old: r.sign_version === "v1",
          //   items: r.sign_items || []
          // });
          // r.sign_status = false;
        }
      })
      .catch(r => {
        console.log("get content err", r);
        this.text = {
          content: r.msg
        };
      });
    window.options.self_pa_ad_switch && this.getReaderAdBanner();
  },
  async beforeRouteEnter(to, from, next) {
    // * 初次进入加载iframe
    loadIframeAsync();
    let detail = null;
    let u = navigator.userAgent;
    if (typeof to.query.bid !== "string") {
      detail = await getDetail(to.query.bid[0]);
    } else {
      detail = await getDetail(to.query.bid);
    }
    if (detail.charge_type === "CHAPTER" && window.options.adTargetId) {
      await loadAdJs();
      // 如果广告插件的微信环境没设置 则重定向设置
      if (window.adcombo) {
        if (!window.adcombo.isOfficialAccountsEnv()) {
          // localStorage.setItem("prevPage", from.fullPath);
          window.adcombo.redirect(window.location.origin + to.fullPath);
        }
      }
    }
    // setStyleIfRouterWithStyle(to);
    if (from.name !== BookCatalog.name && from.name !== Subscribe.name) {
      // 清除所有和章节相关的缓存
      clearStorageChapter();
    }
    if (from.name === Subscribe.name) {
      next(vm => {
        vm.isFromSubscribe = true;
      });
    }
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // * 移除iframe
    removeIframe();

    if (!this.justifyRouter(to)) return;
    this.is_update = true;
    localStorage.removeItem("is_views");
    this.getContent(
      to.query.bid,
      to.query.cid,
      "",
      "chapter_info",
      this.copyVal
    )
      .then(r => {
        this.getAdTimes() &&
          this.reportEnd(this.text.chapter_id, !r.is_show_ad);
        // 获取adbanner随机数
        // this.getRandomBannerIndex();
        // * 重新加载iframe
        loadIframeAsync();
        r.jump = to.params.jump;
        this.text = r;
        if (this.showAdImg) {
          // 广告限制初始化
          this.initLimitAdTimes();
        }
        this.getAdTimes() && this.reportStart(r.chapter_id);
        // 仅显示广告展示
        this.justShowAds(r.is_visiable_ad);
        this.$nextTick(() => {
          this.$nextTick(() => {
            delete this.text.jump;
          });
        });
        next();
      })
      .catch(r => {
        next(false);
        if (r.url) {
          location.assign(r.url);
          // location.href = r.url
        }
        // if (r.url) {
        //   let a = document.createElement('a')
        //   a.href = r.url
        //   a.click()
        // }
      });
    window.options.self_pa_ad_switch && this.getReaderAdBanner();
  },
  beforeRouteLeave(to, from, next) {
    if (to.name !== BookCatalog.name && to.name !== Subscribe.name) {
      // 清除所有和章节相关的缓存
      clearStorageChapter();
    }
    this.clearReadChapter();
    localStorage.removeItem("is_views");
    // localStorage.removeItem("prevPage");
    // 任务还在进行 在其他页面 刷新后 依然会出现计时器 需要对方提供终止任务的api
    if (window.adcombo) {
      // adcombo.hideMonitor();
      // adcombo.monitor.hide();
      window.adcombo.reset();
      // adcombo.cancel();
    }
    // * 离开阅读器后移除iframe
    removeIframe();
    next();
  },
  beforeMount() {
    // 重置lazyload设置
    this.$Lazyload.config({
      preLoad: 1.3,
      loading: "",
      error: ""
    });
  },
  mounted() {
    this.bus = this.$refs.reader.getBus();
    this.mergeBanner();
  },
  destroyed() {
    document.title = window.options.title;
  }
};
</script>
<style lang="scss">
.reader-active {
  font-size: 17px;
  color: #ff3b00;
  text-align: center;
  margin-top: 0.8em;
}

.x-reader--subscribe {
  .weak-subscribe {
    text-align: center;
    font-size: 17px;
    color: #2572ff;
  }
  .x-reader-text--horizontal {
    .x-reader-text-wrap {
      padding-bottom: 1.3rem;
    }
    .weak-subscribe-wrap--horizontal {
      position: fixed;
      bottom: 0.7rem;
      left: 0;
    }
    .weak-subscribe--horizontal {
      width: 7.5rem;
      float: left;
    }
  }
  .weak-subscribe--vertical {
    margin-top: 0.8em;
  }
}

.reader .qr_img {
  height: 4rem;
  width: 4rem;
  padding: 1rem;
  display: block;
  margin: 0 auto;
}

.x-reader--subscribe__qrcode {
  .x-reader-text--vertical {
    padding-bottom: 0;
  }
}

.subscribe-qrcode {
  font-size: 0;

  img {
    width: 100%;
    margin-top: 0.4rem;
  }
}

.active_img {
  font-size: 0;
  margin: 0.3rem 0.24rem 0.2rem;

  img {
    width: 100%;
  }
}

.click-box {
  margin: 0.24rem 0.24rem 0;
  padding: 0.24rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #dadada;

  .click-box__item {
    flex: 1;
    text-align: center;
    font-size: 0.28rem;
    color: #333;

    &:not(:last-child) {
      border-right: 1px solid #333;
    }

    span {
      width: 0.36rem;
      height: 0.36rem;
      display: inline-block;
      vertical-align: middle;
      margin-right: 0.2rem;
      vertical-align: sub;
    }

    .tap-icon {
      background: url("~@/assets/tap.png") center / contain no-repeat;
    }

    .zan-icon {
      background: url("~@/assets/zan.png") center / contain no-repeat;
    }
  }

  .click-box__item.cur {
    .tap-icon {
      background: url("~@/assets/tap-check.png") center / contain no-repeat;
    }

    .zan-icon {
      background: url("~@/assets/zan-check.png") center / contain no-repeat;
    }
  }
}
</style>

<style lang="scss" scoped>
.share {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  text-align: center;
  padding: 0 0.2rem;
  img {
    width: 100%;
  }
}
.send-gift {
  display: flex;
  justify-content: flex-end;
  font-size: 0.28rem;
  margin: 0.3rem 0.24rem;

  .send-gift__btn {
    padding: 0.05rem 0.3rem;
    border: 1px solid #dca46a;
    border-radius: 0.3rem;
    background: #ecddd3;
    color: #826b50;
  }
}

.title_list {
  margin: 1rem 0.24rem 0.1rem;
  background: rgba(#fff, 0.4);

  .title {
    font-size: 0.36rem;
    font-weight: bold;
    margin: 0 0.24rem;
    padding: 0.3rem 0;
    color: #333;
    border-bottom: 1px solid rgba(#000, 0.04);
  }

  .title-list-box {
    margin: 0 0.24rem;

    .title-item {
      padding: 0.3rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.3rem;
      color: #666;
      cursor: pointer;

      img {
        width: 30%;
        margin-left: 0.3rem;
        border-radius: 2px;
      }

      &:not(:last-child) {
        border-bottom: 1px solid rgba(#000, 0.04);
      }
    }
  }
}

.reader {
  position: relative;
}

.ad-status {
  position: fixed;
  width: 1.14rem;
  height: 1.14rem;
  right: 0.24rem;
  bottom: 50%;
  font-size: 0;
  z-index: 9999;

  &.with-no-activity {
    bottom: 50%;
  }

  img {
    width: 100%;
  }
}

.to-share__entry {
  text-align: right;
  margin: 0 0.24rem;
  font-size: 0;

  img {
    width: 1.8rem;
  }
}

.weak-subscribe {
  text-align: center;
  font-size: 17px;
  color: #2572ff;
}

.weak-subscribe--vertical {
  margin-top: 0.8em;
}

.coupon-entry__wrap {
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0;
  border-radius: 50%;
  position: fixed;
  bottom: 30%;
  right: 2%;

  img {
    width: 100%;
  }
}

.reader-footer__banners {
  height: 1.9rem;
  font-size: 0;
  margin: 0.3rem 0.24rem 0.2rem;

  &:not(:first-child) {
    margin-top: 0;
  }

  img {
    width: 100%;
    height: 1.9rem;
  }
}

.sign-notice__wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba($color: #000000, $alpha: 0.8);
  z-index: 999;

  img {
    width: 100%;
  }
}

.click-toCollection {
  font-size: 0.34rem;
  color: #2572ff;
  text-align: center;
  margin-top: 0.8em;
}

.reader-fixed {
  padding-top: 2.6rem;
  transition: all 0.3s;
}

.five_template_entry {
  font-size: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 2.6rem;
  transition: height 0.3s;
  overflow: hidden;

  img {
    width: 100%;
  }

  .close-area {
    position: absolute;
    right: 0.15rem;
    top: 0.12rem;
    width: 0.85rem;
    height: 0.4rem;
  }

  .close-text-area {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.4rem;
    width: 100%;
  }
}
</style>
