<template>
    <div id="yjxx">
        <div class="search">
            <el-input v-model="content"></el-input>
            <div class="button-search" @click="search()">搜索</div>
            <div class="button-delete" v-if="multipleSelection.length > 0" @click="deleteYjxx()">删除</div>
            <div class="button-search" @click="read()">一键阅读</div>
        </div>
        <div class="table-div">
            <el-table :data="yjList" ref="multipleTable" @selection-change="handleSelectionChange" style="width: 100%;"
                height="calc(100% - 60px)">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="预警类型">
                    <template slot-scope="scope">
                        <el-tag
                            :style="{ backgroundColor: returnColor(scope.row.type.text), borderColor: returnColor(scope.row.type.text) }"
                            effect="dark">{{ scope.row.type.text }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="消息正文" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span style="color:red;">{{ scope.row.metadata }}</span>
                        <span @click="new_info(scope.row)"
                            :style="{ 'text-decoration': scope.row.remark != '' && scope.row.remark != null && scope.row.remark != undefined ? 'underline' : '', 'cursor': scope.row.remark != '' && scope.row.remark != null && scope.row.remark != undefined ? 'pointer' : '' }">{{
                                scope.row.text }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="fromUser" label="发送者">
                </el-table-column>
                <el-table-column prop="timestamp" label="时间">
                </el-table-column>
            </el-table>
            <div class="pagination-div">
                <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" :page-size="pagObj.everySize" :current-page="pagObj.currentPage"
                    :total="pagObj.total" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { queryNotification, removeNotification, readNotification } from '../../api/user';
export default {
    inject: ['reload'],
    data() {
        return {
            yjList: [],
            pagObj: {
                total: 0,
                everySize: 10,
                currentPage: 1
            },
            colorList: ['#409eff', '#F56C6C', '#67C23A', '#E6A23C', '#909399', '#303133'],
            content: null,
            multipleSelection: []
        }
    },
    methods: {
        new_info(item) {
            if (item.remark != '' && item.remark != null && item.remark != undefined && item.type.text == '新闻预警')
                this.$router.push({ name: "新闻详情" + this.$route.meta.type_name, params: { key: item.remark } });
        },
        search() {
            queryNotification(this.pagObj.currentPage, this.pagObj.everySize, this.userInfo.account, this.content).then(res => {
                this.yjList = res.list;
                this.pagObj.total = res.totals;
            }).catch(err => {
                this.$message.warning(err.message);
            });
        },
        handleSizeChange(size) {
            this.pagObj.everySize = size;
            this.reload();
        },
        handleCurrentChange(pageNum) {
            this.pagObj.currentPage = pageNum;
            this.reload();
        },
        handleSelectionChange(val) {
            this.multipleSelection = [];
            val.forEach(item => {
                this.multipleSelection.push(item.id);
            });
        },
        //返回颜色
        returnColor(val) {
            if (val == "新闻预警") {
                return this.colorList[0];
            } else if (val == "推特预警") {
                return this.colorList[1];
            } else if (val == "报告推送") {
                return this.colorList[2];
            } else {
                return this.colorList[3];
            }
        },
        deleteYjxx() {
            this.$confirm('此操作将永久删除消息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeNotification(this.multipleSelection, this.userInfo.account).then(res => {
                    if (this.multipleSelection.length == res) {
                        this.$message.success('删除成功！');
                        this.reload();
                    }
                }).catch(err => {
                    this.$message.warning(err.message);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        read() {
            readNotification(this.userInfo.account).then(res => {
                this.$store.commit("noteNum", 0);
                this.search();
            });
        }
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    activated() {
        this.search();
    }
}
</script>

<style lang="scss">
#yjxx {
    width: 99%;
    height: 98%;
    padding: 30px;
    box-sizing: border-box;
    overflow-y: auto;

    .search {
        width: 100%;
        height: 50px;

        // text-align: right;
        .el-input {
            width: 200px;
            float: left;
            margin-left: 15px;

            input {
                height: 30px;
                color: white;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }

            .el-input__icon {
                line-height: 30px;
            }
        }

        .button-search {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: left;
            margin-left: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .button-upload {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .button-delete {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: left;
            margin-left: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .button-transform {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: left;
            margin-left: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }

    .table-div {
            width: 100%;
            height: calc(100% - 70px);
            .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__total {
                color: white;
            }

            .el-pagination__jump {
                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>