<template>
  <div class='adminbank-tablelist-box'>
    <TableHeader v-bind='header' />
    <SearchForm :search='search' :submit='_submit'/>
    <TableHUI :data='Data_data' :columns='table.header' />
    <PaginationHUI v-bind='Data_pagination' />
  </div>
</template>

<script>
  import './style.less';
  
  export default {
    name: 'TableList',
    data () {
      return {
        Data_data: [],
        Data_pagination: {
          pageSize: this.table.pageSize || 20,
          pageIndex: this.table.pageIndex || 0,
          total: 0,
          list: [1, 10, 20, 40],
        }
      }
    },
    props: ['header', 'table', 'search'],
    computed: {
    },
    created () {
      this.header.callback = callback => {
        this._getList()
          .then(callback)
      }
      
      
      this._initPaginationSelect();
      this._getList();
    },
    methods: {
      _submit (val) {
        let obj = {};        
        Object.keys(val).forEach(name => {
          obj[name] = val[name];
        })
        this._getList(obj);
      },
      _initPaginationSelect () {
        this.Data_pagination.callback = (val) => {
          this.Data_pagination.pageIndex = val.pageIndex;
          this.Data_pagination.pageSize = val.pageSize;
          this._getList();
        };        
      },
      _getList (params) {
        return new Promise((resolve, reject) => {          
          let _params = Object.assign({
            pageSize: this.Data_pagination.pageSize,
            pageIndex: this.Data_pagination.pageIndex,
          }, params)
          
          this.$Post(this.table.api,_params)
            .then(res => {
              let data = this.table.callback ? this.table.callback(res) : {
                list: [],
                total: 0
              };
              data.list.length > 0 && data.list.map((val, key) => val['key'] = this.Data_pagination.pageSize * this.Data_pagination.pageIndex + key+1);
              this.Data_data = data.list;
              this.Data_pagination.total = data.total || 0;
              resolve(res);
            })
        })
      },
    }
  }
</script>