<template>
    <el-table
            :data="tableData"
            border
            class="table"
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="name"
                label="新闻分类名称"
                :show-overflow-tooltip="true"
                width="360">
        </el-table-column>
        <el-table-column
                prop="number"
                label="序号"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="创建时间"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                prop="updateTime"
                label="更新时间"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                prop="updateUserName"
                label="更新者"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                prop="createUserName"
                label="创建者"
                :show-overflow-tooltip="true"
                width="200">
        </el-table-column>
        <el-table-column
                label="操作"
        >
            <template slot-scope="scope">
                <el-button type="text" @click="handleEditor(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name:     'Table',
        inject:   {
            tableServiceData:      {
                type:    Object,
                default: () => {
                },
            },
            paginationServiceData: {
                type:    Object,
                default: () => {
                },
            },
        },
        computed: {
            tableData() {
                return this.tableServiceData.myData;
            },
        },
        methods:  {
            handleSelectionChange(data) {
                const arr = [];
                data.forEach(item => {
                    arr.push(item.newsClassifyId);
                });
                this.$emit('select-change', arr);
            },
            handleEditor(data) {
                this.$emit('editor', data);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .table {
        ::v-deep .is-leaf {
            .cell {
                text-align: center;
            }
        }

        ::v-deep .el-table-column--selection {
            .cell {
                text-align: center;
            }
        }

        .table-link {
            text-decoration: none;
            color: #2C98F2;
        }
    }

</style>