<template>
  <div class="sidebarBox">
    <div class="listBox">
      <div class="course">课程中心</div>
      <ul class="column">
        <li
          :class="activity==index?'activity':'default'"
          @click="go(`${item.path}`,index)"
          v-for="(item, index) in listSide"
          :key="index"
        >{{item.text}}</li>
      </ul>
      <div class="makeBtn" @click="go('companySynopsis')">预约服务</div>
      <div class="journalismTitle">
        <div>新闻中心</div>
        <p @click="moreNews">MORE</p>
      </div>
       <div class="journalismBox" v-for="(item, index) in newsList" :key="index" @click="goparticulars(item)">
          <img class="logo" :src="item.mainPicRealPath" alt />
          <div class="journalismText">
            <h3>{{item.title}}</h3>
            <span>{{item.assistantTitle}}</span>
            <div class="time">{{item.publishDate}} <span class="el-icon-view"> {{item.view}}</span></div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import { homeService } from "@/api"
import moment from "moment"
export default {
  data() {
    return {
      listSide: [
        {
          path: "/attestation",
          text: "认证课程",
        },
        {
          path: "/attestationFingerpost?index=1",
          text: "认证指南",
        },
        {
          path: "/certificate?bear=1",
          text: "证书介绍",
        },
        {
          path: "/companySynopsis",
          text: "了解更多",
        },
      ],
      activity:sessionStorage.getItem("sidebarIndex"),
      newsList: []
    };
  },
  methods: {
    goparticulars(item) {
      let detailId= item.id + ".html"
      this.$router.push({name: "particulars",params:{ id: detailId, ifjournalism: 2}})
    },
    go(path,index) {
      this.$router.push(path);
      sessionStorage.setItem('sidebarIndex',index)
    },
    getNewsList() {
      let data = {
        type: 1,
        pageNum: 1,
        pageSize: 3
      }
      homeService.getNewsList(data).then(res => {
        res.list.forEach(ele => {
            ele.publishDate = moment(ele.publishDate).format("YYYY-MM-DD")
        });
        this.newsList = res.list
      })
    },
    moreNews() {
      this.$router.push('/journalism');
    }
  },
  created() {
    this.getNewsList()
  }
};
</script>
<style lang="scss" scoped>
.sidebarBox {
  float: right;
  width: 20%;
  .listBox {
    margin-top: 30px;
    .course {
      font-size: 16px;
      color: #ffffff;
      text-indent: 20px;
      background-color: rgb(153, 153, 153);
      padding: 15px 0;
    }
    .column {
      overflow: hidden;
      .default {
        background: linear-gradient(#ffffff, #cccccc);
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      .activity{
        background: linear-gradient(#ffffff, #999);
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #ffffff;
      }
    }
    .makeBtn {
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: linear-gradient(rgb(79, 167, 218), rgb(7, 56, 79));
      border-radius: 10px;
      margin: 20px 0;
      color: #ffffff;
    }
    .journalismTitle {
      overflow: hidden;
      height: 45px;
      line-height: 45px;
      background-color: rgb(153, 153, 153);
      color: #fff;
      div {
        float: left;
        height: 45px;
        text-indent: 10px;
      }
      p {
        height: 45px;
        float: right;
        margin-right: 10px;
        cursor: pointer;
      }
    }
    .journalismBox {
      overflow: hidden;
      border-bottom: rgb(232, 232, 232) 1px solid;
      margin: 5px 0;
      .logo {
        background-color: rosybrown;
        height: 40px;
        width: 50px;
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
        margin-top: 10px;
      }
      .journalismText {
        float: left;
        width: 160px;
        margin-left: 10px;
        h3 {
          width: 90%;
          margin: 5px 0;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span {
          overflow: hidden;
          color: #999;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .time {
          color: rgb(214, 214, 206);
          padding: 2px 0;
          span{
            float: right;
          }
        }
      }
    }
  }
}
</style>