<template>
  <div class="wrapper">
    <div>
      <van-tabs v-model:active="active" title-active-color="#2f85da" title-inactive-color="#333333">
        <van-tab title="监控">
          <ul class="active-box">
            <li class="">
              <div class="active-item-title">
                <div class="active-item-title-h2">
                  <div class="title-vertical-line"></div>
                  <div>监控报告</div>
                </div>
                <!--                <div class="active-item-title-time">{{ monitorItem.time }}</div>-->
              </div>
              <div class="jiankong-item-content">
                <div class="jiankong-item-content-text-box">
                  <div class="jiankong-item-content-text-h2">经营动态</div>
                  <div class="jiankong-item-content-text-h2">{{ activeMonitor.totalOperateCount }}</div>
                </div>
                <div class="jiankong-item-content-line"></div>
                <div class="jiankong-item-content-text-box">
                  <div class="jiankong-item-content-text-h2">风险信息</div>
                  <div class="jiankong-item-content-text-h2 color-db2c2c">{{ activeMonitor.totalRiskCount }}</div>
                </div>
                <div class="jiankong-item-content-line"></div>
                <div class="jiankong-item-content-text-box">
                  <div class="jiankong-item-content-text-h2">工商变更</div>
                  <div class="jiankong-item-content-text-h2 color-ee8c15">{{ activeMonitor.totalChangeCount }}</div>
                </div>
                <div class="jiankong-item-content-line"></div>
                <div class="jiankong-item-content-text-box">
                  <div class="jiankong-item-content-text-h2">舆情声誉</div>
                  <div class="jiankong-item-content-text-h2">{{ activeMonitor.totalNewsCount }}</div>
                </div>
              </div>
              <div @click="goUrlToMonitor(gongsiItem.companyId)" class="jiankong-ribao-gongsi"
                v-for="(gongsiItem, gongsiIndex) in activeMonitor.attentionCompanyInfoVoList" :key="gongsiIndex">
                <div v-if="gongsiItem.colorNum == 1" class="company-item-left" style="background-color: #2372eb">
                  <img name="wap-home" src="../../../../images/part_one/icon_company.png" alt="">
                </div>
                <div v-if="gongsiItem.colorNum == 2" class="company-item-left" style="background-color: #ee8c15">
                  <img name="wap-home" src="../../../../images/part_one/icon_company.png" alt="">
                </div>
                <div v-if="gongsiItem.colorNum == 3" class="company-item-left" style="background-color: #11c95f">
                  <img name="wap-home" src="../../../../images/part_one/icon_company.png" alt="">
                </div>
                <div v-if="gongsiItem.colorNum == 4" class="company-item-left" style="background-color: #e21183">
                  <img name="wap-home" src="../../../../images/part_one/icon_company.png" alt="">
                </div>
                <div v-if="gongsiItem.colorNum == 5" class="company-item-left" style="background-color: #fde809">
                  <img name="wap-home" src="../../../../images/part_one/icon_company.png" alt="">
                </div>
                <div v-if="gongsiItem.colorNum == 6" class="company-item-left" style="background-color: #17b9d7">
                  <img name="wap-home" src="../../../../images/part_one/icon_company.png" alt="">
                </div>
                <div v-if="gongsiItem.colorNum == 7" class="company-item-left" style="background-color: #db2c2c">
                  <img name="wap-home" src="../../../../images/part_one/icon_company.png" alt="">
                </div>
                <div v-if="gongsiItem.colorNum == 8" class="company-item-left" style="background-color: #9232db">
                  <img name="wap-home" src="../../../../images/part_one/icon_company.png" alt="">
                </div>
                <div class="jiankong-item-content-text-h2">
                 
                <div class="company-item-right-title mb-10" v-html="gongsiItem.companyName"></div>
            
                </div>
              </div>
            </li>
          </ul>
        </van-tab>
        <van-tab title="动态">
          <ul class="active-box">
            <li @click="goUrl(newItem.id)" class="active-item" v-for=" (newItem, newIndex) in activeNews "
                :key="newItem.time">
              <div class="search-result-title" v-html="newItem.title"></div>
              <div>
                <van-tag color="#e8f1fd" text-color="#2372eb" type="primary">{{ newItem.companyName }}</van-tag>
              </div>
              <div class="search-result-time">
                <div>{{ newItem.source }}</div>
                <div>{{ newItem.publishTime }}</div>
              </div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, Tag, Icon } from 'vant';
