<template>
  <div class="scientific_research_trends">
    <!--title-->
    <div class="headline">
      <div class="hr_div">
        <div class="hr_line_left">
        </div>
        <div class="hr_dot_left">
        </div>
      </div>
      <div class="title">
        {{ $t('message.research') }}
        <!--科学研究-->
      </div>
      <div class="hr_div">
        <div class="hr_line_right">
        </div>
        <div class="hr_dot_right">
        </div>
      </div>
    </div>



    <!--<el-row>-->
    <!--  <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">-->
    <!--    <div class="grid-content"></div>-->
    <!--  </el-col>-->
    <!--  <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">-->
    <!--    <div class="title">-->
    <!--      &lt;!&ndash;          {{ $t('message.news_center') }}&ndash;&gt;-->
    <!--      科学研究-->
    <!--    </div>-->
    <!--    <el-row>-->
    <!--      <el-col :span="8">-->
    <!--        <hr class="hr">-->
    <!--      </el-col>-->
    <!--      <el-col :span="8">-->
    <!--        <div class="divider_text">Scientific research trends</div>-->
    <!--      </el-col>-->
    <!--      <el-col :span="8">-->
    <!--        <hr class="hr">-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--  </el-col>-->
    <!--</el-row>-->
    <!--科学研究新闻内容-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col class="scientific_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
        <el-row>
          <el-col v-for="(item,index) in scientificData" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <div @click="getArticle(item)">
            <el-row class="scientific_context_text">
              <el-col :span="2" class="img">
                <img v-if="index == 0" src="@/assets/index/scientific_research_trends/sy_icon_bh1.png" alt="">
                <img v-if="index == 1" src="@/assets/index/scientific_research_trends/sy_icon_bh2.png" alt="">
                <img v-if="index == 2" src="@/assets/index/scientific_research_trends/sy_icon_bh3.png" alt="">
                <img v-if="index == 3" src="@/assets/index/scientific_research_trends/sy_icon_bh4.png" alt="">
                <img v-if="index == 4" src="@/assets/index/scientific_research_trends/sy_icon_bh5.png" alt="">
                <img v-if="index == 5" src="@/assets/index/scientific_research_trends/sy_icon_bh6.png" alt="">
                <img v-if="index == 6" src="@/assets/index/scientific_research_trends/sy_icon_bh7.png" alt="">
                <img v-if="index == 7" src="@/assets/index/scientific_research_trends/sy_icon_bh8.png" alt="">
                <img v-if="index == 8" src="@/assets/index/scientific_research_trends/sy_icon_bh9.png" alt="">
                <img v-if="index == 9" src="@/assets/index/scientific_research_trends/sy_icon_bh10.png" alt="">
              </el-col>
              <el-col :span="16" class="text">{{ item.title }}</el-col>
              <el-col :span="4">
                <div class="time">{{ parseTime(item.publishTime) }}</div>
                <!--                <div class="time">{{ item.publishTime }}</div>-->
              </el-col>
            </el-row>
            <div class="scientific_context_divider">
              <hr v-if="index < 8" style="border: 0.1rem solid #E6E6E6;">
              <hr v-if="!width && index == 8" style="border: 0.1rem solid #E6E6E6;">
            </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!--更多-->

    <div class="headline">
      <div style="background: #FFFFFF;color: #1956BC;" class="more" @click="lookMore('b4Lm82Ct_eaF2u5XDABv0TM')">
        {{ $t('message.more') }}
      </div>
      <div class="hr_div">
        <div class="hr_line_left">
        </div>
        <div class="hr_dot_left">
        </div>
      </div>
      <div class="hr_text" style="color:#E6E6E6;">
        {{ $t('message.academic') }}
        <!--学术交流-->
      </div>
      <div class="hr_div">
        <div class="hr_line_right">
        </div>
        <div class="hr_dot_right">
        </div>
      </div>
    </div>
    <!--学术交流-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col class="academia_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
        <el-row>
          <el-col v-for="(item,index) in academiaData" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <div @click="getArticle(item)">
            <el-row class="academia_context_text">
              <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_b1.png" alt="">
              </el-col>
              <el-col :span="16" class="text">{{item.title}}</el-col>
              <el-col :span="4">
                <div class="time">{{ parseTime(item.publishTime) }}</div>
              </el-col>
            </el-row>
            <div class="academia_context_divider">
              <hr v-if="index < 4" style="border: 0.1rem solid #E6E6E6;">
              <hr v-if="!width && index == 4" style="border: 0.1rem solid #E6E6E6;">
            </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!--更多-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
        <div class="grid-content"></div>
      </el-col>
      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
        <div style="background: #FFFFFF;color: #1956BC;" class="more" @click="lookMore('47sdOe8NQs0B4EHmM-wFWjQ')">
          {{ $t('message.more') }}
        </div>
