/**
 * 分页插件
 * css: my-page.css
 * @param {*} param0
 */
const PageHelper = {
  myPageInit({ pages = 10, currentPage = 1, element = '.my-page', callback }) {
    this.pages = pages;
    this.currentPage = currentPage;
    this.element = element;
    this.callback = callback;

    this.intercept();

    const myPageEl = document.querySelector(this.element);

    // 构造结构
    let htmlStrArr = [];
    for (let i = 0; i < this.pages; i++) {
      htmlStrArr.push(`<li class="my-page-cell">${i + 1}</li>`);
    }
    if (this.pages > 7) {
      htmlStrArr.splice(
        2,
        htmlStrArr.length - 6,
        "<li class='my-page-omit'>...</li>"
      );
    }
    htmlStr = htmlStrArr.join('');
    let pageHtmlStr = `<div class="my-page-prev"><</div>
            <ul class="my-page-group">${htmlStr}</ul>
            <div class="my-page-next">></div>`;

    // 注入结构
    myPageEl.innerHTML = pageHtmlStr;

    // 标记默认页
    this.clickPageFun(this.currentPage);

    // 上下页切换事件注册
    let btns = document.querySelectorAll(`${this.element} div`);
    btns.forEach((el) => {
      el.onclick = this.switchPage.bind(this);
    });

    // 点击事件注册
    myPageEl.onclick = (e) => {
      // console.log(e)
      let classNameArr = e.target.className.split(' ');
      if (classNameArr.indexOf('my-page-cell') !== -1) {
        this.clickPageFun(Number(e.target.innerText));
      }
    };
  },
  // 上下页按钮触发
  switchPage(e) {
    // 获取当前页
    let page =
      document.querySelector(`${this.element} .my-page-checked`).innerText - 0;

    let classNameArr = e.target.className.split(' ');
    if (classNameArr.indexOf('my-page-prev') !== -1) {
      this.clickPageFun(page - 1); // 上一页
    } else if (classNameArr.indexOf('my-page-next') !== -1) {
      this.clickPageFun(page + 1); // 下一页
    }
  },
  // 分页切换处理
  clickPageFun(page) {
    page = Number(page);
    // 满足条件改变结构
    if (this.pages > 7) {
      let newEl = '';
      if (page <= 1) {
        newEl = `
                <li class="my-page-cell">1</li>
                <li class="my-page-cell">2</li>
                <li class="my-page-omit">...</li>
                <li class="my-page-cell">${this.pages}</li>`;
      } else if (page >= 2 && page < this.pages - 1) {
        newEl = `
                <li class="my-page-cell">1</li>
                <li class="my-page-omit">...</li>
                <li class="my-page-cell">${page}</li>
                <li class="my-page-omit">...</li>
                <li class="my-page-cell">${this.pages}</li>`;
      } else if (page >= this.pages - 1) {
        newEl = `
                <li class="my-page-cell">1</li>
                <li class="my-page-omit">...</li>
                <li class="my-page-cell">${this.pages - 1}</li>
                <li class="my-page-cell">${this.pages}</li>`;
      }
      document.querySelector(`${this.element} .my-page-group`).innerHTML =
        newEl;
    }

    // 标注选中项
    let pageCellELs = document.querySelectorAll(
      `${this.element} .my-page-cell`
    );
    pageCellELs.forEach((el) => {
      if (el.innerText == page) {
        el.classList.add('my-page-checked');
      } else {
        el.classList.remove('my-page-checked');
      }
    });

    this.forbidden(page);

    // 回调响应
    this.callback && this.callback(page);
  },

  // 上下页按钮启禁
  forbidden(page) {
    let prveEl = document.querySelector(`${this.element} .my-page-prev`);
    let nextEl = document.querySelector(`${this.element} .my-page-next`);
    if (page === 1) {
      prveEl.classList.add('my-page-forbid');
    } else {
      prveEl.classList.remove('my-page-forbid');
    }

    if (page === this.pages) {
      nextEl.classList.add('my-page-forbid');
    } else {
      nextEl.classList.remove('my-page-forbid');
    }
  },
  // 参数检验
  intercept() {
    if (
      !this.pages ||
      this.pages === 0 ||
      Math.floor(this.pages) != this.pages
    ) {
      throw 'my-page中pages必须是整数且不为0';
      this.pages = Math.floor(this.pages);
    }

    if (
      !this.currentPage ||
      this.currentPage === 0 ||
      Math.floor(this.currentPage) !== this.currentPage
    ) {
      throw 'my-page中currentPage必须是整数且不为0';
      this.currentPage = Math.floor(this.currentPage);
    }

    if (document.querySelectorAll(this.element).length === 0) {
      throw this.element + '元素不存在';
    }

    if (this.currentPage > this.pages) {
      throw '当前页不存在';
    }
  },
};