<!-- 功能：带接口请求的table; 作者：LZJ; 时间：2022年06月29日 16:37:31-->
<template>
    <div id="FHTable">
        <CommonTable v-loading="loading" :has-checkbox="hasCheckbox" :table-obj="tableProps" @handleTableClick="handleTableClick" @handleSelectionChange="handleSelectionChange" />
        <div v-if="showPagination && judgeEmpty(listArr)" class="ta-r">
            <el-pagination small background :total="total" :page-sizes="pageSizes" :current-page="currentPage" :page-size="pageSize" class="mt16" layout="sizes, total, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
import { CommonTable } from '@/components';
import { trimParams, brightenKeyword } from '@/tool/func';
import { pagination } from '@/constant';
export default {
    // 组件名称
    name: 'FHTable',
    // 局部注册的组件
    components: {
        CommonTable
    },
    // 组件参数 接收来自父组件的数据
    props: {
        queryTableData: {
            type: Function,
            required: true
        },
        hasCheckbox: {
            type: Boolean,
            default: false
        },
        queryParams: {
            type: Object,
            default: () => { }
        },
        // 列表属性
        tableProps: {
            type: Object,
            required: true
        },
        // 默认分页页码选项
        pageSizes: {
            type: Array,
            default: () => [10, 20, 50, 100]
        },
        // 默认分页页码选项
        pageSize: {
            type: Number,
            default: 10
        },
        // 是否显示分页
        showPagination: {
            type: Boolean,
            default: true
        },
        listMapName: {
            type: String,
            default: 'list'
        }
    },
    // 组件状态值
    data() {
        return {
            loading: false,
            tableObj: {},
            total: pagination.total,
            currentPage: pagination.currentPage,
            // 接口返回的数组
            listArr: [],
            offset: 0,
            limit: 10
        };
    },
    // 侦听器
    watch: {
        pageSize(val) {
            this.limit = this.deepClone(val);
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        // 接口请求
        async getTableList() {
            console.log('this.queryParams', this.queryParams);
            const params = Object.assign({
                limit: this.limit,
                offset: (this.currentPage - 1) * this.limit
            }, trimParams(this.queryParams));
            this.loading = true;

            try {
                const res = await this.queryTableData(params);
                this.total = res.total;
                this.listArr = res[this.listMapName];
                const tablePropArr = this.tableProps['tableProp'];
                const tempArr = tablePropArr.filter(t => t.type === 'htmlType');
                this.listArr.forEach(item => {
                    tempArr.forEach(t => {
                        const xssProp = 'xss' + t.prop;
                        item[xssProp] = item[t.prop] ? brightenKeyword(t.color || '#1677ff', item[t.prop]) : '--';
                    });
                    Object.keys(item).forEach(k => { item[k] = item[k] || '--'; });
                });
                this.loading = false;
                console.log('this.listAr', this.listArr);
                this.$emit('handleTableList', this.listArr);
            } catch (error) {
                console.log('error', error);
                this.loading = false;
            }
        },
        // 分页改变
        handleSizeChange(val) {
            this.limit = val;
            this.offset = 0;
            this.getTableList();
        },
        handleCurrentChange(val) {
            this.offset = (val - 1) * this.limit;
            this.currentPage = val;
            this.getTableList();
        },
        handleTableClick(item) {
            this.$emit('handleTableClick', item);
        },
        handleSelectionChange(selection) {
            this.$emit('handleSelectionChange', selection);
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>
</style>
