<template>
  <div class="vue-grid">
  <div class="dataTables_wrapper no-footer">
    <table grid-select="{{checkedFields}}" class="table table-striped table-bordered responsive dataTable no-footer">
      <thead>
        <tr>
          <th v-if="checkAble" class="operation-th"></th>
          <th v-for="item in columns">
					  {{item.display}}
					</th>
        </tr>
      </thead>
      <tbody>
        <template v-if="pageAble">
          <template v-if="data.length > 0">
            <tr v-for="item in data">
              <td v-if="checkAble"><input type="checkbox" id="{{item[checkedField]}}" value="{{item[checkedField]}}" v-model="checkedFields"></td>
              <td v-for="option in columnsConfigs" >{{{bodyCell(item,option)}}} </td>
            </tr>
          </template>
          <template v-else>
            <tr><td :colspan="100">没有数据</td></tr>
          </template>
        </template>
        <template v-else>
          <tr v-for="item in data">
            <td v-for="option in columnsConfigs" >{{{ item[option.name] }}} </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
    <template v-if="pageAble">
      <pagination :page-size="pageSize" :pages="rowsTotal" :current-page.sync="page"></pagination>
    </template>
  </div>
</template>

<script>
  import Pagination from './Pagination'
  module.exports = {
    components: {
      pagination: Pagination
    },
    props: {
      pageAble: {
        type: Boolean,
        default: true
      },
      checkedField: {
        type: String,
        default: 'id'
      },
      checkedFields: {
        type: Array,
        default: []
      },
      checkAble: {
        type: Boolean,
        default: false
      },
      pageSize: {
        type: Number,
        default: 10
      },
      columns: {
        type: Array,
        required: true
      },
      url:{
        type:String
      },
      data: {
        type: Array,
        default: [],
        required: true
      }
    },
    data(){
      return {
        params:{}
      }
    },
    methods: {
      getParam:function(param){
        var me=this;
        me.params=param||me.params;
        me.params.page=me.page||1;
        me.params.size=me.pageSize;
        return me.params;
      },
      resquest:function(param){
        var me=this;
        var data=me.getParam(param);

        this.$http.post(me.url, data).then(function (response) {
            var res = response.data;


            me.data = res.data.list;
            me.rowsTotal = res.data.totalPage;
            me.page = res.data.page;
          me.$dispatch('completeGrid', res.data);
        },function (response) {
            me.rowsTotal=0;
            me.page=0;
        });
      },
      bodyCell:function(row,col){
        if (!row || !col) return "";
        var value = col.name ? row[col.name] : null;
        var content = "";
        if (col.render) {
            content = col.render.call(null, row);
        } else {
            content = value;
        }
        return content;
      }
    },
    ready:function(){
      //this.resquest();
    },
    computed: {
      pageStart: function () {
        return (this.page - 1) * this.pageSize
      },
      columnsConfigs: function () {
        let columns = this.columns
        let cl = columns.length
        let arr = []
        for (let i = 0; i < cl; i++) {
          arr.push(columns[i])
        }
        return arr
      }
    },
    events:{
      //子组件(grid)进行接收
      'grid-reload':function(param){
        this.page=1;
        this.resquest(param);
      },
      'page':function(page){
        this.page=page;
        console.log(page);
        this.resquest();
      }
    },
    data: function () {
      return {
        page: 0,
        rowsTotal:0
      }
    }
  }
</script>