<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" :rows-total="rowsTotal" :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
      }
    },
    methods: {
      getParam:function(param){
        var me=this;
        param=param||{};
        param.page=me.page||1;
        param.size=me.pageSize;
        return param;
      },
      resquest:function(param){
        var me=this;
        var data=me.getParam(param);
        var ajaxOptions = {
            type: 'POST',
            url: me.url,
            data: data,
            dataType: 'json',
            success: function(res) {
                var data = res.data;

                me.$dispatch('complete', data);
                me.data=data.list;
                me.rowsTotal=data.totalPage;
                me.page= data.page
            },
            error: function(res) {
                me.rowsTotal=0;
                me.page=0;
            }
        };
        $.ajax(ajaxOptions);
      },
      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.resquest(param);
      },
      'page':function(page){
        this.page=page;
        this.resquest();
      }
    },
    data: function () {
      return {
        page: 0,
        rowsTotal:0
      }
    }
  }
</script>