<template>
  <div class="teaching_student">

    <!--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.teaching_work') }}
        <!--教学工作-->
      </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 :xs="22" :sm="20" :md="20" :lg="18" :xl="14" class="phe">
        <div class="tw" v-for="(item,index) in listData" :key="index" @click="getArticle(item)">
          <el-row>
            <el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
              <div class="tw_time">
                <div class="tw_top">
                  {{getDay(item.publishTime)}}
                </div>
                <div class="tw_bottoms">
                  {{getTime(item.publishTime)}}
                </div>
              </div>
            </el-col>
            <el-col :xs="19" :sm="19" :md="15" :lg="18" :xl="18">
              <div class="tw_context">
                <div class="tw_context_title">
                  {{item.title}}
                </div>
                <div class="tw_context_text" style="color:#757575 !important;" v-html="item.content"></div>
              </div>
            </el-col>
            <el-col v-show="width" :md="3" :lg="3" :xl="3">
              <div class="tw_img">
                <img :src="item.imgurl" alt="">
              </div>
            </el-col>
          </el-row>
          <hr v-if="index != listData.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
        </div>
      </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 class="more" @click="lookMore(listData[0])">
          {{ $t('message.more') }}
        </div>
<!--        <div class="more_img">-->
<!--          <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
<!--        </div>-->
      </el-col>
    </el-row>
  </div>
</template>

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

export default {
  name: "teaching_student",
  data(){
    return{
      width:document.documentElement.clientWidth>992,
      listData:[]
    }
  },
  created() {
    this.getListData()
  },
  methods:{
    getArticle(news){
      toArticle(news,this.width)
    },
    lookMore(news) {
      // lookMoreComment(news,this.width)
      lookMoreFixedComment("KW_T7dJ2lt5sC-RJZSnPtk0",this.width)
    },

    getListData(){
      getArticleList({
        type: "9GhKyWFMk4aHEZMNVFcB4QU",
        pageNum: 1,
        pageSize:5
      }).then(res => {
        this.listData = res.rows
      })
    },
    getDay(time){
      return new Date(time).getDate()
    },
    getTime(date){
      let time = new Date(date);
      let year = time.getFullYear();
      let month = time.getMonth() + 1
      let day = time.getDate();
      return year + "-" + month + "-" + day;
    }
  }
}
</script>

<style scoped lang="scss">
@import '../css/comment.css';
.teaching_student{
  margin-top: 4rem;
}
.tw {
  margin-top: 4rem;

  .tw_time {
    border-right: .3rem solid #D5D5D5;
    height: 10rem;
    width: 10rem;
    color: #1956BC;
    text-align: center;

    .tw_top {
      height: 8rem;
      width: 100%;
      line-height: 8rem;
      font-size: 5.2rem;
    }

    .tw_bottoms {
      height: 2rem;
      width: 100%;
      font-size: 1.4rem;
    }
  }

  .tw_context {
    width: 95%;

    font-family: PingFangSC-Medium, PingFang SC;
    color: #161616;

    .tw_context_title {
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap; //溢出不换行
      font-size: 2rem;
      cursor:pointer;
      font-weight: 600;
      padding-right: 2rem;

    }

    .tw_context_text {
      margin-top: .8rem;
      font-size: 1.6rem;
      height: 6.5rem;
      font-weight: 400;
      color: #757575 !important;
      letter-spacing: 1px;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:3; //显示的行
    }
  }

  .tw_img {
    width: 7vw;

    img {
      width: 100%;
    }
  }

}
</style>