import { getQueryNewsinfo, getQueryAttentionInfoList } from "@/service/api/home";
//button组件
export default {
  name: "YourLike",
  components: {
    VanIcon: Icon,
    VanTab: Tab,
    VanTabs: Tabs,
    VanTag: Tag,
  },
  props: {

  },
  data() {
    return {
      active: '0',
      activeNews: [],
      activeMonitor: {}
    }

  },


  mounted() {
    this.getQueryNewsinfoData();
    this.getQueryAttentionInfoList();
  },

  methods: {
    // 获取动态数据
    async getQueryNewsinfoData() {
      let params = {
        "keyword": this.searchValue,// 搜索关键词
        "pageNum": 1,
        "pageSize": 10,
      }
      let result = await getQueryNewsinfo(params);
      this.activeNews = result.records;
    },


    // 获取监控数据
    async getQueryAttentionInfoList() {
      let params = {
        // "userId": localStorage.getItem('userId'),// 搜索关键词
      }
      let result = await getQueryAttentionInfoList(params);
      if (result !== null) {
        this.activeMonitor = result;
      }
    },

    // 去公告详情页
    goUrl(id) {
      sessionStorage.setItem('getDetailsId', id);
      this.$router.push('/dashboard/home/searchPublicSentiment/result/details');
    },

    // 去监控列表页
    goUrlToMonitor(id) {
      sessionStorage.setItem('isFromHome', 'isYes');
      // sessionStorage.setItem('tabBarActiveIndex', '1');
      sessionStorage.setItem('monitorId', id);
      this.$router.push({path: '/MonitorStation'})
      // this.$router.push('category');
    },





  }



}
</script>

<style scoped>
.wrapper {
  background: #ffffff;
}

.van-tab {
  font-size: 1rem !important;
}

.van-tabs /deep/ .van-tabs__line {
  background: #2f85da;
}

.van-tabs /deep/ .van-tab {
  font-size: 1rem;
}

.active-box {
  margin-top: 16px;
  padding: 0 1rem 1rem;
}

.active-item {
  margin-bottom: 20px;
  border-bottom: solid 1px #d9d9d9 !important;
  padding-bottom: 16px !important;
}

.active-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.active-item-title-h2 {
  color: #333333;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  justify-self: start;
  align-items: center;
}

.title-vertical-line {
  margin-top: 2px;
  width: 4px;
  height: 1rem;
  background: #2f85da;
  margin-right: 6px;
}

.active-item-title-time {
  color: #999999;
}

.active-item-content {
  font-size: 0.8rem;
  margin-bottom: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

.van-tag {
  font-size: 14px !important;
  padding: 4px 6px !important;
}

.jiankong-item-content {
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f2f2f2;
  padding: 10px;
  margin-bottom: 10px;
}

.jiankong-item-content-text-box {
  text-align: center;
}

.jiankong-item-content-text-box div:nth-of-type(1) {
  margin-bottom: 6px;
}

.jiankong-item-content-text-h2 {
  font-size: 0.8rem;
}

.jiankong-item-content-line {
  width: 2px;
  height: 2rem;
  background: #d9d9d9;
  margin: 0 6px;
}

.color-db2c2c {
  color: #db2c2c;
}

.color-ee8c15 {
  color: #ee8c15;
}

.gongsi-logo {
  color: #2f85da;
  margin-right: 6px;
}

.search-result-title {
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 10px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-time {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #666666;
}

.jiankong-ribao-gongsi {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 10px;
}

.company-item-left {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  margin-right: 6px;
}

.company-item-left img {
  width: 12px;
  height: 13px;
}

.van-tabs--line /deep/ .van-tabs__wrap{
  height: 38px;
}

.van-tabs /deep/ .van-tab{
  font-size: 14px !important;
}
</style>
