import Vue from "vue";

function parseQueryString(url) {
  url = url == null ? window.location.href : url;
  var search = url.substring(url.lastIndexOf("?") + 1);
  if (url.indexOf('reader') === -1) return {};
  if (!search) return {};
  return JSON.parse(
    '{"' +
      decodeURIComponent(search)
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"') +
      '"}'
  );
}

// 如果url携带阅读器配置参数 则使用携带参数
(function() {
  let urlObj = parseQueryString(window.nextPage);
  if (urlObj.font) localStorage.setItem("font", urlObj.font);
  if (urlObj.bg) localStorage.setItem("bg", urlObj.bg);
  if (urlObj.night) localStorage.setItem("night", urlObj.night);
})();

const preset = {
  font: {
    default: localStorage.getItem("font")
      ? isNumber(localStorage.getItem("font"), 21)
      : (window.options && +window.options.font_size) || 21,
    max: 36,
    min: 12
  },
  bg: (window.options && +window.options.background) || 3,
  bgStyle: [
    {
      background: "#f5dce4",
      color: "#7B3149"
    },
    {
      background: "#DFF5DC",
      color: "#1F4D2B"
    },
    {
      background: "#38658C",
      color: "#fff"
    },
    {
      background: `#e6e6e6`,
      color: "#262626"
    },
    {
      background:
        "url(http://yueduyun.oss-cn-hangzhou.aliyuncs.com/h5/reader_bg_parchment_paper.jpg) center / 100% 100% fixed",
      color: "#4c3831"
    }
  ],
  bgStyle2: [
    {
      background: "#f6eaea",
      color: "#1a1a1a",
      btnBg: "#efd8d8",
      btnBorder: "#e3bdbd",
      btnSysBorder: "#e3bdbd",
      menuBorder: "#e3bdbd"
    },
    {
      background: "#cce8cf",
      color: "#1a1a1a",
      btnBg: "#b1d3b5",
      btnBorder: "#95bc9a",
      btnSysBorder: "#95bc9a",
      menuBorder: "#68aa8a"
    },
    {
      background: "#e0eef7",
      color: "#1a1a1a",
      btnBg: "#c7dce9",
      btnBorder: "#a4c2d5",
      btnSysBorder: "#a4c2d5",
      menuBorder: "#6090ae"
    },
    {
      background: "#e6e6e6",
      color: "#1a1a1a",
      btnBg: "#d9d9d9",
      btnBorder: "#ccc",
      btnSysBorder: "#666",
      menuBorder: "#ccc"
    },
    {
      background: "#f7f3e0",
      color: "#1a1a1a",
      btnBg: "#e8e3cb",
      btnBorder: "#cec9ae",
      btnSysBorder: "#95bc9a",
      menuBorder: "#c6a473"
    }
  ],
  bgMenu: false,
  showGift: false,
  night: false,
  nightStyle: {
    color: " #999",
    background: "#222"
  },
  nightStyle2: {
    background: "#262626",
    color: "#666",
    btnBg: "#333",
    btnBorder: "#0d0d0d",
    btnSysBorder: "#666"
  },
  slide: {
    //快速滑动
    count: 10, //最大记录次数
    interval: 30, //时间间隔
    speed: 0.2 //距离间隔
  },
  offset: 1 / 4, //偏移超过offset后翻页
  border: 1 / 3, //位移超出边界后缓冲的最大值
  // direction: (window.options && window.options.page_style) || "vertical",
  direction: "vertical",
  w: window.innerWidth,
  h: window.innerHeight
};

function isNumber(o, preset) {
  return /^\d+$/.test(o) ? +o : preset;
}
function isBoolean(o, preset) {
  if (o === "false") return false;
  if (o === "true") return true;
  return preset;
}

function checkFont(font) {
  if (font < preset.font.min || font > preset.font.min)
    return preset.font.default;
  else return font;
}
export default new Vue({
  data: {
    font: checkFont(preset.font.default),
    bg: isNumber(localStorage.getItem("bg"), preset.bg),
    night: isBoolean(localStorage.getItem("night"), preset.night),
    bgList: preset.bgStyle2,
    // direction: localStorage.getItem("direction") || preset.direction,
    direction: preset.direction,
    bgMenu: preset.bgMenu,
    showGift: preset.showGift,
    preset
  },
  methods: {
    fontUpdate(font) {
      if (
        font !== this.font &&
        typeof font === "number" &&
        font >= this.preset.font.min &&
        font <= this.preset.font.max
      ) {
        this.font = font;
      }
    },
    bgUpdate(e, bg) {
      // e.srcEvent.stopImmediatePropagation()
      if (e.target.className === "bg-item") {
        if (bg !== this.bg && typeof bg === "number") {
          this.bg = bg;
        }
      }
    },
    nightUpdate() {
      this.night = !this.night;
    },
    bgMenuUpdate(e) {
      if (e.target.className === "operator-item") {
        this.bgMenu = !this.bgMenu;
      }
    },
    showGiftUpdate() {
      this.showGift = !this.showGift;
    },
    directionUpdate() {
      this.direction =
        this.direction === "horizontal" ? "vertical" : "horizontal";
    }
  },
  watch: {
    font(val) {
      localStorage.setItem("font", val);
      this.$emit("font", val);
    },
    bg(val) {
      localStorage.setItem("bg", val);
      this.$emit("bg", val);
      this.night = false;
    },
    night(val) {
      localStorage.setItem("night", val);
      this.$emit("night", val);
    },
    bgMenu(v) {
      this.$emit("bg-menu", v);
    },
    sGift(v) {
      this.$emit("s-gift", v);
    },
    direction(val) {
      localStorage.setItem("direction", val);
      this.$emit("direction", val);
    }
  }
});
