<template>
  <div>
    <van-nav-bar :title="title" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <div class="style" v-html="content"></div>
  </div>
</template>
<script>
import {
  hitNews,
  hitNotice,
  hitPolicy,
  getNews,
  getNotice,
  getPolicy,
} from '../../api/index.js'
export default {
  data() {
    return {
      title: '',
      id: '',
      content: '',
    }
  },
  created() {
    console.log(this.$route)
    this.title = this.$route.query.title
    this.id = this.$route.query.id
    if (this.title == '新闻资讯') {
      this.hitNews()
      this.getNews()
    } else if (this.title == '通知公告') {
      this.hitNotice()
      this.getNotice()
    } else if (this.title == '政策文件') {
      this.hitPolicy()
      this.getPolicy()
    }
  },
  methods: {
    async getNotice() {
      const res = await getNotice({ id: this.id })
      this.content = res.data.content
    },
    async getNews() {
      const res = await getNews({ id: this.id })
      this.content = res.data.content
    },
    async getPolicy() {
      const res = await getPolicy({ id: this.id })
      this.content = res.data.content
    },
    async hitNotice() {
      const res = await hitNotice({ id: this.id })
      console.log(res)
    },
    async hitNews() {
      const res = await hitNews({ id: this.id })
      console.log(res)
    },
    async hitPolicy() {
      const res = await hitPolicy({ id: this.id })
      console.log(res)
    },
  },
}
</script>
<style lang="scss">
.style {
  padding: 0 30px;
  h1,
  h2,
  h3,
  h3,
  h4,
  h6 {
    text-align: center;
  }

  h1 {
    font-size: 64px;
  }
  h2 {
    font-size: 48px;
  }
  h3 {
    font-size: 36px;
  }
  h4 {
    font-size: 32px;
  }
  h5 {
    font-size: 28px;
  }
  h6 {
    font-size: 24px;
  }
  p {
    line-height: 2em !important;
    font-size: 32px;
  }
  ul {
    li {
      font-size: 32px;
    }
  }
  img {
    width: 100%;
  }
}
</style>