<template>
    <div>
        <!-- 查询表单 -->
        <FormModel
            :formLabel="config.formLabel"
            :routerParams="config.routerParams"
            @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"
            v-loading="loading"
            element-loading-text="数据正在加载，请稍后"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.6)"
        >
            <el-table-column
                type="selection"
                width="45"
                align="center"
                :selectable="selectable"
                v-if="config.isSelShow"
            />
            <el-table-column
                align="center"
                label="序号"
                type="index"
                :index="
                    indexContinuation(pageParams.pageNum, pageParams.pageSize)
                "
            />
            <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>
                        {{ scope.row[item.t_props] || '-' }}
                    </template>
                    <!-- <template v-else>
                        {{
                            v === 0
                                ? indexContinuation(
                                      pageParams.pageNum,
                                      pageParams.pageSize,
                                  )
                                : 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: [{ demo: 123 }],
            /* 分页参数 */
            pageParams: {
                pageNum: 1,
                pageSize: 10,
            },
            /* 操作列显示隐藏数据源 */
            columCheckList: [],
            loading: false,
        }
    },

    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)
            this.loading = true
            const res = await this.sendApi(this.pageParams)
            this.loading = false

            if (res.code == 200) {
                this.tableList = res.rows || res.data.rows
                this.total = res.total || res.data.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>
