<template>
    <div>
        <FormModel
            :formLabel="formLabel"
            @queryList="queryList"
            :exportShow="exportShow"
        >
            <template>
                <slot name="submitScrap" />
            </template>
        </FormModel>
        <el-table
            :data="tableList"
            border
            ref="tableRef"
            select-on-indeterminate
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                type="selection"
                width="45"
                align="center"
                v-if="isSelShow"
                :selectable="selectable"
            />
            <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="handleColShow"
                :width="handleWidth"
            >
                <template slot-scope="{ row }">
                    <slot :data="row"></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="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 ''
                },
            },
            /* 额外参数 */
            sendParams: {
                type: Object,
                default: () => {
                    return {}
                },
            },
            /* 表格是否勾选 */
            selectable: {
                type: Function,
                default: () => {
                    return true
                },
            },
        },
        data() {
            return {
                total: 0,
                tableList: [
                    { demo: '123' },
                    { demo: '123' },
                    { demo: '123' },
                    { demo: '123' },
                    { demo: '123' },
                ],
                pageParams: {
                    pageNum: 1,
                    pageSize: 10,
                },
                columCheckList: [],
            }
        },
        created() {
            this.getList()
            this.columCheckList = this.tableProps
            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: {
            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) {
                console.log(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>
