<template>
  <div id="socialContact">
    <div class="socialContact-title">
      <img :src="logo" alt="">
      <div class="title-topic" v-text="'#'+rdsjTwitter.title+'#'"></div>&emsp;
      <div class="title-count">
        <img class="title-count-img" :src="hotImg" alt="">
        <span class="title-count-text" v-text="rdsjTwitter.score"></span>
        <img class="back" :src="back" @click="goBack" />
      </div>
    </div>
    <div class="socialContact-content">
      <div class="twitterInfo">
        <div class="twitterInfo-title">
          <span>相关新闻<span class="twitterInfo-title-count" v-text="twitterList.totals"></span>条</span>
        </div>
        <div class="twitterInfo-content">
          <div class="relationTwitter" v-for="(item,index) in twitterList.list" @click="showInfo(item)">
            <div class="relationTwitter-tag">
              <span v-for="(item1,index1) in item.tag" v-text="'#'+item1+'#   '"></span>
            </div>
            <div class="relationTwitter-tweets_content " v-html="item.tweets_content"></div>
            <!-- <div class="relationTwitter-content">
              如今谁也没有想到，美国骚乱止不住，全美一再批判种族主义！集体声讨至今不见啥效果，一直到现在人们还可以看到一些明显有种族主义色彩的事情，例如：黑人警察被白人枪杀事件从没有中止过，有一个统计说，在20天时间内，死到执法部门枪口下的受害者中有一半以上是黑人或少数族裔。不管相关案件中白人警察是否真的合理，也依然都反映出很大的问题。
              　　如果真的纠结起来的话，种族主义早已深入美国传统，按美国评论员的说法：针对黑人和其他少数族裔的种族主义暴力一直是美国的“组成部分”。这与美国历史有很大的关系，白人属于北美的外来民族，在北美生活历史只有几百年，但是在短时间内成了主体民族，他们都是欧洲殖民者的后代，从殖民北美地区的早期，对本土居民印第安人实施了种族灭绝式的政策，1890年的翁迪德尼大屠杀，有近300名印第安人丧生。这是有记录的最后一次征伐印第安人的大规模边疆战争。也就是，美国对印地安人的屠杀历史才结束130年。
              　　黑人源于非洲，他们随着白人到达了美洲，但是他们是作为奴隶出现，长期处于社会的最底层，几乎就没有人权可言。在早期他们只是白人的财产，在法律上都不受到保护的对象。美国结束奴隶制为南北战争的结果，距今还不到200年，但是对于黑人的歧视性政策，一直到二战也没有真正的改变，直到二战之后，随着黑人运动的兴起等，美国才开始着手解决种族主义问题，到今天也不过60年的样子。
              　　也不怪有人说，美国是在漫长的奴隶制历史和对土著人民的种族灭绝之后建立的，在长期的历史中，种族主义暴力一直合法的存在，在100多年前，针对于把黑人进行的种族骚乱，比如：美国塔尔萨种族骚乱，100年前的旧事了，没有任何白人因此受到处罪。
              　　可以说，黑人遭受集体创伤，难怪至今无法根治。在过去，对种族压迫都被认为是一件理所当然，想要去改变仅花几十年时间太少不够！</div> -->
            <div class="relationTwitter-bottom">
              <span class="relationTwitter-bottom-span">点赞数：<span v-text="item.atdcnt"
                  class="relationTwitter-bottom-content"></span></span>&emsp;&emsp;&emsp;
              <span class="relationTwitter-bottom-span">评论数：<span v-text="item.cmtcnt"
                  class="relationTwitter-bottom-content"></span></span>&emsp;&emsp;&emsp;
              <span class="relationTwitter-bottom-span">回复数：<span v-text="item.rpscnt "
                  class="relationTwitter-bottom-content"></span></span>&emsp;&emsp;&emsp;
              <span class="relationTwitter-bottom-span">发布时间：<span v-text="item.timestr"
                  class="relationTwitter-bottom-content"></span></span>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination-div">
        <el-pagination class="myPagination" background layout="prev, pager, next" :total="pagination.total"
          :current-page.sync="pagination.currentPage" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import logo from "../../assets/img/yqjc/05.png";
import hot from "../../assets/img/yqjc/59.png";
import { post } from "../../util/http_util";
import back from "../../assets/img/setting/back.png";
export default {
  name: "socialContact",
  data() {
    return {
      logo: logo,
      rdsjTwitter: {},
      twitterList: [],
      data: [],
      back: back,
      hotImg: hot,
      pagination: {
        currentPage: 1,
        total: 0,
      },
      condition: {
        stTime: null,
        edTime: null,
        siteName: null,
        author: null,
        title: null,
        txt: null,
        topic: null,
      },
    };
  },
  methods: {
    handleCurrentChange(pageNum) {
      this.queryDataList(pageNum);
      this.pagination.currentPage = pageNum;
    },
    showInfo(item) {
      let twitterInfo = JSON.parse(JSON.stringify(item));
      twitterInfo.txt = item.tweets_content;
      twitterInfo.pubdate = item.timestr;
      this.$router.push({ name: "Twitter详情" + this.$route.meta.type_name, params: twitterInfo });
    },
    queryDataList(pageNum) {
      post(
        "api/rest/fulltext/queryTwitter?pageNum=" + pageNum + "&pageSize=" + 10,
        this.condition
      )
        .then((res) => {
          this.twitterList = res;
        })
        .catch((err) => {
          this.$message.warning(err.message); 
        });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  activated() {
    if (this.$route.params.title != undefined) {
      this.rdsjTwitter = this.$route.params;
      this.condition.topic = this.$route.params.title;
      this.queryDataList(1);
    }
  },
};
</script>
<style lang="scss">
#socialContact {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  .socialContact-title {
    width: 100%;
    height: 50px;
    padding-left: 100px;
    display: -webkit-box;
    box-sizing: border-box;
    .title-topic {
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      font-weight: 600;
      color: #5dd7fc;
    }
    .title-count {
      height: 20px;
      margin-top: 20px;
      font-size: 15px;
      .title-count-img {
        width: 20px;
        height: 20px;
        vertical-align: bottom;
      }
      .title-count-text {
        color: crimson;
      }
      .back {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 11%;
        right: 80px;
        cursor: pointer;
      }
    }
  }
  .socialContact-content {
    width: 100%;
    height: calc(100% - 50px);
    padding: 10px;
    box-sizing: border-box;
    .twitterInfo {
      width: 100%;
      height: calc(100% - 50px);
      .twitterInfo-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        box-sizing: border-box;
        background: #263b5d;
        .twitterInfo-title-count {
          color: #5dd7fc;
        }
      }
      .twitterInfo-content {
        width: 100%;
        height: calc(100% - 40px);
        overflow-y: auto;
        .relationTwitter {
          border-bottom: 1px solid #156677;
          .relationTwitter-tag {
            color: #5dd7fc;
            margin-top: 10px;
            margin-bottom: 10px;
            font-weight: 600;
          }
          .relationTwitter-content {
            margin-bottom: 10px;
            cursor: pointer;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .relationTwitter-bottom {
            margin-bottom: 5px;
            .relationTwitter-bottom-span {
              font-size: 14px;
            }
          }
        }
      }
    }
    .pagination-div {
      width: 100%;
      height: 50px;
      .el-pagination {
        margin-top: 9px;
        text-align: right;
      }
      .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>