import "./index.css";
/* script */
import { componentMixin, createComponentName } from '../../utils/base.js';
import Icon from '../icon';
import Select from '../select';
const __vue_script__ = {
  name: createComponentName('pagination'),
  mixins: [componentMixin],
  props: {
    // 分页布局
    layout: {
      // - < [] > * ->
      type: String,
      default: '< [] >'
    },
    // 当前页数
    num: {
      type: Number,
      default: 1
    },
    // 每页条数
    pageSize: {
      type: Number,
      default: 20
    },
    // 数据总数
    total: {
      type: Number,
      default: 0
    },
    // 每页可以显示多少条
    sizes: {
      type: Array,
      default: () => [20, 40, 60]
    },
    // 页数最多显示多少条
    pagerCount: {
      type: Number,
      default: 7
    },
    // 自定义渲染 可用于SEO
    renderItem: {
      type: Function
    }
  },
  computed: {
    pages() {
      return Math.ceil(this.total / this.pageSize);
    },

    numbers() {
      if (this.total <= this.pageSize) return [1];
      const pagerCount = this.pagerCount;
      const currentPage = Number(this.num);
      const pageCount = Number(this.pages);
      let showPrevMore = false;
      let showNextMore = false;

      if (pageCount > pagerCount) {
        if (currentPage > pagerCount - 3) {
          showPrevMore = true;
        }

        if (currentPage < pageCount - 3) {
          showNextMore = true;
        }
      }

      const array = [];

      if (showPrevMore && !showNextMore) {
        const startPage = pageCount - (pagerCount - 2);

        for (let i = startPage; i < pageCount; i += 1) {
          array.push(i);
        }
      } else if (!showPrevMore && showNextMore) {
        for (let i = 2; i < pagerCount; i += 1) {
          array.push(i);
        }
      } else if (showPrevMore && showNextMore) {
        const offset = Math.floor(pagerCount / 2) - 1;

        for (let i = currentPage - offset; i <= currentPage + offset; i += 1) {
          array.push(i);
        }
      } else {
        for (let i = 2; i < pageCount; i += 1) {
          array.push(i);
        }
      }

      if (showNextMore) {
        array.push('>>', this.pages);
      } else {
        array.push(this.pages);
      }

      if (showPrevMore) {
        array.unshift(1, '<<');
      } else {
        array.unshift(1);
      }

      return array;
    }

  },
  methods: {
    changeSize(value) {
      if (value === this.pageSize) return;
      this.$emit('update:size', value);
      this.$emit('change', this.num, value);
    },

    changeNum(value) {
      if (value === this.num) return;
      let num = value > this.pages ? this.pages : value;
      num = num > 0 ? num : 1;
      this.$emit('update:num', num);
      this.$emit('change', num, this.pageSize);
    },

    renderPrev() {
      const h = this.$createElement;
      let content = h("div", {
        on: {
          "click": () => this.changeNum(this.num - 1)
        },
        "class": this.bem('number', {
          'prev': true,
          disabled: this.num - 1 < 1
        })
      }, [h(Icon, {
        attrs: {
          name: "arrow-left"
        }
      })]);

      if (this.renderItem && this.num - 1 >= 1) {
        return this.renderItem(this.num - 1, 'prev', content);
      }

      return content;
    },

    renderNext() {
      const h = this.$createElement;
      let content = h("div", {
        "class": this.bem('number', {
          'next': true,
          disabled: this.num + 1 > this.pages
        }),
        on: {
          "click": () => this.changeNum(this.num + 1)
        }
      }, [h(Icon, {
        attrs: {
          name: "arrow-right"
        }
      })]);

      if (this.renderItem && this.num - 1 >= 1) {
        return this.renderItem(this.num + 1, 'next', content);
      }

      return content;
    },

    renderPager() {
      const h = this.$createElement;
      return h(Select, {
        "class": this.bem('pager'),
        attrs: {
          value: this.pageSize,
          options: this.sizes.map(size => ({
            value: size,
            label: `每页${size}条`
          }))
        },
        on: {
          "change": this.changeSize
        }
      });
    },

    renderTotal() {
      const h = this.$createElement;
      return h("span", {
        "class": this.bem('total')
      }, ["\u5171", h("em", [this.total]), "\u6761"]);
    },

    renderJump() {
      const h = this.$createElement;
      return h("span", {
        "class": this.bem('jump')
      }, ["\u5230", h("gd-input", {
        style: {
          width: '60px'
        },
        on: {
          "enter": e => this.changeNum(Number(e.target.value))
        }
      }), "\u9875"]);
    },

    renderNumber(i) {
      const h = this.$createElement;
      let body = i;

      if (i === '<<') {
        body = '•••';
      } else if (i === '>>') {
        body = '•••';
      }

      const isNumber = typeof i === 'number';
      let content = h("div", {
        "class": this.bem('number', {
          'active': i === this.num,
          ellipsis: !isNumber
        }),
        on: {
          "click": () => isNumber && this.changeNum(i)
        }
      }, [body]);

      if (this.renderItem) {
        return this.renderItem(i, isNumber ? 'number' : 'ellipsis', content);
      }

      return content;
    },

    renderNumbers() {
      const h = this.$createElement;
      return h("div", {
        attrs: {
          role: "ul",
          unselectable: "unselectable"
        },
        "class": this.bem('numbers')
      }, [this.numbers.map(value => this.renderNumber(value))]);
    }

  },

  render() {
    const h = arguments[0];
    const types = this.layout.split(' ').filter(value => value);
    const components = types.map(type => {
      switch (type) {
        case '-':
          return this.renderPager();

        case '[]':
          return this.renderNumbers();

        case '<':
          return this.renderPrev();

        case '>':
          return this.renderNext();

        case '*':
          return this.renderTotal();

        case '->':
          return this.renderJump();

        default:
          break;
      }

      return null;
    });
    return h("div", {
      "class": "gd-pagination"
    }, [components]);
  }

};
/* template */

/* style */

const __vue_inject_styles__ = undefined;
/* scoped */

const __vue_scope_id__ = undefined;
/* module identifier */

const __vue_module_identifier__ = undefined;
/* functional template */

const __vue_is_functional_template__ = undefined;
/* component normalizer */

import __vue_normalize__ from '../../utils/vue-normalize-component.js';
/* style inject */

/* style inject SSR */

export default __vue_normalize__({}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);