<template>
    <div id="bookMark1">
        <div class="left-bookMark1">
            <div class="title">文件夹</div>
            <ul>
                <li v-for="(item, index) in collectionFolder" @click="queryCollectionFolderNews(item.id, index)"
                    :style="{ 'color': (index == selectIndex) ? '#0dada7' : '', 'font-weight': (index == selectIndex) ? '900' : '' }">
                    <span class="el-icon-folder-opened"></span>&emsp;{{ item.name }}
                </li>
            </ul>
        </div>
        <div class="right-bookMark1">
            <ul>
                <li v-for="(item, index) in collectionFolderNews">
                    <div @click="showNews(item)">
                        <span style="color:#ff4949;font-size: 15px;font-weight: 900;"
                            v-show="item.description == '' || item.description == null">全文：</span>
                        <span
                            v-text="item.description == '' || item.description == null ? '' + item.title : item.description"
                            style="font-size: 14px;"></span>

                    </div>
                    <div>
                        <span>收藏时间：</span>
                        <span v-text="item.createTime"></span>
                        <el-button class="removeButton" type="danger" icon="el-icon-delete" circle size="mini"
                            @click="removeCollection(item)"></el-button>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 新闻详情展示 -->
        <el-dialog :title="newInfo.title" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" center
            v-if="newInfo">
            <span>
                <div>发布时间：<span v-text="newInfo.pubdate"></span></div>
                <div>
                    <el-tag type="danger" effect="dark" v-text="newInfo.is_original ? '原创' : '转发'"></el-tag>
                    <el-tag type="primary" effect="dark" v-text="newInfo.country"
                        v-show="newInfo.country != '' && newInfo.country != null"></el-tag>
                    <el-tag type="success" effect="dark" v-text="newInfo.site_name"></el-tag>
                </div>
                <div id="txt" v-html="newInfo.txt"></div>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<style lang="scss">
#bookMark1 {
    width: 100%;
    height: 100%;
    padding: 1% 3% 3% 2%;
    color: white;
    box-sizing: border-box;

    .left-bookMark1 {
        width: 260px;
        height: 100%;
        float: left;
        padding: 20px;
        box-sizing: border-box;
        background-image: url(../../assets/img/bookMark/03.png);
        background-size: 100% 100%;

        .title {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-image: url(../../assets/img/bookMark/04.png);
            background-size: 100% 100%;
            color: #ff9900;
        }

        ul {
            width: 100%;
            height: calc(100% - 40px);
            margin: 0;
            margin-top: 10px;
            padding: 0;
            list-style: none;
            overflow-y: auto;

            &::-webkit-scrollbar {
                display: none;
            }

            li {
                width: 100%;
                height: 30px;
                margin-top: 5px;
                line-height: 30px;
                padding-left: 20px;
                cursor: pointer;
                box-sizing: border-box;
                background-image: url(../../assets/img/bookMark/08.png);
                background-size: 100% 100%;
                color: #797979;

                &:hover {
                    cursor: pointer;
                    font-weight: bold;
                    color: #0dada7;
                }
            }
        }
    }

    .right-bookMark1 {
        width: calc(100% - 280px);
        height: 100%;
        float: left;
        margin-left: 10px;
        padding: 5px;
        box-sizing: border-box;
        background-image: url(../../assets/img/bookMark/05.png);
        background-size: 100% 100%;

        ul {
            width: 100%;
            height: 98%;
            margin: 0;
            padding: 10px 20px;
            box-sizing: border-box;
            list-style: none;
            overflow-y: auto;

            &::-webkit-scrollbar {
                display: none;
            }

            li {
                padding: 20px;
                box-sizing: border-box;
                background-image: url(../../assets/img/bookMark/06.png);
                background-size: 100% 100%;
                cursor: pointer;

                div {
                    &:first-child {
                        color: #ffffff;
                    }

                    &:nth-child(2) {
                        font-size: 13px;
                        color: #ffffff;
                        margin-top: 10px;
                        text-align: right;
                    }

                    .removeButton {
                        margin-left: 20px;
                    }
                }
            }
        }
    }

    //弹框
    .el-dialog {
        .el-dialog__body {
            span {
                div {
                    &:first-child {
                        text-align: center;
                        color: #b3b3b3;
                    }

                    &:nth-child(3) {
                        color: white;
                        margin-top: 10px;
                        font-size: 13px;
                        text-indent: 2em;
                    }
                }
            }
        }

        .el-tag {
            height: 20px;
            padding: 0px 8px;
            line-height: 19px;
        }
    }
}
</style>

<script>
import { endLoading, get, startLoading, delete_util } from '../../util/http_util'
import { queryCollection, queryOneNews, queryLiterature, removeCollection } from '../../api/bookMark';
import { queryCollectionFolder } from '../../api/xxxl/llxx';
export default {
    name: 'bookMark1',
    data() {
        return {
            collectionFolder: [],
            collectionFolderNews: [],
            selectIndex: -1,
            newInfo: {},
            dialogVisible: false,
            selectItem: {}
        }
    },
    inject: ['reload'],
    methods: {
        queryCollectionFolderNews(id, index) {
            this.selectIndex = index;
            queryCollection(id).then(res => {
                this.collectionFolderNews = res;
            })
                .catch((err) => {
                    this.$message.warning(err.message);
                })
        },
        //展示收藏的新闻详情
        showNews(item) {
            this.selectItem = item;
            startLoading();
            queryOneNews(item.originId).then(res => {
                if (res != null) {
                    this.dialogVisible = true;
                    this.newInfo = res;
                    this.$nextTick(() => {
                        let keyword = this.selectItem.description.trim();
                        let htmlStr = document.getElementById('txt').innerText;
                        this.newInfo.txt = htmlStr.replace(keyword, "<span style='color:red'>" + keyword + "</span>");
                    });
                } else {
                    queryLiterature(item.originId).then(resLi => {
                        window.open('api/rest/document/viewLiterature/' + resLi.list[0].folder + '/' + resLi.list[0].name);
                    }).catch(err => {
                        this.$message.warning(err.message);
                    });
                }
                endLoading();
            })
                .catch((err) => {
                    endLoading();
                    this.$message.warning(err.message);
                })
        },
        handleClose(done) {
            done();
        },
        removeCollection(item) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeCollection(item.id).then(res => {
                    if (res == 1) {
                        this.$message.success("删除成功！");
                        this.reload();
                    }
                }).catch(err => {
                    this.$message.warning(err.message);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { username: "" };
            }
        }
    },
    activated() {
        queryCollectionFolder(this.userInfo.account).then(res => {
            this.collectionFolder = res;
            res[0].id && this.queryCollectionFolderNews(res[0].id, 0);
        })
            .catch((err) => {
                this.$message.warning(err.message);
            })
    }
}
</script>