<template>
    <div>
        <FormModel
            :formLabel="formLabel"
            @queryList="queryList"
            :exportShow="exportShow"
        >
            <template>
                <slot name="submitScrap"></slot>
            </template>
        </FormModel>
        <el-table
            :data="tableList"
            border
            ref="tableRef"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                type="selection"
                width="45"
                align="center"
                v-if="isSelShow"
            />
            <el-table-column
                :type="v === 0 ? 'index' : ''"
                v-for="(item, v) in tableProps"
                :key="v"
                :label="item.t_label"
                :prop="item.t_props"
                :width="item.t_width"
                align="center"
            />
            <el-table-column
                align="center"
                label="操作"
                v-if="handleColShow"
                :width="handleWidth"
            >
                <template slot-scope="{ row }">
                    <slot :data="row"></slot>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-if="pageShow"
            :total="total"
            :page.sync="pageParams.pageNum"
            :limit.sync="pageParams.pageSize"
            @pagination="queryList"
        />
    </div>
</template>

<script>
    import FormModel from './formModel.vue'
    export default {
        components: {
            FormModel,
        },
        props: {
            tableProps: {
                type: Array,
                default: () => {
                    return []
                },
            },
            formLabel: {
                type: Array,
                default: () => {
                    return []
                },
            },
            sendApi: {
                type: Function,
                default: () => {
                    return function () {}
                },
            },
            handleColShow: {
                type: Boolean,
                default: () => {
                    return true
                },
            },
            exportShow: {
                type: Boolean,
                default: () => {
                    return false
                },
            },
            pageShow: {
                type: Boolean,
                default: () => {
                    return false
                },
            },
            /* 是否需要复选框 */
            isSelShow: {
                type: Boolean,
                default: () => {
                    return false
                },
            },
            /* 操作栏宽度 */
            handleWidth: {
                type: String,
                default: () => {
                    return ''
                },
            },
        },
        data() {
            return {
                total: 1,
                tableList: [
                    { demo: 555 },
                    { demo: 555 },
                    { demo: 555 },
                    { demo: 555 },
                    { demo: 555 },
                ],
                pageParams: {
                    pageNum: 1,
                    pageSize: 10,
                },
            }
        },
        methods: {
            async queryList(val, reset) {
                if (reset) {
                    this.pageParams.pageNum = 1
                    this.pageParams.pageSize = 10
                }
                var params = Object.assign(val, this.pageParams)
                params.beginTime = params.time[0]
                params.endTime = params.time[1]
                const res = await this.sendApi(params)
                console.log(res, '列表数据')
                console.log('查询列表---', val)
            },

            /* 表格复选框 */
            handleSelectionChange(row) {
                console.log(row, '列表复选框')
                this.$emit('getTableSelectionChange', row)
            },
            /* 清除选中状态 */
            clearSelType() {
                this.$refs.tableRef.clearSelection()
            },
        },
    }
</script>

<style></style>
