<template>
    <div id="tsbj">
        <el-tabs type="border-card">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-reading"></i> 关注重点</span>
                <div class="search">
                    <div class="button-add" @click="addAttention">新增</div>
                </div>
                <div class="resultList">
                    <el-table :data="attentionList" tooltip-effect="dark" style="width: 100%;" height="calc(100% - 60px)">
                        <el-table-column label="是否显示" align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.visualizing" active-text="显示" inactive-text="隐藏"
                                    @change="editAttentionStatue(scope.row)">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="content" label="内容" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="createTime" label="新增时间" align="center"></el-table-column>
                        <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>
                        <el-table-column label="操作" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="success"
                                    @click.native.stop="editAttention(scope.row, scope.$index)">编辑</el-button>
                                <el-button size="mini" type="danger"
                                    @click.native.stop="deleteAttention(scope.row)">删除</el-button>
                            </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>
            </el-tab-pane>
        </el-tabs>
        <!-- 新增、编辑弹框 -->
        <el-dialog title="新增关注" :visible.sync="dialogVisible" width="25%" :before-close="handleClose" center>
            <!-- 新增关注 -->
            <el-form ref="form" label-width="120px" v-if="flag == 1">
                <el-form-item label="是否显示">
                    <el-radio v-model="newAttention.visualizing" :label="false">隐藏</el-radio>
                    <el-radio v-model="newAttention.visualizing" :label="true">显示</el-radio>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="newAttention.content"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="defineAddAttention">确 定</el-button>
                </el-form-item>
            </el-form>
            <!-- 编辑关注 -->
            <el-form ref="form" label-width="120px" v-if="flag == 2">
                <el-form-item label="是否显示">
                    <el-radio v-model="selectAttention.visualizing" :label="true">显示</el-radio>
                    <el-radio v-model="selectAttention.visualizing" :label="false">隐藏</el-radio>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="selectAttention.content"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="defineEditAttention">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { delete_util, get, post } from '../../util/http_util'
import { queryAttention, updateAttention, removeAttention, addAttention } from '../../api/sjgl/tsbj';
export default {
    data() {
        return {
            flag: 1,
            total: 0,
            currentPage: 1,
            everySize: 10,
            attentionList: [],
            dialogVisible: false,
            newAttention: {
                visualizing: true,
                content: ''
            },
            selectAttention: {
            }
        }
    },
    methods: {
        //查询数据
        queryAttention() {
            queryAttention(this.currentPage, this.everySize).then(res => {
                this.attentionList = res.list;
                this.total = res.totals;
            }).catch(err => {
                this.$message.warning(err.message);
            })
        },
        //改变每页展示条数
        handleSizeChange(val) {
            this.everySize = val;
            this.currentPage = 1;
            this.search();
        },
        //查询每页数据
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum;
            this.queryAttention();
        },
        //编辑数据
        editAttention(item, index) {
            this.dialogVisible = true;
            this.flag = 2;
            this.selectAttention = JSON.parse(JSON.stringify(item));
        },
        //确定编辑数据
        defineEditAttention() {
            if (this.selectAttention.content) {
                updateAttention(this.selectAttention).then(res => {
                    if (res == 1) {
                        this.$message.success('状态编辑成功！');
                        this.dialogVisible = false;
                        this.queryAttention();
                    } else {
                        this.$message.error('状态编辑失败！');
                    }
                })
                    .catch((err) => {
                        this.$message.warning(err.message);
                    })
            } else {
                this.$message.warning('内容不能为空！');
            }
        },
        //删除数据
        deleteAttention(item) {
            this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeAttention(item.id).then(res => {
                    if (res == 1) {
                        this.$message.success('删除成功！');
                        this.queryAttention();
                    } else {
                        this.$message.error('删除失败！');
                    }
                })
                    .catch((err) => {
                        this.$message.warning(err.message);
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //关闭弹框
        handleClose(done) {
            done();
        },
        //新增弹框事件
        addAttention() {
            this.dialogVisible = true;
            this.flag = 1;
            this.newAttention.visualizing = true;
            this.newAttention.content = '';
        },
        //确定新增关注
        defineAddAttention() {
            if (this.newAttention.content) {
                addAttention(this.newAttention).then(res => {
                    if (res == 1) {
                        this.$message.success('新增成功！');
                        this.dialogVisible = false;
                        this.queryAttention();
                    }
                }).catch(err => {
                    this.$message.warning(err.message);
                })
            } else {
                this.$message.warning('内容不能为空！');
            }
        },
        //编辑关注状态
        editAttentionStatue(item) {
            this.$confirm('此操作将更改显示状态, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                updateAttention({ visualizing: item.visualizing, id: item.id }).then(res => {
                    if (res == 1) {
                        this.$message.success('状态编辑成功！');
                        this.queryAttention();
                    } else {
                        this.$message.error('状态编辑失败！');
                        this.queryAttention();
                    }
                })
                    .catch((err) => {
                        this.$message.warning(err.message);
                    })
            }).catch(() => {
                this.queryAttention();
                this.$message({
                    type: 'info',
                    message: '已取消编辑状态'
                });
            });
        }
    },
    activated() {
        this.queryAttention();
    }
}
</script>

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

    .el-tabs--border-card {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border: 2px solid #125473;
        border-radius: 5px;
        box-sizing: border-box;
        background: #ffffff00;

        .el-tabs__header {
            background-color: unset;
            border-bottom: 2px solid #125473;

            .el-tabs__item {
                color: #dedede;
            }

            .el-tabs__item.is-active {
                color: #ffe000;
                background-color: #116791;
                border-right-color: #116791;
                border-left-color: #116791;
            }

            .el-tabs__item:not(.is-disabled):hover {
                color: #ffe000;
            }
        }

        .el-tabs__content {
            height: calc(100% - 42px);
        }
    }

    .search {
        width: 100%;
        height: 50px;
        text-align: right;

        .button-add {
            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%;
        }
    }

    .resultList {
        width: 100%;
        height: calc(100% - 50px);

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

        .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;
            // margin-left: calc(50% - 632px);

            .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;
            }
        }
    }

    //弹框
    .el-dialog {
        color: white;
        background: #1d2d46 !important;

        .el-dialog__header {
            .el-dialog__title {
                color: white;
            }
        }

        .el-dialog__body {
            .el-form {
                .el-form-item {
                    .el-form-item__label {
                        color: white;
                    }

                    .el-form-item__content {
                        color: white;

                        .el-radio {
                            color: white;
                        }
                    }
                }
            }

            .el-input__inner {
                color: white !important;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }

            .el-icon-document {
                height: auto;
            }
        }
    }
}
</style>