<!--        <div class="more_img">-->
<!--          <img src="@/assets/index/scientific_research_trends/sy_icon_zhdb.png" alt="">-->
<!--        </div>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getArticleList, info} from "@/api";
import {parseTime} from '@/utils/ebts'
import {toArticle,lookMoreComment} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";

export default {
  name: "scientific_research_trends",
  data() {
    return {
      width: document.documentElement.clientWidth > 992,
      scientificData: [],
      academiaData: [],
    }
  },
  created() {
    this.getScientificList()
    this.getAcademiaList()
  },
  methods: {
    getArticle(news){
      toArticle(news,this.width)
    },
    lookMore(id) {
      lookMoreFixedComment(id,this.width)
    },
    getScientificList() {
      getArticleList({
        type: "STCplDRCWAA3zcFE0EBTcQI",
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        this.scientificData = res.rows
      })
    },
    getAcademiaList() {
      getArticleList({
        type: "zpUhQJwnjHyJBqbvnWxcqwM",
        pageNum: 1,
        pageSize: 6
      }).then(res => {
        this.academiaData = res.rows
      })
    },
    parseTime(time) {
      return parseTime(time, '{y}-{m}-{d}')
    }
  }
}
</script>

<style scoped lang="scss">
@import '../css/comment.css';

.scientific_research_trends {
  background-image: url("../../../assets/index/scientific_research_trends/sy_bj2.png");
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.headline {
  .title {
    background: #FFFFFF;
    color: #1956BC;
  }

  .divider_text {
    font-size: 2rem;
    font-weight: 500;
    color: #FFFFFF;
  }

}

.scientific_context {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2.4rem;
  padding: 2rem 0;

  .scientific_context_text {
    margin-top: 2rem;
    color: #1956BC;
    padding-left: 4rem;

    .img {
      img {
        width: 2.6rem;
      }
    }

    .text {
      cursor: pointer;
      margin-left: 1rem;
      font-size: 1.8rem;
      font-weight: 500;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }

    .time {
      text-align: center;
      font-size: 1.2rem;
      font-family: "微软雅黑";
      font-weight: 400;
      padding: .2rem .5rem;
      width: 7.2rem;
      height: 2.2rem;
      line-height: 2.2rem;
      border-radius: 1.1rem;
      border: 0.1rem solid #1956BC;
      margin-left: 2rem;
    }
  }

  .scientific_context_divider {
    padding-left: 4rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

.academia_context {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem 0;

  .academia_context_divider {
    padding-left: 4rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .academia_context_text {
    margin-top: 2rem;
    color: #1956BC;
    padding-left: 4rem;


    .img {
      img {
        width: 2.6rem;
      }
    }

    .text {
      cursor: pointer;
      margin-left: 1rem;
      font-size: 1.8rem;
      font-weight: 500;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }

    .time {
      font-size: 1.2rem;
      font-family: "微软雅黑";
      font-weight: 400;
      color: #1956BC;
      line-height: 2.4rem;
    }
  }
}

@media screen and (min-width: 1100px) and (max-width: 1400px) {
  .scientific_context_text {
    padding-left: 2rem !important;

    .time {
      margin-left: 2rem !important;
    }
  }
  .academia_context_text {
    padding-left: 2rem !important;

    .time {
      margin-left: 2rem !important;
    }
  }
}
</style>
