<template>
  <div class="details-margin-top-120 details-news layout_com_page">
    <div class="layout_com_page_banner">
      <div class="details-news-body">
        <div class="details-news-body-title">
          <span class="font-size-30">{{dataNews.title}}</span>
          <div class="padd-10">
            <span class="font-size-24">{{dataNews.created_time | formatDate}}</span>
            <span
              class="font-size-24 color-to"
            >{{dataNews.created_time | formatDate(dataNews.created_time, true)}}</span>
          </div>
          <span class="border-2px"></span>
        </div>
        <div class="news_con_eidt">
          <div class="news_con_left">
            <div
              class="news-video"
              v-loading="isloading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              v-html="dataNews.content"
            ></div>
          </div>
        </div>
        <div class="news_con_eidt_right">
          <div class="fixbox butt">
            <div class="back" @click="goback">
              <i class="el-icon-arrow-left"></i>
              <span>返回报名系统</span>
            </div>
            <button @click="applyConsult">申请咨询</button>
            <button @click="many">了解更多</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cAction from '@action'
export default {
  name: 'details-recent-news',
  data() {
    return {
      tempRoute: {},
      dataNews: {},
      isloading: true
    }
  },
  filters: {
    formatDate(data, state = null) {
      if (!data) return
      const date = new Date(data.replace(/-/g, '/'))
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      if (state) {
        return y
      }
      return m + '.' + d + '/'
    }
  },
  methods: {
    many() {
      this.$router.push({
        name: 'major-set'
      })
    },
    applyConsult() {
      this.$router.push({
        name: 'home-page'
      })
    },
    setDate() {
      this.isloading = true
      cAction.News.news(this.tempRoute.params.id)
        .then(data => {
          this.dataNews = Object.assign({}, data)
          this.isloading = false
        })
        .catch(e => {
          this.isloading = false
          console.log(e)
        })
    },
    goback() {
      this.$router.push({
        name: 'recent-news'
      })
    }
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route)
    this.setDate()
  }
}
</script>

<style lang="scss" scoped>
.details-news {
  background: #fff;
  min-height: 1000px;
  height: auto;
  .layout_com_page_banner {
    height: 100%;
    .details-news-body {
      width: 80%;
      height: 100%;
      .details-news-body-title {
        display: flex;
        margin-top: 50px;
        flex-direction: column;
        .padd-10 {
          padding: 15px 0px;
        }
        .color-to {
          color: #666666ff;
        }
        .border-2px {
          height: 2px;
          width: 100%;
          display: inline;
          background: #ccccccff;
        }
      }
    }
    .news_con_eidt_right {
      width: 340px;
      float: right;
      margin-left: -340px;
      position: relative;
      z-index: 5;
      .fixbox {
        position: fixed;
        top: 38%;
        .back {
          font-size: 14px;
          cursor: pointer;
          color: #57acffff;
          padding: 20px 0px;
          position: relative;
          margin-bottom: 20px;
          border-top: 1px dotted #c0c0c0;
          border-bottom: 1px dotted #c0c0c0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .butt {
        display: flex;
        flex-direction: column;
        button {
          width: 132px;
          height: 54px;
          cursor: pointer;
          border-radius: 4px;
          margin: 20px 50px;
          border: 2px solid rgba(175, 27, 64, 1);
          color: #af1b40ff;
          background: #fff;
          &:hover {
            background: rgba(175, 27, 64, 1);
            color: #fff;
          }
        }
      }
    }
    .news_con_eidt {
      margin-top: 30px;
      width: 100%;
      float: left;
      .news_con_left {
        padding-right: 380px;
      }
      .news-video {
        color: rgba(34, 34, 34, 1);
        font-weight: 400;
        font-size: 18px;
        letter-spacing: 2px;
        ::v-deep img {
          transition: all 0.5s;
          border: 0;
          display: inline-block;
          max-width: 100%;
        }
      }
    }
  }
}
::v-deep .news-video p {
  margin: 10px 0;
  font-family: PingFangSC-Regular, PingFang SC;
}
::v-deep .news-video img {
  transition: all 0.5s;
  border: 0;
  display: inline-block;
  max-width: 100%;
}
</style>
