<!-- 消息 -->
<template>
  <div class="index wrapper_1200">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/information' }">行业资讯</el-breadcrumb-item>
        <el-breadcrumb-item>资讯详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="message_details_Box">
      <h1 class="message_details_title">{{ articleInfo.article_title }}</h1>
      <p class="message_details_time" v-if="articleInfo.is_show_release_time == 1">
        {{ $dayjs(articleInfo.create_time * 1000).format("YYYY/MM/DD HH:mm:ss") }}
      </p>
      <p v-html="articleInfo.article_content"></p>
      <div class="bottom-area">
        <div v-if="articleInfo.is_show_read_num == 1">
          阅读： {{ articleInfo.read_num + articleInfo.initial_read_num }}
        </div>
        <div v-if="articleInfo.is_show_dianzan_num == 1">
          {{ articleInfo.dianzan_num + articleInfo.initial_dianzan_num }}
          人已赞
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "information_details",
  auth: false,
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      messageDetails: "",
      articleInfo: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    getData() {
      let obj = {
        article_id: this.$route.query.article_id,
      };
      this.$axios
        .post(`/article/info`, obj)
        .then((res) => {
          this.articleInfo = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.index {
  .crumbs {
    margin-top: 20px;
  }
  .message_details_Box {
    padding: 30px;
    width: 1190px;
    min-height: 485px;
    background: #ffffff;
    border-radius: 4px;
    margin: 20px auto;
    position: relative;
    box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
    .message_details_title {
      text-align: center;
      height: 30px;
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 30px;
    }
    .message_details_time {
      text-align: center;
      height: 17px;
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 17px;
      margin-top: 15px;
      margin-bottom: 30px;
    }
    .message_details_end {
      // margin-top: 20px;
      // display: flex;
      // justify-content: flex-end;
      position: absolute;
      right: 40px;
      bottom: 40px;
    }
    .bottom-area {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      color: #999;
    }
  }
}
</style>
