<template>
  <div class="wrapper" v-if="bgData">
    <header-nav :index_num="index_num"></header-nav>
    <div class="box">
      <div class="left">
        <dl>
          <dt>
            <img class="one" :src="bgData.cover ? bgData.cover : 'imgUrl.moren'" alt />
            <span
              @click="collection(bgData.id)"
              class="iconfont icon-changyongtubiao-mianxing-"
              :class="coll ? 'colorTrue' : 'colorFalse'"
              v-if="0"
            ></span>
          </dt>
          <dd>
            <span class="d-o">{{bgData.title}}</span>
          </dd>
          <dd>
            <span class="d-b">
              来源:{{bgData.author}}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              发布时间:{{bgData.created_at}}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              浏览量:{{bgData.view}}
            </span>
          </dd>
        </dl>
        <div class="text" v-html="bgData.content">{{bgData.content}}</div>
      </div>
      <div class="right">
        <h3>热点新闻</h3>
        <div>
          <template v-for="(hotArticle,index) in bgDataZ">
            <dl :key="index" v-if="index < 4" @click="news(hotArticle.id)">
              <dt>
                <img :src="hotArticle.cover ? hotArticle.cover : imgUrl.moren" alt />
              </dt>
              <dd>
                <span class="dd">{{hotArticle.title}}</span>
              </dd>
              <dd>
                <time>{{hotArticle.created_at}}</time>
              </dd>
            </dl>
          </template>
        </div>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
import HeaderNav from '../../components/HeaderNav'
import FooterNav from '../../components/FooterNav'

export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data () {
    return {
      index_num: 0,
      coll: Number,
      imgUrl: {
        img4: require('../../../static/img/img4.png'),
        moren: require('../../../static/img/default.jpg'),
        img5: require('../../../static/img/img5.png'),
        wjx: require('../../../static/img/wjx.png')
      },
      bgData: [],
      bgDataZ: [],
      id: Number
    }
  },
  computed: {},
  watch: {},
  methods: {
    news (newId) {
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/article/details',
        data: {
          id: newId
        }
      }).then(res => {
        if (res.data.data.code === 200) {
          _this.bgData = res.data.data.data
          _this.bgDataZ = res.data.data.hotArticle
          _this.coll = res.data.data.is_collection
        } else {
          _this.$message.error('请求数据有问题！')
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    collection (articleId) {
      if (!sessionStorage.id) {
        alert('请先登录~')
        return
      }
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/article/collection',
        data: {
          sid: _this.id,
          article_id: articleId
        }
      }).then(res => {
        if (res.data.data.code === 200) {
          _this.coll = _this.coll === 1 ? 0 : 1
        } else {
          _this.$message.error('请求数据有问题！')
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    getData (id) {
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/article/details',
        data: {
          id: id
        }
      }).then(res => {
        if (res.data.data.code === 200) {
          _this.bgData = res.data.data.data
          _this.bgDataZ = res.data.data.hotArticle
          _this.coll = res.data.data.is_collection
        } else {
          _this.$message.error('请求数据有问题！')
        }
      })
        .catch(err => {
          console.log(err)
        })
    }
  },
  created () {
    // this.id = this.$route.params.id
    // let type = this.$route.params.type
    // this.getData(this.id)
  },
  mounted () {
    this.id = this.$route.query.id
    // let type = this.$route.query.type
    this.getData(this.id)
  }
}
</script>

<style lang='scss' scoped>
.wrapper {
  min-width: 1280px;
  box-sizing: border-box;

  .box {
    margin: 0 auto;
    width: 1280px;
    padding: 42px 40px 0px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .left {
      width: 840px;
      height: auto;
      background-color: #ffffff;
      padding: 35px 30px 70px;
      box-sizing: border-box;

      dl {
        position: relative;
        width: 780px;
        height: 587px;
        box-sizing: border-box;

        dd {
          width: 95%;
          .d-o {
            display: inline-block;
            margin: 28px 0 23px;
            font-family: "MicrosoftYaHei";
            font-size: 24px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-wrap: break-word;
            white-space: normal;
          }

          .d-b {
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #999999;
          }
        }

        dt {
          .one {
            width: 780px;
            height: 494px;
          }

          .colorFalse {
            font-size: 28px;
            color: #ccc;
            position: absolute;
            right: 0%;
            bottom: 5%;
          }

          .colorTrue {
            font-size: 28px;
            color: #fec300;
            position: absolute;
            right: 0%;
            bottom: 5%;
          }
        }
      }

      .text {
        margin: 38px auto 0px;
        overflow: hidden;
        width: 775px;
        height: auto;
        font-family: "MicrosoftYaHei";
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40px;
        letter-spacing: 0px;
        color: #666666;

        p {
          text-indent: 1em;
          line-height: 0px !important;
        }
      }
    }

    .right {
      width: 301px;
      height: 1282px;
      background-color: #ffffff;
      border: solid 1px rgba($color: #ccc, $alpha: 0.48);
      padding-top: 33px;
      box-sizing: border-box;

      div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
      }

      dl {
        margin-bottom: 30px;
        dt {
          img {
            width: 260px;
            height: 144px;
            border-radius: 10px;
          }
        }
        dd {
          span {
            margin-top: 10px;
            display: inline-block;
            width: 266px;
            font-family: "MicrosoftYaHei";
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 1px;
            color: #333333;
            display: -webkit-box;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-wrap: break-word;
            white-space: normal;
          }

          time {
            display: inline-block;
            width: 266px;
            text-align: right;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 1px;
            color: #999999;
          }
        }
      }

      h3 {
        margin-left: 20px;
        margin-bottom: 30px;
        font-family: "MicrosoftYaHei";
        font-size: 22px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
    }
  }

  .footer {
    margin-top: 80px;
  }
}
</style>
