<!-- 消息 -->
<template>
  <div class="index wrapper_1200">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/message?id=' + `${id}` }"
          >消息</el-breadcrumb-item
        >
        <el-breadcrumb-item>查看详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="message_details_Box">
      <h1 class="message_details_title">{{ messageDetail.title }}</h1>
      <p class="message_details_time">
        {{ $dayjs(messageDetail.create_time * 1000).format("YYYY-MM-DD HH:mm") }}
      </p>
      <div v-html="messageDetail.content"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "message_details",
  auth: false,
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      id: undefined,
      messageDetail: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.id = this.$route.query.id;
    this.getData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    getData() {
      let obj = {
        id: this.id,
      };
      this.$axios
        .post("/notice/info", obj)
        .then((res) => {
          console.log(res);
          this.messageDetail = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.index {
  .crumbs {
    margin-top: 20px;
  }
  .message_details_Box {
    padding: 30px;
    width: 1200px;
    min-height: 485px;
    background: #ffffff;
    border-radius: 4px;
    margin: 20px 0;
    position: relative;
    .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: 40px;
    }
    .message_details_end {
      // margin-top: 20px;
      // display: flex;
      // justify-content: flex-end;
      position: absolute;
      right: 40px;
      bottom: 40px;
    }
  }
}
</style>
