<template>
  <div class="x-reader-menu"
       v-show="status">
    <div class="x-reader-menu-head">
      <v-touch class="x-reader-menu-head__back"
               @tap="emit('route','back')"
               @touchend.native.prevent> <img :src="icon.back"> </v-touch>
      <v-touch v-if="!hidden_reader_menus"
               class="x-reader-menu-head__more"
               @tap="nav = !nav"
               @touchend.native.prevent> <img :src="nav ? icon.more[0] : icon.more[1]"> </v-touch>
      <v-touch v-if="!shelf"
               class="x-reader-menu-head__add"
               @tap="emit('addShelf')"
               @touchend.native.prevent> <img :src="icon.add"> </v-touch>
      <transition name="x-reader-fade">
        <div class="x-reader-menu-head__nav"
             v-show="nav">
          <v-touch class="x-reader-menu-head__home"
                   @tap="emit('route','home')"
                   @touchend.native.prevent> <img :src="icon.home">
            <span class="x-reader-menu-head__text">首页</span>
          </v-touch>
          <v-touch class="x-reader-menu-head__category"
                   @tap="emit('route','category')"
                   @touchend.native.prevent> <img :src="icon.category">
            <span class="x-reader-menu-head__text">分类</span>
          </v-touch>
          <v-touch class="x-reader-menu-head__rank"
                   @tap="emit('route','rank')"
                   @touchend.native.prevent> <img :src="icon.rank">
            <span class="x-reader-menu-head__text">排行</span>
          </v-touch>
          <v-touch class="x-reader-menu-head__detail"
                   @tap="emit('route','detail')"
                   @touchend.native.prevent> <img :src="icon.detail">
            <span class="x-reader-menu-head__text">详情</span>
          </v-touch>
        </div>
      </transition>
    </div>
    <div class="x-reader-menu-foot">
      <div class="x-reader-menu-foot__font">
        <div class="x-reader-menu-foot__text">字号</div>
        <div class="x-reader-menu-foot__box">
          <v-touch class="x-reader-menu-foot__font-btn"
                   @tap="fontUpdate(font-1)">A-</v-touch>
          <div class="x-reader-menu-foot__font-size">{{font}}</div>
          <v-touch class="x-reader-menu-foot__font-btn"
                   @tap="fontUpdate(font+1)">A+</v-touch>
          <v-touch class="x-reader-menu-foot__font-default"
                   @tap="fontUpdate(preset.font.default)">默认</v-touch>
        </div>
      </div>
      <div class="x-reader-menu-foot__bg">
        <div class="x-reader-menu-foot__text">背景</div>
        <div class="x-reader-menu-foot__box">
          <v-touch class="x-reader-menu-foot__bg-icon"
                   v-for="(bg,i) in icon.bg"
                   @tap="bgUpdate(i)"
                   :key="i">
            <div class="img"
                 :style="icon.bg[i]"></div>
            <img :src="icon.check"
                 v-show="i === bgCheck"
                 class="x-reader-menu-foot__bg-icon--check">
          </v-touch>
        </div>
      </div>
      <div class="x-reader-menu-foot__option">
        <v-touch class="x-reader-menu-foot__option-icon"
                 @tap="emit('prev')"
                 @touchend.native.prevent> <img :src="icon.prev">
          <span class="x-reader-menu-foot__option-text">上一章</span>
        </v-touch>
        <v-touch class="x-reader-menu-foot__option-icon"
                 @tap="emit('route','catalog')"
                 @touchend.native.prevent> <img :src="icon.catalog">
          <span class="x-reader-menu-foot__option-text">目录</span>
        </v-touch>
        <v-touch class="x-reader-menu-foot__option-icon"
                 @tap="directionUpdate()"
                 @touchend.native.prevent> <img :src="icon.flip">
          <span class="x-reader-menu-foot__option-text">{{direction === 'horizontal' ? '上下翻页' : '左右翻页' }}</span>
        </v-touch>
        <v-touch class="x-reader-menu-foot__option-icon"
                 @tap="nightUpdate()"
                 @touchend.native.prevent> <img :src="night ? icon.night[1] : icon.night[0]">
          <span class="x-reader-menu-foot__option-text">{{night ? '日间' : '夜间'}}</span>
        </v-touch>
        <v-touch class="x-reader-menu-foot__option-icon"
                 @tap="emit('next')"
                 @touchend.native.prevent> <img :src="icon.next">
          <span class="x-reader-menu-foot__option-text">下一章</span>
        </v-touch>
      </div>
    </div>
  </div>
</template>
<script>
import bus from "./bus.js";
export default {
  name: "XReaderMenu",
  props: ["shelf"],
  data() {
    return {
      status: false,
      nav: false,
      icon: {
        back: require("./imgs/阅读器-返回.png"),
        add: require("./imgs/加入书架.png"),
        more: [
          require("./imgs/隐藏导航-点击后.png"),
          require("./imgs/隐藏导航.png")
        ],
        home: require("./imgs/阅读器-首页.png"),
        category: require("./imgs/阅读器-分类.png"),
        rank: require("./imgs/阅读器-排行榜.png"),
        detail: require("./imgs/阅读器-详情页.png"),
        prev: require("./imgs/阅读器-上一章.png"),
        next: require("./imgs/阅读器-下一章.png"),
        catalog: require("./imgs/阅读器-目录.png"),
        flip: require("./imgs/翻页.png"),
        night: [
          require("./imgs/阅读器-夜间模式.png"),
          require("./imgs/阅读器-日间模式.png")
        ],
        bg: [
          { background: "#f5dce4" },
          { background: "#DFF5DC" },
          { background: "#38658C" },
          { background: "#e6e6e6" },
          { background: "#ffdca3" }
        ],
        check: require("./imgs/阅读器-背景选中对号.png")
      },
      font: bus.font,
      direction: bus.direction,
      bgCheck: bus.bg,
      night: bus.night,
      preset: bus.preset,
      hidden_reader_menus: window.options.hidden_reader_menus
    };
  },
  methods: {
    switchMenu() {
      this.status = !this.status;
      this.nav = false;
    },
    emit(name, params) {
      bus.$emit(name, params);
    },
    fontUpdate: bus.fontUpdate,
    bgUpdate: bus.bgUpdate,
    nightUpdate: bus.nightUpdate,
    directionUpdate: bus.directionUpdate
  },
  mounted() {
    bus.$on("font", font => {
      if (font === this.font) return;
      this.font = font;
    });
    bus.$on("bg", bg => {
      if (bg === this.bg) return;
      this.bgCheck = bg;
    });
    bus.$on("direction", direction => {
      if (direction === this.direction) return;
      this.direction = direction;
    });
    bus.$on("menu", (status = !this.status) => {
      if (status === this.status) return;
      this.switchMenu(status);
    });
    bus.$on("night", night => {
      if (night === this.night) return;
      this.night = night;
    });
  }
};
</script>

