<template>
    <div>
        <Form class="search-form" v-model="searchParams" labelWidth="120px">
            <slot name="search"></slot>
            <Cell>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="getList">重置</el-button>
            </Cell>
        </Form>
        <el-row class="mb8">
            <slot name="operations" :selections="selections"></slot>
        </el-row>
        <el-table :data="data" v-loading="loading" @selection-change="handleSelectionChange">
            <slot name="default"></slot>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="searchParams.pageNum"
          :limit.sync="searchParams.pageSize"
          @pagination="getList"
        />
    </div>
</template>

<script>

/**
 * 列表组件
 */
export default {
    name: 'Table',
    props: {
        queryApi: {
            type: Function
        }
    },
    data(){
        return {
            searchParams: {
                pageNum: 1,
                pageSize: 10
            },
            data: [],
            total: 0,
            loading: false,
            selections: []
        }
    },
    created(){
        this.getList()
    },
    methods:{
        async getList(){
            this.loading = true
            const {rows, total} = await this.queryApi(this.searchParams)
            this.data = rows
            this.total = total
            this.loading = false
        },
        handleSelectionChange(val){
           this.selections = val
           this.$parent.model['selections'] = val
        }
    }
}
</script>

<style>
.search-form.detail-form.el-form--inline .el-form-item {
  display: inline-block;
}
.search-form.detail-form.el-form--inline .el-form-item__content{
  width: 220px;
}
</style>