<template>
    <div id="external_info">
        <div class="left-part">
            <img class="back" :src="back" @click="goBack" />
            <div class="left-part-top">
                <div class="left-part-top-left">
                    <div class="left-part-top-left-title">
                        <img :src="img1" alt="" />&emsp;
                    </div>
                    <div class="left-part-top-left-info">
                        <span v-text="data_info[0].time"></span>&emsp;&emsp;&emsp;
                        <span v-text="data_info[0].name"></span>&emsp;&emsp;&emsp;
                        <span>
                            <i class="el-icon-location-information"></i><span v-text="data_info[0].address"></span>
                        </span>
                    </div>
                    <div class="left-part-top-left-from">[{{ data_info[0].from=='0'?'转发':data_info[0].from=='1'?'原创':'未知' }}]</div>
                    <div class="left-part-top-left-content" v-if="txt_falg" v-text="data_info[0].content"></div>
                    <div class="left-part-top-left-content" v-else="!txt_falg" v-text="data_info[0].txt_zh"></div>
                </div>
            </div>
            <div class="left-part-center">
                <div class="left-part-top-left-link">
                    <span><i class="el-icon-share"></i><span v-text="data_info[0].repeat"></span></span>&emsp;
                    <span><i class="el-icon-star-on"></i><span v-text="data_info[0].feeling"></span></span>&emsp;
                    <span repeat feeling comment><i class="el-icon-chat-dot-square"></i><span v-text="data_info[0].comment"></span></span>&emsp;
                </div>
                <div class="left-part-center-left" v-infinite-scroll="load">
                    <li v-for="(item, index) in message">
                        <img class="figure" v-show="item.img!=''&&item.img!=undefined" :src="item.img" alt="" />
                        <i class="el-icon-s-custom figure" v-show="item.img==''||item.img==undefined"></i>
                        <div class="pub-div">
                            <!-- <span v-text="item.fullname" style="color: #396bca;font-weight: 700;"></span><br /> -->
                            <span v-text="item.tweets_content" :title="item.tweets_content" class='pl-centent'></span>
                            <span>
                                <i class="el-icon-star-on"></i>
                                <span v-text="item.atdcnt"></span>
                            </span>
                            <span>
                                <i class="el-icon-chat-dot-square"></i>
                                <span v-text="item.cmtcnt"></span>
                            </span>&emsp;&emsp;
                            <span v-text="item.timestr" style="color: rgb(150, 150, 150);"></span>
                        </div>
                    </li>
                    <div v-show="message.length==0" style="color: rgb(195, 197, 202);font-size: 14px;text-align: center;position: relative;width: 100%;height: 100%;">
                        <span style="position: absolute;top: calc(50% - 10px);">暂无数据</span>
                    </div>
                </div>
                <div class="left-part-bottom">
                    <div class="left-part-bottom-tool">
                        <span @click="txt_falg=!txt_falg"><i class="el-icon-s-order"></i><span>{{txt_falg?'译文':'原文'}}</span></span>&emsp;
                        <a id="copy_src" :data-clipboard-text="data_info[0].tweets_url"><i class="el-icon-connection"></i><span>
                                    原文链接</span></a>&emsp;
                        <a id="copy_text" :data-clipboard-text="data_info[0].content"><i class="el-icon-document-copy"></i><span> 复制</span></a>&emsp;
                    </div>
                </div>
            </div>
        </div>
        <div class="right-part">
            <img class="figure" :src="imgHead" alt="" :onerror="errimg"/>
            <table>
                <tr>
                    <td>发文数</td>
                    <td>关注数</td>
                    <td>粉丝数</td>
                </tr>
                <tr>
                    <td class="num">{{information_person.tweets==''||information_person.tweets==undefined?'':parseInt(information_person.tweets)>11000?(Math.round((parseInt(information_person.tweets)/10000)*1000)/1000+'').substring(0,(Math.round((parseInt(information_person.tweets)/10000)*1000)/1000+'').indexOf(".")+2)+'万':information_person.tweets}}</td>
                    <td>{{information_person.following==''||information_person.following==undefined?'':parseInt(information_person.following)>11000?(Math.round((parseInt(information_person.following)/10000)*1000)/1000+'').substring(0,(Math.round((parseInt(information_person.following)/10000)*1000)/1000+'').indexOf(".")+2)+'万':information_person.following}}</td>
                    <td>{{information_person.followers==''||information_person.followers==undefined?'':parseInt(information_person.followers)>11000?(Math.round((parseInt(information_person.followers)/10000)*1000)/1000+'').substring(0,(Math.round((parseInt(information_person.followers)/10000)*1000)/1000+'').indexOf(".")+2)+'万':information_person.followers}}</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>收藏数</td>
                    <td>瞬间</td>
                </tr>
                <tr>
                    <td>{{information_person.likes==''||information_person.likes==undefined?'':parseInt(information_person.likes)>11000?(Math.round((parseInt(information_person.likes)/10000)*1000)/1000+'').substring(0,(Math.round((parseInt(information_person.likes)/10000)*1000)/1000+'').indexOf(".")+2)+'万':information_person.likes}}</td>
                    <td>{{information_person.moments==''||information_person.moments==undefined?'':parseInt(information_person.moments)>11000?(Math.round((parseInt(information_person.moments)/10000)*1000)/1000+'').substring(0,(Math.round((parseInt(information_person.moments)/10000)*1000)/1000+'').indexOf(".")+2)+'万':information_person.moments}}</td>
                </tr>
            </table>
            <div class="introduction">
                <li class="figure-name" v-text="information_person.fullname==''||information_person.fullname==undefined?'暂无':information_person.fullname" :title="information_person.fullname==''||information_person.fullname==undefined?'暂无':information_person.fullname"></li>
                <li class="figure-school" v-text="information_person.position==''||information_person.position==undefined?'暂无':information_person.position"></li>
                <li>
                    <i class="el-icon-location-outline"></i>&emsp;<span v-text="information_person.timeZone==''||information_person.timeZone==undefined?'暂无':information_person.timeZone"></span>
                </li>
                <li>
                    <i class="el-icon-connection"></i>&emsp;<span v-text="information_person.userUrl==''||information_person.userUrl==undefined?'暂无':information_person.userUrl"></span>
                </li>
                <li>
                    <i class="el-icon-date"></i>&emsp;<span v-text="information_person.userAddr==''||information_person.userAddr==undefined?'暂无':information_person.userAddr"></span>
                </li>
            </div>
            <div class="fans">
                <div style="font-size: 18px;height: 34px;background-color: #f68e56;padding-left: 10px;width: calc(100% - 58px);margin-left: 24px;border-radius: 10px;">
                    <span>粉丝列表</span>
                </div>
                <div class="fans-list" v-infinite-scroll="gz_query">
                    <li v-for="(item, index) in fans">
                        <i class="el-icon-s-custom"></i>
                        <div :title="item">{{item}}</div>
                    </li>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
