export var mixin = {
  data: function () {
    return {
      currentPage: 1,
      pageSize: 25,
      pageSizeList: pageSizeList,

      selectedItems: [],

      searchTerm: null,
      searchForm: {},

      tableData: [],
      datatablesParameters: {
        draw: 0,
        columns: [],
        order: [],
        start: 0,
        length: 25,
        search: {
          value: null,
          regex: false
        },
        _: null,
      },
      loading: true
    };
  },
  mounted: function () {
    this.initializeDataTablesParameters();
    this.queryTableData();
  },
  methods: {
    queryTableData: function () {
      axios.get(this.resource, {
        params: this.buildDataTablesParameters(),
        paramsSerializer: (params) => {
          var parameters = JSON.parse(JSON.stringify(params));
          delete parameters.order;
          delete parameters.columns;
          delete parameters.search;
          params.columns.forEach((element, index) => {
            if (!element.data) {
              return;
            }
            parameters['columns[' + index + '][data]'] = element.data;
            parameters['columns[' + index + '][name]'] = element.name;
            parameters['columns[' + index + '][searchable]'] = element.searchable ? element.searchable : true;
            parameters['columns[' + index + '][orderable]'] = element.orderable ? element.orderable : true;
            parameters['columns[' + index + '][search][value]'] = element.search.value ? element.search.value : null;
            parameters['columns[' + index + '][search][regex]'] = element.search.regex ? element.search.regex : false;
            if (element.search.hasOwnProperty('advance')) {
              for (var operator in element.search.advance) {
                if (element.search.advance.hasOwnProperty(operator)) {
                  parameters['columns[' + index + '][search][advance][' + operator + ']'] = val;
                }
              }
            }
          });
          params.order.forEach(function (element, index) {
            parameters['order[' + index + '][column]'] = element.column;
            parameters['order[' + index + '][dir]'] = element.dir ? element.dir : 'asc';
          });
          parameters['search[value]'] = params.search.value !== undefined ? params.search.value : null;
          parameters['search[regex]'] = params.search.regex ? params.search.regex : false;
          var parameterString = [];
          for (var key in parameters) {
            if (parameters.hasOwnProperty(key)) {
              if ([undefined, null, ''].indexOf(parameters[key]) === -1) {
                parameterString.push(key + '=' + parameters[key]);
              }
              else {
                parameterString.push(key + '=');
              }
            }
          }
          parameterString = encodeURI(parameterString.join('&'));
          return parameterString;
        }
      })
        .then(result => {
          this.tableData = result.data.data;
          this.loading = false;
        });
    },
    onSubmitSearch: function () {
      alert('onSubmitSearch');
    },
    onCreate: function () {
      alert('onCreate');
    },
    onBundleDelete: function () {
      alert('onBundleDelete');
    },
    handleClick: function () {
      alert('handleClick');
    },
    handleSizeChange: function () {
      alert('handleSizeChange');
    },
    handleCurrentChange: function () {
      alert('handleCurrentChange');
    },
    initializeDataTablesParameters: function () {
      this.$refs.table.columns.forEach((column, index, columns) => {
        if (!column.property) {
          return;
        }
        this.datatablesParameters.columns.push({
          data: column.property,
          name: column.property,
          searchable: true,
          orderable: column.sortable,
          search: {
            value: null,
            regex: false,
            advance: {}
          },
        });
      });
    },
    buildDataTablesParameters: function () {
      this.datatablesParameters.draw++;
      this.datatablesParameters._ = new Date().getTime();
      return this.datatablesParameters;
    }
  }
};


export function loadTableData (resource) {

}

export function onDelete () {

}
export function onBundle () {

}

export var pageSizeList = [
  {
    label: 25,
    value: 25
  },
  {
    label: 50,
    value: 50
  },
  {
    label: 100,
    value: 100
  },
  {
    label: '全部',
    value: -1
  }
];
@@ -1,16 +1,53 @@
+import %7BLoading%7D from 'element-ui';%0A%0A
 export var mixin
@@ -498,20 +498,40 @@
 oading: 
-true
+null,%0A      _draw: null,
 %0A    %7D;%0A
@@ -656,37 +656,345 @@
     
-queryTableData: function () %7B
+showLoading: function (target) %7B%0A      this.loading = Loading.service(%7B%0A        target: target,%0A        fullscreen: false,%0A        lock: false,%0A        text: '%E8%AF%BB%E5%8F%96%E4%B8%AD...'%0A      %7D);%0A    %7D,%0A    hideLoading: function () %7B%0A      this.loading.close();%0A    %7D,%0A    queryTableData: function () %7B%0A      this.showLoading('.datatable-loading-section');
 %0A   
@@ -3324,24 +3324,74 @@
 result =%3E %7B%0A
+          if (this._draw == result.data.draw) %7B%0A  
           th
@@ -3437,28 +3437,108 @@
     
+ 
+ 
 this.
-l
+hideL
 oading
- = false
+();%0A          %7D%0A        %7D)%0A        .catch(result =%3E %7B%0A          this.hideLoading()
 ;%0A  
@@ -3870,32 +3870,84 @@
     
-alert('handleSizeChange'
+this.datatablesParameters.length = this.pageSize;%0A      this.queryTableData(
 );%0A 
@@ -4616,16 +4616,67 @@
 draw++;%0A
+      this._draw = this.datatablesParameters.draw;%0A
       th

attach page size to request parameters