/*
  @props
    chapter: {
      "content":"石村，位于苍莽山脉中，四周高峰大壑，茫茫群山巍峨。\n\n清晨，朝霞灿灿，仿若碎金一般洒落，沐浴在人身上暖洋洋。\n\n一群孩子，从四五岁到十几岁不等，能有数十人，在村前的空地上迎着朝霞，正在哼哈有声的锻炼体魄。一张张稚嫩的小脸满是认真之色，大一些的孩子虎虎生风，小一些的也比划的有模有样。\n\n一个肌体强健如虎豹的中年男子，穿着兽皮衣，皮肤呈古铜色，黑发披散，炯炯有神的眼眸扫过每一个孩子，正在认真指点他们。\n\n“太阳初升，万物初始，生之气最盛，虽不能如传说中那般餐霞食气，但这样迎霞锻体自也有莫大好处，可充盈人体生机。一天之计在于晨，每日早起多用功，强筋壮骨，活血炼筋，将来才能在这苍莽山脉中有活命的本钱。”站在前方、指点一群孩子的中年男子一脸严肃，认真告诫，而后又喝道：“你们明白吗？”\n\n",
      "chapter_name": "章节名",必需
      "next_cid": "2707", 
      "prev_cid": null, 
      "book_name": "书名", 
      "page": 0, 初始渲染页数，-1最后一页，0第一页，默认0
      "sequence": 100, 章节的序号
    }
    menulist 指定菜单图片和是否显示 
             特别 option.pos 箭头的位置 
 
  @event  
    addShelf(bid) 加入书架
    changeChapter(flag) true 下一章 false 上一章  

  @slot
    paragraph 文章的最后
    back 菜单头部的左边返回
    home 菜单头部的右边
*/
<template>
  <div :class="{night,'raeder-core': true}" data-template="raeder-core" :style="{fontSize: font + 'px'}">
    <!-- 文字区 start  -->
    <!-- 横版阅读器 start-->
    <v-touch class="text-container" data-template="text" @pan="pan" @panstart="panstart" @panend="panend"
      @tap="tap" v-if="!vertical">
      <div :class="['text-wrap',{transition}]" ref="wrap" :style="[posStyle,wrapStyle]">
        <p class="paragraph" v-for="(value,index) in text.content" :key="index">{{value}}</p>
        <slot name="paragraph"></slot>
      </div>
      <v-touch class="pageinfo">
        <div class="chapterTitle l">{{text.chapter_name}}</div>
        <div class="page-number r">{{page.current + 1}}/{{page.total}}</div>
      </v-touch>
    </v-touch>
    <!-- 横版阅读器 end-->
    <!-- 竖版阅读器 -->
    <v-touch v-else :options="{touchAction:'manipulation'}">
        <p class="paragraph" v-for="(value,index) in text.content" :key="index">{{value}}</p>
        <slot name="paragraph"></slot>
    </v-touch>
    <!-- 竖版阅读器 end-->
    <!-- 文字区 end  -->
    <!-- 菜单区 start -->
    <div class="menu" v-show="menu" data-template="menu">
      <div class="head">
        <slot name="back">
          <v-touch class="img back" @tap="back" @touchend.native.prevent>
            <img :src="list.back.img">
          </v-touch>
        </slot>
        <slot name="home">
          <v-touch class="img home" @tap="home" @touchend.native.prevent>
            <img :src="list.home.img">
          </v-touch>
        </slot>
      </div>
      <div class="foot">
        <v-touch class="img" v-if="list.mulu.show" @tap="catalog" @touchend.native.prevent>
          <img :src="list.mulu.img">
          <p>目录</p>
        </v-touch>
        <v-touch class="img" v-if="list.option.show" @tap="option">
          <img :src="list.option.img">
          <p>设置</p>
        </v-touch>
        <v-touch class="img" v-if="list.shelf.show" @tap="addShelf">
          <img :src="list.shelf.img">
          <p>加入书架</p>
        </v-touch>
        <v-touch class="img" v-if="list.night.show" @tap="changeNight">
          <img :src="night ?list.night.img.sun : list.night.img.night ">
          <p>{{night ? '日间' : '夜间'}}</p>
        </v-touch>
          <v-touch class="img" v-if="list.flippages.show" @tap="changeflippages">
          <img :src="vertical ?list.flippages.img.horizontal : list.flippages.img.vertical ">
          <p>设置</p>
        </v-touch>
      </div>
      <v-touch class="option-wrap" v-show="menuOption">
        <div class="font">字号</div>
        <div class="button">
          <v-touch @tap="changeFont('-')">A-</v-touch>
          <v-touch @tap="changeFont('+')">A+</v-touch>
        </div>
        <i class="after" :style="{left: list.option.pos}"></i>
      </v-touch>
    </div>
    <!-- 菜单区 end -->
  </div>
