<template>
    <div id="drdc_news">
        <el-table ref="multipleTables" class="table-div" :data="newsData" tooltip-effect="dark"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="website_name" label="新闻来源" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="title" label="新闻标题" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="pubdate" label="发布时间" align="center"></el-table-column>
            <el-table-column width="140" prop="website_img" label="包含图片" align="center"
                :formatter="fileData"></el-table-column>
            <el-table-column width="140" label="首页显示" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.original ? '是' : '否' }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-div">
            <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage" @size-change="handleSizeChange" :page-size="everySize" :total="total"
                :page-sizes="[10, 20, 50, 100]" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { get, post, fileUpload, startLoading, endLoading } from '../../util/http_util';
export default {
    components: {},
    data() {
        return {
            currentPage: 1,
            everySize: 10,
            total: 0,
            multipleSelection: [],
            newsData: [],
            stTime: null,
            edTime: null,
        };
    },
    props: {
        clientDetails: {
            type: Object,
            default: {},
        },
    },
    methods: {
        handleSelectionChange(val) {
            let list = [], listImg = [];
            for (let i = 0; i < val.length; i++) {
                list.push(val[i].id);
                val[i].website_img && val[i].website_img.length > 0 && (listImg = listImg.concat(val[i].website_img));
            }
            this.multipleSelection = list;
            this.$emit('change_Select', this.multipleSelection);
        },
        search(pageNum) {
            startLoading();
            this.currentPage = pageNum;
            let obj = {};
            obj.topic = null;
            obj.title = null;
            obj.stTime = this.stTime;
            obj.edTime = this.edTime;
            post('api/rest/fulltext/queryNews?pageNum=' + pageNum + '&pageSize=' + this.everySize, obj).then(res => {
                this.newsData = res.list;
                this.total = res.totals;
                endLoading()
            }).catch(err => {
                endLoading()
                this.$message.warning(err.message);
                // this.$message.error(err.message);
            })
        },
        //分页
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum;
            this.search(pageNum);
        },
        handleSizeChange(val) {
            this.everySize = val;
            this.currentPage = 1;
            this.search(1);
        },
        fileData(row) {
            if (row.website_img != null && row.website_img.length > 0) {
                return '有';
            } else {
                return '无';
            }
        },
    },
    activated() {
    },
    watch: {
        clientDetails: function (val) {
            this.stTime = val.stTime;
            this.edTime = val.edTime;
            this.search(1);
        }
    }
};
</script>
<style lang="scss">
#drdc_news {
    width: 100%;
    height: 100%;

    .table-div {
        width: 100%;
        height: calc(100% - 50px);
    }

    .el-table tr {
        background-color: transparent !important;
        color: #ffffffc7;
    }

    .el-table thead tr {
        height: 40px;
        background: url(../../assets/img/setting/tr1.png) no-repeat;
        background-size: 100% 100%;
    }

    .el-table th {
        background-color: transparent;
    }

    tbody tr {
        border-bottom: 1px solid #252631;
    }

    .el-table td {
        border-bottom: 1px solid #252631;
        border-right: unset;
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #82848a78;
    }

    .el-table th {
        border: unset;
        // background-color: #263b5d !important;
    }

    .el-table--fit {
        background: none !important;
        border: unset;
    }

    .el-icon-delete-solid {
        color: red;
        cursor: pointer;
        font-size: 18px;
    }

    .el-icon-edit {
        color: #1172d8;
        cursor: pointer;
        font-size: 20px;
    }

    .el-icon-view {
        color: #00ffff;
        font-size: 20px;
        cursor: pointer;
    }

    .el-table--group::after,
    .el-table--border::after,
    .el-table::before {
        background-color: unset;
    }

    .pagination-div {
        width: 100%;
        height: 50px;

        .el-pagination {
            margin-top: 9px;
            text-align: right;

            .el-pagination__jump {
                color: white;
            }

            .el-pagination__total {
                color: white;
            }
        }

        .myPagination.is-background .el-pager li:not(.disabled).active {
            color: #fff;
            border: 1px solid #146a80;
            box-shadow: 0 0 10px #1b6097;
            background-color: #1d2d46;
        }
    }
}</style>