<template>
    <div>
        <!-- 查询表单 -->
        <FormModel
            :formLabel="config.formLabel"
            @queryList="queryList"
            v-if="config.isFormShow"
        >
        </FormModel>
        <!-- 存放导出等相关按钮的插槽 -->
        <template>
            <!-- 作用域插槽 传递 pageParams 给父组件 -->
            <slot name="export" :pageParams="pageParams"></slot>
        </template>
        <!-- 列表 -->
        <el-table
            :data="tableList"
            border
            ref="tableRef"
            select-on-indeterminate
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                type="selection"
                width="45"
                align="center"
                :selectable="selectable"
                v-if="config.isSelShow"
            />
            <el-table-column
                v-for="(item, v) in tableColumCheckProps"
                :key="v"
                :label="item.t_label"
                :prop="item.t_props"
                :width="item.t_width"
                align="center"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <!-- 判断当前列数据是否需要使用插槽的数据 -->
                    <template v-if="item.t_slot">
                        <slot :data="scope.row" :name="item.t_slot"></slot>
                    </template>
                    <template v-else>
                        {{
                            v === 0
                                ? scope.$index + 1
                                : scope.row[item.t_props] || '-'
                        }}
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="操作"
                v-if="config.handleColShow"
                :width="config.handleWidth"
            >
                <template slot-scope="{ row }">
                    <slot :data="row" name="handle"></slot>
                </template>

                <!-- 增加筛选列显示隐藏操作 -->
                <template slot="header">
                    <el-popover
                        placement="bottom"
                        title="筛选列"
                        width="200"
                        trigger="click"
                    >
                        <span slot="reference" class="handel-text">操作</span>
                        <div>
                            <el-checkbox
                                v-for="(check, index) in columCheckList"
                                v-show="check.t_label != '序号'"
                                :key="index"
                                v-model="check.checked"
                                >{{ check.t_label }}</el-checkbox
                            >
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-if="config.pageShow"
            :total="total"
            :page.sync="pageParams.pageNum"
            :limit.sync="pageParams.pageSize"
            @pagination="queryList"
        />
    </div>
</template>

<script>
    import FormModel from '../FormModel'
    export default {
        components: {
            FormModel,
        },
        props: {
            /* 列表请求接口 */
            sendApi: {
                type: Function,
                default: () => {
                    return function () {}
                },
            },
            /* 查看详情需显示列表等操作 传入的参数 */
            sendParams: {
                type: Object,
                default: () => {
                    return {}
                },
            },
            /* 表格复选框禁用状态 */
            selectable: {
                type: Function,
                default: () => {
                    return true
                },
            },

            /* 列表 查询表单等配置项 */
            config: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            return {
                total: 0,
                tableList: [],
                /* 分页参数 */
                pageParams: {
                    pageNum: 1,
                    pageSize: 10,
                },
                /* 操作列显示隐藏数据源 */
                columCheckList: [],
            }
        },

        created() {
            this.getList()
            this.columCheckList = this.config.columnsList
            this.columCheckList = this.columCheckList.map((e) => {
                this.$set(e, 'checked', true)
                return e
            })
        },
        computed: {
            /* 根据操作栏控制表头是否显示 */
            tableColumCheckProps() {
                return this.columCheckList.filter((e) => {
                    return e.checked != false
                })
            },
        },
        methods: {
            /* form 查询组件触发的自定义事件 */
            async queryList(val, reset) {
                if (reset) {
                    this.pageParams.pageNum = 1
                    this.pageParams.pageSize = 10
                }
                this.pageParams = Object.assign(
                    val,
                    this.pageParams,
                    this.sendParams,
                )
                this.pageParams.beginTime = val.time ? val.time[0] : ''
                this.pageParams.endTime = val.time ? val.time[1] : ''
                this.getList()
            },
            /* 获取列表信息 */
            async getList() {
                this.pageParams = Object.assign(
                    this.pageParams,
                    this.sendParams,
                )
                const res = await this.sendApi(this.pageParams)

                if (res.code == 200) {
                    this.tableList = res.rows
                    this.total = res.total
                }
            },

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

<style>
    .check-all {
        margin-bottom: 5px;
        cursor: pointer;
    }

    .handel-text {
        cursor: pointer;
    }
    .handel-text:hover {
        text-decoration: underline;
        color: #409eff;
    }
</style>