#external_info {
    width: 99%;
    height: 100%;
    margin: 0;
    padding: 20px;
    display: -webkit-box;
    box-sizing: border-box;
    .left-part {
        width: calc(80% - 10px);
        height: 97%;
        background: url(../../assets/img/yqjc/011.png) no-repeat;
        background-size: 100% 100%;
        .back {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 9%;
            right: 60px;
            cursor: pointer;
        }
        .left-part-top {
            width: 90%;
            height: calc(46% - 30px);
            margin-left: 5%;
            margin-top: 2%;
            // background-image: url(../../assets/img/yqjc/18.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: -webkit-box;
            .left-part-top-left,
            .left-part-top-right {
                width: 90%;
                height: 100%;
                padding: 20px;
                box-sizing: border-box;
                position: relative;
                .left-part-top-left-title,
                .left-part-top-right-title {
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    span {
                        font-size: 18px;
                        font-weight: bold;
                    }
                }
                .left-part-top-left-info,
                .left-part-top-right-info {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    font-weight: 700;
                    color: #767c86;
                    text-align: center;
                }
                .left-part-top-left-from,
                .left-part-top-right-from {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    padding-left: 40px;
                    box-sizing: border-box;
                }
                .left-part-top-left-content,
                .left-part-top-right-content {
                    width: 100%;
                    height: calc(100% - 180px);
                    margin-top: 10px;
                    padding-left: 40px;
                    line-height: 25px;
                    word-break: break-all;
                    box-sizing: border-box;
                    overflow-y: auto;
                }
                .left-part-top-right-link {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    text-align: left;
                    box-sizing: border-box;
                    padding-left: 70px;
                    position: absolute;
                    bottom: 30px;
                }
            }
            .left-part-top-right {
                margin-left: 10%;
            }
        }
        .left-part-center {
            width: 90%;
            height: calc(46% - 30px);
            margin-left: 5%;
            margin-top: 2%;
            // background-image: url(../../assets/img/yqjc/19.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .left-part-top-left-link {
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: right;
                box-sizing: border-box;
                padding-right: 20px;
                background-color: #e7e7e712;
                border-bottom: 2px solid #1d2d46;
            }
            .left-part-center-left {
                width: 100%;
                height: calc(100% - 20px);
                color: #cccccc;
                background-color: #e7e7e712;
                overflow-y: auto;
                overflow-x: hidden;
                border-bottom: 2px solid #1d2d46;
                li {
                    border: 1px solid #2a96b7;
                    display: -webkit-box;
                    padding: 7px;
                    margin: 10px;
                    .figure {
                        width: 40px;
                        height: 40px;
                        margin-top: 10px;
                        margin-left: 15px;
                        margin-right: 15px;
                        font-size: 40px;
                        color: #757575;
                    }
                    .pub-div {
                        width: calc(100% - 82px);
                    }
                    .pl-centent {
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        color: white;
                    }
                }
            }
            // .left-part-center-right {
            //   width: 49%;
            //   height: 100%;
            //   margin-left: 2%;
            //   color: black;
            //   background-color: white;
            //   overflow-y: auto;
            //   overflow-x: hidden;
            //   border-radius: 7px;
            //   li {
            //     width: 100%;
            //     border: 1px solid #ddd;
            //     display: -webkit-box;
            //     padding: 7px;
            //     .figure {
            //       width: 40px;
            //       height: 40px;
            //       margin-top: 10px;
            //       margin-left: 15px;
            //       margin-right: 15px;
            //       font-size: 40px;
            //       color: #757575;
            //     }
            //     .pub-div {
            //       width: calc(100% - 82px);
            //     }
            //     .pl-centent {
            //       text-overflow: ellipsis;
            //       display: -webkit-box;
            //       -webkit-box-orient: vertical;
            //       -webkit-line-clamp: 2;
            //       overflow: hidden;
            //     }
            //   }
            // }
        }
        .left-part-bottom {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #e7e7e712;
            .left-part-bottom-feeling {
                width: 80px;
                height: 100%;
                float: left;
                margin-left: calc(50% - 40px);
                i {
                    color: #08dae0;
                }
            }
            .left-part-bottom-tool {
                width: 300px;
                height: 100%;
                float: right;
                span {
                    cursor: pointer;
                    i {
                        color: #08dae0;
                    }
                }
            }
        }
    }
    .right-part {
        width: 20%;
        height: 97%;
        margin-left: 10px;
        text-align: center;
        background: url(../../assets/img/yqjc/012.png) no-repeat;
        background-size: 100% 100%;
        background-color: #e7e7e712;
        .figure {
            width: 60%;
            height: 20%;
            margin-top: 20px;
        }
        table {
            width: 80%;
            height: 60px;
            margin-top: 10px;
            margin-left: 10%;
            color: white;
            text-align: center;
            .num {
                color: #05dbcc;
            }
        }
        table tr:nth-child(odd) {
            font-size: 14px;
        }
        table tr:nth-child(even) {
            font-size: 18px;
        }
        .introduction {
            width: 90%;
            height: 250px;
            margin-left: 5%;
            padding-top: 45px;
            padding-left: 10px;
            box-sizing: border-box;
            li {
                width: calc(100% - 20px);
                height: 18%;
                line-height: 34px;
                text-align: left;
                float: left;
                list-style: none;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                i {
                    color: #9a9595;
                }
            }
            .figure-name {
                font-size: 18px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                height: 34px;
                background-color: #f68e56;
                color: #000;
                padding-left: 10px;
                border-radius: 10px;
            }
            .figure-school {
                margin-bottom: 15px;
            }
        }
        .fans {
            width: 100%;
            height: calc(80% - 410px);
            span {
                float: left;
                font-size: 18;
                line-height: 34px;
                color: black;
            }
            img {
                width: 100%;
                margin-top: 5px;
            }
            .fans-list {
                width: 100%;
                height: calc(100% - 55px);
                overflow-y: auto;
                li {
                    width: 80%;
                    height: 40px;
                    line-height: 40px;
                    margin-top: 5px;
                    margin-left: 10%;
                    list-style: none;
                    background-image: url(../../assets/img/yqjc/22.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    i {
                        float: left;
                        font-size: 15px;
                        margin-left: 10px;
                        margin-top: 13px;
                        color: #40bdff;
                    }
                    div {
                        font-size: 12px;
                        margin-left: 30px;
                        margin-right: 15px;
                        word-break: break-all;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
                }
            }
        }
    }
}
</style>

<script>
import { startLoading, endLoading, post, get } from "../../util/http_util";
import img1 from "../../assets/img/yqjc/05.png";
import img2 from "../../assets/img/dfzy/zwtp.png";
import img3 from "../../assets/img/yqjc/23.png";
import back from "../../assets/img/setting/back.png";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import Clipboard from "clipboard";

export default {
    name: "external-info",
    data() {
        return {
            errimg: "this.src='" + jh_bg + "'",
            img1: img1,
            imgHead: img2,
            img3: img3,
            txt_falg: false,
            data_info: [
                {
                    name: "",
                    address: "",
                    from: "",
                    content: "",
                    repeat: "",
                    feeling: "",
                    comment: "",
                }
            ],
            message: [],
            message1: [],
            fans: [],
            pageNum: 1,
            pageSize: 10,
            pageNum_gz: 1,
            pageSize_gz: 10,
            back: back,
            information_person: {
                tweets: "",
                following: "",
                followers: "",
                likes: "",
                moments: "",
                fullname: "",
                position: "",
                timeZone: "",
                userUrl: "",
                userAddr: "",
            },
            pageNum_load:0,
        };
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        load() {
            if(this.pageNum_load != this.pageNum)
            if(this.$route.params.tweets_url)
            get(
                "api/rest/elastic/queryTwitterComments"+
                "?tweets_url="+
                this.$route.params.tweets_url+
                // "https://twitter.com/AP/status/1644325423927418880" +
                "&pageNum=" +
                this.pageNum +
                "&pageSize=" +
                this.pageSize
            )
                .then((arr) => {
                    this.pageNum_load = this.pageNum;
                    if(arr.list.length>0){
                        this.message = this.message.concat(arr.list);
                        this.pageNum++;
                    }
                })
                .catch((err) => {this.$message.warning(err.message); });
        },
        blogger(id) {
            this.information_person = {
                tweets: "",
                following: "",
                followers: "",
                likes: "",
                moments: "",
                fullname: "",
                position: "",
                timeZone: "",
                userUrl: "",
                userAddr: "",
            };
            if(id)
            post("api/rest/3z/resource/queryTwitterUser", { bloggerId: id })
                .then((arr) => {
                    if (arr.length > 0) {
                        this.imgHead = img2;
                        this.information_person = arr[0];
                        if (arr[0].excelHeadPic != '') {
                            this.imgHead = 'data:image/png;base64,' + arr[0].excelHeadPic;
                        } else {
                            this.imgHead = img2;
                        }
                    }
                })
                .catch((err) => { this.$message.warning(err.message); });
        },
        gz_query(id) {
            //todo
            if(id)
            get("api/rest/3z/resource/queryTwitterFans/" + id + "?pageNum=" + this.pageNum_gz + "&pageSize=" + this.pageSize_gz).then((arr) => {
                if (arr.length > 0) {
                    arr.forEach(item => {
                        this.fans.push(item.fullname);
                    });
                    this.pageNum_gz++;
                }
            })
                .catch((err) => {
                    this.$message.warning(err.message);
                })
        },
    },
    activated() {
        this.data_info = [];
        this.message = [];
        // this.message1 = [];
        this.pageNum = 1;
        this.pageNum_gz = 1;
        this.fans = [];
        this.imgHead = img2;
        let arr = {
            time: this.$route.params.pubdate, //发布时间
            name: this.$route.params.site_name, //发布人
            address: "暂无", //地址
            from: this.$route.params.isori, //是否是原创
            content: this.$route.params.txt, //内容
            repeat: this.$route.params.rpscnt, //转发
            feeling: this.$route.params.atdcnt, //点赞
            comment: this.$route.params.cmtcnt, //评论
            tweets_url: this.$route.params.tweets_url, // 
            txt_zh: this.$route.params.txt_zh, // 
        };
        this.data_info = [arr];
        this.load();
        this.blogger(this.$route.params.blogger_id);
        this.gz_query(this.$route.params.blogger_id);

        
        
    },
    mounted(){
        let clipboard_src = new Clipboard(document.getElementById("copy_src"));
        clipboard_src.on('success', (e) => {
           this.$message.success("复制成功");
           e.clearSelection();
        });
        clipboard_src.on('error', (e) => {
            this.$message.success("复制成功");
        });

        
        let clipboard_text = new Clipboard(document.getElementById("copy_text"));
        clipboard_text.on('success',  (e)=> {
            this.$message.success("复制成功");
            e.clearSelection();
        });
        clipboard_text.on('error',  (e)=>{
           this.$message.success("复制成功");
        });
    }
};
</script>