</template>
<script>

const w = innerWidth
const h = innerHeight
function menulist() {
  return {
    back: {
      img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0YTRjZGE2NS0wYmIyLTExNDgtYjg2ZC1iMGFkOGI2ZTQzNmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDdCQ0E4OEMyQTVDMTFFNzk4RURBQkM5RDNGODFGNzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDdCQ0E4OEIyQTVDMTFFNzk4RURBQkM5RDNGODFGNzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRhNGNkYTY1LTBiYjItMTE0OC1iODZkLWIwYWQ4YjZlNDM2YSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0YTRjZGE2NS0wYmIyLTExNDgtYjg2ZC1iMGFkOGI2ZTQzNmEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Hs40bAAAB6klEQVR42uyY20oCURSGx+hAHvJpIio1IuyESNFNt930CL1EDxLRSUwqkxAPBVEQ9B7ZUTsQTf+Cf8iLxBqFmSV7wQf+Xvkx495rrYBt21YvVZ/VY2WEjJARMkJGyAj1ilAE5MEmCHglFOhS6xMGxyDGnAaHWp9QCBw1yRTAmdZXLkiZOLOILIGGRiFHJsFc5KvW0HgoiEwOTDGXQMprGbdCIpMF08xlsOgHGTdCIpMBM8wVP8n8V2gYHIAkc5UydY0X6xDYB7PM55R50dgpDPLJzDNfUOZZY+vjyCwwX1LmSWMvJzJ7FJC6AnPgUWNzKjI7vFukrnkY+FqmVXMqMttsYaTuwTp48OHvvwM37YS2wKqS8ecTDLR75b40D3j9v3y3xvkmzVzjK+fH/0/trwOec8Klmk44FYdCq1PuA6xwPJAa5Xgd1bxTEKlljtZSY/wc1SrULHXCPM6nNqJVSOqdUnnmCUpFtApJvVHqlHmSUmGtQlKvlCowxygV0ipkcTKVlshZU8UpFdQq5EjJpVtkTvhJyu3Wp8FLt8Qs25+cH6Q62cs1OCuVmWULlPVaqtPNqSNVYZZtUMZLqW7stuuUqjInrZ81ly8GPLclF+0uuAUbwNYupPbYNkJGyAgZISNkhIxQi/oWYAAS4XGM8svqpwAAAABJRU5ErkJggg==",
      show: true,
    },
    home: {
      img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1ODQwQzk0QjJBNUExMUU3QUVBQUExRTY5QUI0NTdFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1ODQwQzk0QzJBNUExMUU3QUVBQUExRTY5QUI0NTdFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU4NDBDOTQ5MkE1QTExRTdBRUFBQTFFNjlBQjQ1N0U5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU4NDBDOTRBMkE1QTExRTdBRUFBQTFFNjlBQjQ1N0U5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bWIJgQAAAjtJREFUeNrsmk1LAkEYgNe0TCsQokvnznXqENQv6CdUt4h+QEVEBBIiUhYhdYiwDyykIqKiDIk+PETgIapj1yCIbl1rewdmYxlmP7R53XGZgQd0nVnfx9n5ejGg67rmp9Kg+awoISWkaQPAC7ANRLG/LIA8KYSBdyBG3+eAkXrtoSDtlZjp2jAwgdpFpIcQCAH7unWZQvpeFKFG4IARWAMumGvT9SDEk8kAZKyGOVIzMgs1AYdMwCtUxqhDpM6ZOrMyChGZIybQZUbGXPcMS0qUzDET4JKLNidMmzkZhHiBpf/xQ8S9FCIBnTIBLQh4VOe9EOKNg5TA8ZeopRBvpkoizJCJWgg1c9aSBOIalsQUigAFJBm7LVMKQ4jIXIocvDYEgXy1k42bSlGOTBxrc2kjlRYhRGSKGAugS6m9ChdszUnmCnPf5VIq53JLZStEZK6ZGz3UWMYsteOw6bUVIjI3nENZySMhQ2rL4lhiK9QC3FqcMr0UMqQ2mZhWWSlzg1bgjmlQkEjIkMpyTsN/dcxJkl2acjLKJJCRLO32DYwCWSMlAjyZK4QsGpLMTBoYlDCX+EOliFwZWLcSGgIWaaUNyROkpGfGnPJyX8C4hDIkxkcqUfRDbrsN6KGve1WyXgn5WKgdeKODtxLysgp1UiotfX575O5F3iyEFOQz0K0mBSWkhJSQElJCAtehfrpVEVEi9Ojc5Zce6sCQcSNE/qPzWcV9Sw6ffwCvVdy37FQB+78+alJQQkz5FWAAk/UMhVuhLyEAAAAASUVORK5CYII=",
      show: true,
    },
    mulu: {
      img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1REJBMDAzQjJBNUExMUU3OTg1QjhDMEVBODJCQjlDMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1REJBMDAzQzJBNUExMUU3OTg1QjhDMEVBODJCQjlDMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVEQkEwMDM5MkE1QTExRTc5ODVCOEMwRUE4MkJCOUMyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVEQkEwMDNBMkE1QTExRTc5ODVCOEMwRUE4MkJCOUMyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+PBPddQAAAUhJREFUeNrsl0FKw0AYhTNSRBd1VXCjdWNJL9JL9QDeZnDjKhEFi5veoIcooVJoY1rGF5hsxmQ6IDOJ6fvhWyQTMvOSmcf/hFIq6lNdRD0rCvqvgiZAgo1G6nvdr9IUDGKQqd+V6bGogTFIQK78V67nGpvrqFuYtLxIWgSlKny9m+sQNbZdbrGbhh+6BcOGsRxcBt5gRzA4O1N4tTyfWMY+Wlj/wsUUphZTmJ4whTSQKXzruR5cTKFyutIAvjTyhMN1BsFejoIoiIIoiIIoiIKYWJlYmViZWJlYmViZWNkpUBAFURAFURAFMbH2J7HegRewDdCcVv3lrc/E+tZCYn32mVgLMz0GqDUY+TIF0cKJET4T67IFQUufifURfIJDgLNT6DN77xrwYvAEZvo6BXOwcvhq1+DK85/ZgX3tHmRipSAK+lP9CDAAiE0p1zh4aU4AAAAASUVORK5CYII=",
      show: true,
    },
    option: {
      img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2MkEyNDFDQjJBNUExMUU3ODdERDg4NDc1NUNGOTgxMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2MkEyNDFDQzJBNUExMUU3ODdERDg4NDc1NUNGOTgxMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjYyQTI0MUM5MkE1QTExRTc4N0REODg0NzU1Q0Y5ODEwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjYyQTI0MUNBMkE1QTExRTc4N0REODg0NzU1Q0Y5ODEwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+CJ0tUwAAA9hJREFUeNrsmltIFUEYx8/xlqZJkllZVoRBRNGLVJIh0QULMoQumkZl9RD0EkH5VuCLCGZQ2EOakhJoRoSEEdRDpil0ESMJNAyyqFBLCcu8nP4T39LXtGfPzjln8azswA/n8u3M/s98O/PNoNvj8bhmUgpzzbDkCHIEOYKmV9ANMAJKQ0WQO4BlOxX0sHIC+GbnGdonlXfa2eXcoFCqy7ezy20Bj6S6CbAYfLHjDB1nee0XiQD77ehy4uPPYeUylj9kR0HiW4mh/FNQDH5SeT1YaTdBJ1i+kvahu6yuYFqnSCwKCqR5/qYREEf12az+LXAr9hs0VGfoGMvXg++UbwYDlF8BNtrB5WLBQcndtDQOGkJhcVARtBfEU/4V6JDa66QoIirUBfG957pOezvopXwiyAplQatABuXHQK3e+gJuTncoZFYQj9vugEEvdlxoNnPRkBIkvoXDrFxlYNvLvq1o+u5CTtBukET5Pp2g1GWwOBSEoqBCaTGY8mHfQMu4SJkgxcL3D6fYMtysoBS2Wk2CGhODiOPDA9Z/XgAv7Osb7ARD9NeUoKPM5j7oN/ki/rrdGlACusAoGKZzVje4RO2yveufeoO4KAz0sRgtRyGmmk2xnpbW+bCPB9VgymOcRHsl2buktj99GQ2ygxl/ApGKgWINe77UwG4JeKPz8pNgyIvIbnpOSVADMy7xI/Ldxp7vpxnXm8mX0ovdA1kghmyiwS7QJNl1qQhKBGPMeANIUGQe+Mz62KozzlXWLsbL9/EjFYBfXtzRUNBpT/BTtTRGKhhn7UdMzny+P4JeWyBomFxMG6OYtT1UdOdyb4IidJbOdLCa7T0jAW5+sRQ+xVPUUU/125nNFcU+z4I0FjAbHsGrmOqKIByLi1h/Taz+K6tP8qPfZL0Zki8a54CPII7K4ld4HuAMiWjjHW3QIiRKpuP6ON3laTexfl2JSLe5/0UKB5iYziCIEek9aKF8JMhlIZKWFvnR73IzwSk/lV4LYhBZq3Pw62N1GYr9iaNJo69rrLXMH0dpLwnW9dJc8IP1L5bs86zcpnj1VWlm2eZLYZ0Fd2a3WP8XwFJpkzxlsp+TZvahWWCANWZaIGgP67+H6spY3YQPUW5qnzQjKFcazIqbzygwyMZJp7o26cVEOY+W5XCwgKKDFsmu3UhQM2sosvCqtoKNc5nq5oMXilHHMxLqVVAjCxAXWihokxQtu1hEXW4QeGpJxH4Xyd7wPBRG55/NFl+mC1e+TUcEvbGWgXPgMfhA35Vw01ZwhtyQ2z8hMa3eIgXbJ+cfLxxBjiBH0MwW9FuAAQDT1JBFCtp/MQAAAABJRU5ErkJggg==",
      show: true,
    },
    shelf: {
      img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3QTMxNzIyQjJBNUExMUU3QTQxQ0JBODI4N0E5NjlGOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3QTMxNzIyQzJBNUExMUU3QTQxQ0JBODI4N0E5NjlGOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdBMzE3MjI5MkE1QTExRTdBNDFDQkE4Mjg3QTk2OUY5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjdBMzE3MjJBMkE1QTExRTdBNDFDQkE4Mjg3QTk2OUY5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+wP0k/QAAARhJREFUeNrsmlsOwiAQRaFhE7oj16E7pV2K1V0gJn4QQwM4M7y8N5nED8b2hHKcJmrnnJopi5osAALQBEAXX7svl6j9s5Y1WsBy7xs9Za59+Dr3DlT6hZrz4kb4kdZM0JACgARDsqS0FPQPa0iW7BGIZEnT+ZEotiSkACClbGAmK/6MVpCCi5yLXCkUS2WpMC2vweetxQ5Rp2VObRf3x4Co03JTIFN4s+LTMrT9j9rmPgPNtc2d5tpuaqkRdgiWkwaiWqpqf84Zolqqan/ODlEtVbUfloPlAERL6vWB+ppQvX85eAvNzbO3/hjQ7eBC37n7uvbWr/E/BQABCEApoHBc771s6XA6QpLD6ToQzIbfIQABiDcvAQYATzPcg/PoyPwAAAAASUVORK5CYII=',
      show: true,
    },
    night: {
      img: {
        night: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MEFCOEM5QjJBNUExMUU3OTU0MjgyREYyQjRCNDgwNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3MEFCOEM5QzJBNUExMUU3OTU0MjgyREYyQjRCNDgwNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcwQUI4Qzk5MkE1QTExRTc5NTQyODJERjJCNEI0ODA1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjcwQUI4QzlBMkE1QTExRTc5NTQyODJERjJCNEI0ODA1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+PCXBGAAABIBJREFUeNrsmmlIFVEUx32ZZrtoUWkf2iOTIooWaN+wKNtoMfGDENanCIqKKMj2aIHSsj74JZIiooigbCeKgqKNTEkrs4WKilIjk7Lpf+BIh9uMb+6dec8oD/zgzpuZc+e8ufece86dgGVZEf+SNIv4x6TJoP/NoFYgBWwG+SDaQEcMWAtaGj0BOQWPBEAKOAZqrN+yxFBfJt+faXK/V2NmgfvWn1IBog30tQblrKOcj8NiUA9wwXKWlYZ6sxU92eEwKA1UKh3XinYdSDDQ2xn8UPTSccdQGURzZaPS4XewC2SJ324YGJMETjq87Utgrt8GkTEHlY5KwCA+v0v8vtmFvr5gOt9XDL5YweUm2AFS+X5PBm1VlJ8GbcX5c+LcrAb0ZICnPCy9SB3ryVD7cBOH0sAqcVwAZoJq8Vs30X7cgK67oMYg/lk28bOG9WnFoe6gWnkzkTbXfRLXxLl44wUe31CB6ZC7KJRQXIh1uE4OoeYuh3GeoTF5pk5hpuLNhjVwrRSdgLrdxlU7yVew3tTLkVcrEsr2BFEk41K8psuucGnQR9AymD6nyTkZ9Oc2Tf4NQSbtW9Huojnha11eFwfmm662F4n2IfAxiJ4y0e6rYUwkr67dyngTg9qAqeI430VHJaI9WOMBx4AETYNa6xo0mvMakiJwz0VH10R7nMYDTuG3JIX6XAO2gWLlXCIYoZsPbRETcafLiR0rvBW58K4u7qGVxgvwARSCFWAgiBHXkBMYwucuc0w8rOvlTguD5ml4q7PivtUu/4QZIFGjj55grK5BJeLBkjXTinp5aZjgecZuDnUS7Tca8+EEeM3troqnbNQiifQilZrxZKc4ptgV/7dVfXRXxQdETCJjcv8Gg2Ra0E5T3zewVBwvAIsb26D3op1goLMQ7BPHe0FqYxoklzH9DPUuB3e4TcXGIxxEG8WgItEebqi3lrPaZ6Kieiosw8/Gl6eIePLQY1ygjLdMSQOOgA6hikNO1UtZ0u3vsZNO4JZi1HsuFUeHwyDiqOh8tw8dtQA5NkkbrShWaS5/6rGrbUQEHHbwaAfhLLe/gO7ggw8jnPTmgF7K7z/BbXCZnUkpeMV907n2nDj2AUPABLAOXHBb9SFDH4h/cq+Pw4JW08vAKw9VnyJ+Rq0iyWylxjzY5/FOwzAdnNEolNTLHCe9gSCbxufBJBGf6HVXhcDZxnJiOQokgR68SKbsOUq5loblRJvio6tCI+UfVeKfOQWiwpgORCt5FiV4vbwW6xfYxJFwGBWleFvLrpbtV7Gexn27EBrT3mZDbavf2ym5SgelnO/7bcxQ1q2WfwOh2PDaZLPhtcegWmoH7dTtY51Strg1xnRLcqHNlmQ1b14lG+gbAPYruxz1OtN19QVz205CkT6P3afdav0iuMl7RS85aWzGCWMil5kpBEyzWTWQXAFZ4Em4v1OYo6wovMqjIDuAIf9OoaEPL9zKN3AcTNWZK34POSehyD6So34y6C0ifnPwGbwDz8F9cB1c5UWoL+K3QU1fYzUZ9L8Z9EuAAQAmszMHNXFClQAAAABJRU5ErkJggg==",
        sun: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBOEEwNTkwQjJBNUExMUU3OERDQUM3M0MxOTBCQUFDRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBOEEwNTkwQzJBNUExMUU3OERDQUM3M0MxOTBCQUFDRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4QTA1OTA5MkE1QTExRTc4RENBQzczQzE5MEJBQUNFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4QTA1OTBBMkE1QTExRTc4RENBQzczQzE5MEJBQUNFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+JgSd9AAAA2NJREFUeNrsmkFrE0EUx5PU1IqHEBVU6EFFsNbiQU3NJbXSFPUgvehBLXpVWyh4snrQnvTiN/CsF70oRaEY0fSg1R5saqFgjS0VL2LjRahQ43/wLTyH3dmd3dltEvLgR5bdebPz9r15O/M28Wq1GmskScQaTJoGNQ36J8dAbxQ3ikeUFF7S7/FG8JDlnd4ovBSFQbfZ8a16N0ieO6F7KRGhdyLxkk5SyIA/YDriTHwItIB3YXjoPVgAd8HhEI0Qfd8Bn+gBxj1rCg95RHizXP1fFsCgRh9uDFKfXMp0b0996HhIxOYj6VwFjBv0zDj1yeUx3du4hwQZ9uSmQdqgdyzS1LclGR193ZWCiOXP4AfIgxWHdmlwDpwCB8EO8Bss07x4Bh666E+ArWBPmB4SXFR4pg2MgpWqu4g2N8Amhacu6Y7P5FpuF3gKujT1ZsFp8KWWXqztoCgZMweugU7QRnTSuTnWrot0242MxMAkFmE2xULpF7gCWhQ64towWGV6U4rw84wJg66zQYkB5jV0+yWjRtfboC2gwgY07KOPIaZfoT7XzSA+mFmXMFOF3yzrZyjImLwkhR5QcLh2gh3fB2s+pvEa6Vpy0qFdgcbiOyn0gAJ7cnZtltj1/QGebAfrZ8mhjSUFGpvnkJMNURnEJ/TGAAa1SolFZZDSMLuQSxJeZFVavPqVVh86SVs9xVPrA0UXD82z6x0BPHRAI+SKNDbtpPAC5EA/mHRoM+9hMnuRPDv+4NBmktrlaGyhrBR42i4FSNslU2nb9IvVz2Cu1tKLNUbLFZ6h+up56ROjBeWMtDi9DBIKnYTN4rRUK4tTwV7wVXpPfAQjYB9Igs2UzUboGpdl6iPwWExu8HaDJ/W4wbsAUjbny6Ab3LSp3NhJhdp2OxiTonuF/jlFFEm+0/vpp6LIcZ7eTaJIspPOfwMz4Dl4oCiSpKhIso2KJKHtWI9IO8xUCGWslLQDzpjePnA5K9W6JxzCz69Ynsk43NP4HJI73w4GDBo0QH1yORNWyFnhtgjugaxOzVmzhp6leyzqhp1OUsjS79uAWwXdSu1ROn5TCx+NX9PqWF4155pf8Gros/4rVtwoeip01PhX8DEXj9WdhywvxcP2jpANEWWrsai+MEflocik+W+spkERy18BBgBeD2DzIcRKsgAAAABJRU5ErkJggg==',
      },
      show: true,
    },
    flippages:{
     img:{
      vertical:"data:image/png;base64,[encoded data, 4196 characters]",
      horizontal:"data:image/png;base64,[encoded data, 4232 characters]"
     },
      show:true,
    },
  }
}
export default {
  name: 'XRaederCore',
  props: {
    menulist: {
      type: Object,
    },
    chapter: {
      type: Object,
      require: true,
      validator(val) {
        return 'content' in val && 'chapter_name' in val || !val.content
      }
    }
  },
  data() {
    return {
      gesture: {
        panstart: 0,   //手指开始交互时的点的坐标
        posstart: 0,   //手指开始交互时盒子的坐标
        pos: 0,        //盒子真实坐标
        max: 0,        //最大位移
        min: 0,       //最小位移
        border: w / 5,  //位移超出的最大值
        tap: 1 / 5,   //点击边界判定
        slide: 1 / 8, //点击滑动边界判断
      },
      transition: true,
      wrapStyle: {
        height: h + 'px',
        width: w + 'px',
      },
      page: {
        current: 0,
        total: 0,
      },
      vertical: localStorage.getItem('vertical') === 'true',
      menu: false,
      menuOption: false, //二级菜单设置的状态
      font: localStorage.getItem('font') * 1 || 18,
      night: localStorage.getItem('night') === 'true',
    }
  },
  computed: {
    posStyle() {
      return {
        transform: `translate3d(${this.gesture.pos * -1}px, 0, 0)`
      }
    },
    list() {
      return this.merge(menulist(), this.menulist)
    },
    text() {
      const chapter = Object.assign({ page: 0 }, this.chapter)
      if (!chapter.content) return chapter
      this.$nextTick(() => {
        this.countPages(false, chapter.page)
      })
      chapter.content = chapter.content.split(/\n/)
      return chapter
    }
  },
  methods: {
    pan(e) {
      this.optimization(e)
    },
    panstart(e) {
      this.gesture.panstart = e.center.x
      this.gesture.posstart = this.gesture.pos
      this.transition = false
    },
    panend(e) {
      this.transition = true
      const page = this.round(this.realPos(e) / w)
      this.flip(page)
    },
    tap(e) {
      this.transition = true
      this.area(e.center)
    },
    optimization(e) { //当位移大于盒子宽度或者小于0时做处理
      let pos = this.realPos(e);
      if (pos < this.gesture.min) {
        pos = this.sin(pos)
      }
      if (pos > this.gesture.max) {
        pos = this.sin(pos - this.gesture.max) + this.gesture.max;
      }
      this.gesture.pos = pos
    },
    sin(pos) {
      return Math.sin(pos / w * Math.PI / 2) * this.gesture.border;
    },
    realPos(e) {
      return this.gesture.panstart - e.center.x + this.gesture.posstart
    },
    round(number) {
      let n = this.page.current;
      if (number - n > this.gesture.slide) {
        ++n
      } else if (number - n < -this.gesture.slide) {
        --n
      }
      return n
    },
    flip(page = this.page.current, menu = false) {
      if(this.vertical){
         this.menu = menu
         return
      }
      if (page < 0) {
        if (!menu)  this.changeChapter(false)
        page = 0
      }
      if (page >= this.page.total) {
        if (!menu) this.changeChapter()
        page = this.page.total - 1
      }
      if (page > this.page.current) console.log('下一页')
      if (page < this.page.current) console.log('上一页')
      this.menu = menu
      this.gesture.pos = page * w
      this.page.current = page
    },
    changeChapter(flag = true) {
      if('prev_cid' in this.text && 'next_cid' in this.text){
        if (!flag && !this.text.prev_cid) {
          Toast('目前是第一章')
          return
        }
        if (flag && !this.text.next_cid) {
          Toast('目前是最后一章')
          return
        }
      }
      this.$emit('changeChapter', flag)
    },
    area(coordinate) {
      const x = w / 5
      const y = h / 5
      if (coordinate.x < x || (coordinate.x < x * 4 && coordinate.y < y)) {
        this.flip(this.page.current - 1)
      }
      if (coordinate.x > x && coordinate.x < x * 4 && coordinate.y > y && coordinate.y < y * 4) {
        this.switchMenu()
      }
      if (coordinate.x > x * 4 || (coordinate.x > x && coordinate.y > y * 4)) {
        this.flip(this.page.current + 1)
      }
    },
    countPages(menu = true, page) {
      if(this.vertical) return
      const scrollWidth = this.$refs.wrap.scrollWidth
      const total = scrollWidth / w
      let current = typeof page === 'number' ? (page === -1 ? total - 1 : page) : (this.gesture.pos / w)
      this.gesture.max = scrollWidth - w
      this.transition = false
      this.page = {
        current,
        total
      }
      this.flip(current, menu)
      console.log({
        页宽: w,
        总宽: scrollWidth,
        总页数: total,
        当前页: current + 1
      })
    },
    //菜单
    switchMenu() {
      console.log('菜单')
      this.menu = !this.menu
      this.menuOption = false
    },
    back() {
      this.$router.go(-1)
    },
    home() {
      this.$router.push('/')
    },
    catalog() {
      this.$router.push({ name: 'catalog', query: { bid: this.$route.query.bid, cid: this.$route.query.cid , sequence: this.text.sequence } })
    },
    option() {
      this.menuOption = !this.menuOption
    },
    changeNight() {
      this.night = !this.night
      localStorage.setItem('night', this.night)
    },
    changeflippages(){
      this.vertical = !this.vertical
      localStorage.setItem('vertical', this.vertical)
    },
    addShelf() {
      this.$emit('addShelf', this.$route.query.bid)
    },
    changeFont(o) {
      if (o === '+') {
        if (this.font >= 30) {
          Toast('最大字号！');
        } else {
          Toast((this.font += 2) + '')
        }
      } else {
        if (this.font <= 12) {
          Toast('最小字号！');
        } else {
          Toast((this.font -= 2) + '')
        }
      }
      this.$nextTick(() => {
        localStorage.setItem('font', this.font)
        this.countPages()
      })
    },
    merge(a, b) {
      for (let val in b) {
        if (b[val] instanceof Object || b[val] instanceof Array) {
          a[val] = this.merge(a[val], b[val])
        } else {
          a[val] = b[val]
        }
      }
      return a
    }
  },
}
</script>
<style scoped lang="scss">
.raeder-core{
  background-image: url(data:image/png;base64,[encoded data, 8172 characters])
}

