<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div class="box">
      <div class="left">
        <dl>
          <dt>
            <img class="one" :src="bgData.cover" alt />
            <span
              @click="collection(bgData.id)"
              class="iconfont icon-changyongtubiao-mianxing-"
              :class="coll ? 'colorTrue' : 'colorFalse'"
            ></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="(item,index) in list">
            <dl :key="index" v-if="index < 4" @click="$jump('newsDetails')">
              <dt>
                <img :src="imgUrl.img4" alt />
              </dt>
              <dd>
                <span class="dd">活动策划是提高市场占有率的有效行为</span>
              </dd>
              <dd>
                <time>2019-10-14</time>
              </dd>
            </dl>
          </template>
        </div>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
/* eslint-disable */
import HeaderNav from "../../components/HeaderNav";
/* eslint-disable */
import FooterNav from "../../components/FooterNav";
export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data() {
    return {
      index_num: 0,
      coll: false,
      imgUrl: {
        img4: require("../../../static/img/img4.png"),
        img5: require("../../../static/img/img5.png"),
        wjx: require("../../../static/img/wjx.png")
      },
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      bgData: [],
      id: Number
    };
  },
  computed: {},
  watch: {},
  methods: {
    collection(article_id) {
      if (!localStorage.token) {
        alert('请先登录~')
        return;
      }
      this.coll = !this.coll;
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/article/collection',
        data: {
          sid: _this.id,
          article_id: article_id
        }
      }).then(res => {
        console.log(res)
      })
        // eslint-disable-next-line handle-callback-err
        .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.code === 200) {
          _this.bgData = res.data.data.data
        } else {
          _this.$message.error('请求数据有问题！')
        }
      })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          console.log(err)
        })
    }
  },
  created() {
    this.id = this.$route.params.id
    let type = this.$route.params.type
    this.getData(this.id)
  },
  mounted() { }
};
</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: center;

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

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

        dd {
          .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;
          }

          .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: 550px;
        font-family: "MicrosoftYaHei";
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40px;
        letter-spacing: 0px;
        color: #666666;

        p {
          text-indent: 1em;
        }
      }
    }

    .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>
