<template>
  <div class="news_detail">
    <Top :active="active"></Top>
    <div class="news_det_wrap">
      <div class="news_det_box">
        <!-- 面包屑 -->
        <div class="major_title layout align_left">
          <el-breadcrumb separator="|">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>教育新闻</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="clearfix">
          <!-- 左侧 新闻列表 -->
          <div class="news_list">
            <!-- 上部标题 -->
            <div class="news_l_top layout flex_diection justify_center">
              <i class="news_content">NEWS</i>
              <i>教育新闻</i>
            </div>
            <!-- 下层列表内容 -->
            <div class="news_l_bottom">
              <ul class="clearfix">
                <li
                  class="news_list_li"
                  :class="{li_color:isNew == item.id}"
                  v-for="item in list"
                  :key="item.id"
                  @click="newsDet(item.id)"
                >{{item.name}}</li>
              </ul>
              <!-- 翻页按钮 -->
              <div class="news_btn clearfix" v-show="pageSum > 1">
                <div class="prev_page" @click="prev">上一页</div>
                <div class="next_page" @click="next">下一页</div>
              </div>
            </div>
          </div>
          <!-- 右侧 新闻详情 -->
          <div class="news_single_det">
            <div class="news_single_box">
              <!-- 日期 -->
              <div class="news_date">
                <i class="date_time">{{detail.date}}</i>
                /{{detail.year}}
              </div>
              <!-- 内容 -->
              <div class="news_det_content">
                <!-- 标题 -->
                <div class="news_single_title">{{detail.name}}</div>
                <!-- <div class="news_contents">{{detail.description}}</div> -->
                <div class="news_contents" v-html="detail.content"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottom2></bottom2>
  </div>
</template>
<script>
import Top from "../../common/Top";
import Bottom2 from "../../common/Bottom2";
import { post } from "@/api/http";
export default {
  data() {
    return {
      active: 0,
      // 所有数据
      list: [],
      detail: "",
      id: "",
      isNew: "",
      // 当前页
      currentPage: 1,
      // 总页数
      pageSum: ""
    };
  },
  methods: {
    // 教育新闻列表
    getEducationNewsList() {
      let url = "/api/index/getEducationNewsList/";
      let params = {
        page: this.currentPage
      };
      post(url, params).then(res => {
        this.list = res.news_list.data;
        if (this.currentPage > 1) {
          this.id = res.news_list.data[0].id;
        }else{
          this.id = this.$route.query.id;
        }
        this.newsDet(this.id);
        // 总页数
        this.pageSum = res.total_page;
      });
    },
    // 上一页
    prev() {
      if (this.currentPage == 1) {
        return "";
      } else {
        this.currentPage--;
        this.getEducationNewsList();
      }
    },
    // 下一页
    next() {
      if (this.currentPage == this.pageSum) {
        return "";
      } else {
        this.currentPage++;
        this.getEducationNewsList();
      }
    },
    // 教育新闻详情
    newsDet(id) {
      this.id = id;
      this.isNew = id;
      let url = "/api/index/getEducationNewsDetail/";
      let params = {
        id: this.id
      };
      post(url, params).then(res => {
        this.detail = res;
      });
    }
  },
  components: {
    Top,
    Bottom2
  },
  mounted() {
    this.getEducationNewsList();
    this.isNew = this.$route.query.id;
  },
  watch: {
    $route(to, from) {
      this.id = this.$route.query.id;
      this.getEducationNewsList();
    }
  }
};
</script>
<style scoped>
.news_det_wrap {
  width: 100%;
  background-color: #f2f5fa;
}

.news_det_box {
  width: 1200px;
  margin: 0 auto;
}

/* 左侧 */
.news_list {
  float: left;
  width: 180px;
}

.news_l_top {
  width: 180px;
  height: 140px;
  /* background-color: #409eff; */
  color: #fff;
  font-size: 16px;
  background-image: url("../../../assets/img/news.png");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.news_content {
  font-size: 30px;
}

.news_l_bottom {
  width: 180px;
  background-color: #fff;
  margin-top: 20px;
}

.news_list_li {
  color: #8c9198;
  font-size: 14px;
  width: 144px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 12px 18px;
}

.news_list_li:hover {
  background-color: #eee;
}

.li_color {
  color: #409eff;
}

/* 翻页按钮 */
.news_btn {
  padding: 13px;
}

.prev_page,
.next_page {
  width: 72px;
  height: 30px;
  border: 1px solid #409eff;
  border-radius: 3px;
  line-height: 30px;
  text-align: center;
  float: left;
  font-size: 12px;
  color: #409eff;
}

.next_page {
  float: right;
  background-color: #409eff;
  color: #fff;
}

/* 右侧 */
.news_single_det {
  float: right;
  width: 996px;
  background-color: #fff;
}

.news_single_box {
  padding: 20px;
}

.news_date {
  font-size: 14px;
  color: #8c9198;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.date_time {
  font-weight: bold;
  color: #34485e;
}

/* 标题 */
.news_single_title {
  font-weight: bold;
  color: #34485e;
  font-size: 20px;
  margin: 24px 0 20px 0;
}

.news_contents {
  color: #8c9198;
  font-size: 14px;
  text-align: left;
}

.news_img {
  width: 100%;
  height: 148px;
  margin: 20px 0;
}

.news_img img {
  width: 100%;
  height: 100%;
}
</style>