.raeder-core.night {
  color: #999;
  background-color: #222;
  background-image: none;
}
//文字区
.text-container {
  overflow: hidden;
}

.paragraph {
  line-height: 1.6em;
  min-height: 1.6em;
  text-indent: 2em;
  margin: 0 0.24rem;
}

.text-wrap {
  column-width: 7.5rem;
  column-gap: 0;
  box-sizing: border-box;
  padding-bottom: 0.9rem;
  padding-top: 0.4rem;
}

.pageinfo {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.9rem;
  line-height: 0.9rem;
  box-sizing: border-box;
  padding: 0 0.24rem;
  font-size: 13px;
  .chapterTitle {
    width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.public-accounts {
  background-color: #fff9f0;
  border-radius: 0.06rem;
  margin-top: 1em;
  padding: 0.7em;
  span {
    color: #ffb033;
  }
}

.transition {
  transition: .6s transform;
}

//菜单区
.menu .head {
  height: 1rem;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.24rem 0;
  .img {
    width: .85rem;
    img {
      width: 0.45rem;
      padding: 0.2rem;
    }
  }
}

.menu .foot {
  height: 1.2rem;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  font-size: .26rem;
  &>div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: .45rem;
    color: #fff;
    p {
      white-space: nowrap;
    }
  }
}

.option-wrap {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  height: 1.1rem;
  width: 6rem;
  left: .75rem;
  bottom: 1.6rem;
  display: flex;
  color: #fff;
  font-size: .3rem;
  align-items: center;
  line-height: .5rem;
  .after {
    position: absolute;
    border: .2rem transparent solid;
    border-top-color: rgba(0, 0, 0, 0.8);
    bottom: -.4rem;
    left: 1.8rem;
  }
  .font {
    width: 1.3rem;
    text-align: center;
  }
  .button {
    display: flex;
  }
  .button div {
    height: .5rem;
    width: 1.9rem;
    text-align: center;
    border-radius: 0.08rem;
    border: 1px solid #fff;
    display: inline-block;
    margin-right: .4rem;
  }
}
</style>