<template>
  <div class="container">
    <breadcrumb :type="'正文'" :item="item" :en="en"></breadcrumb>
    <div class="contentbox">
      <sidebar class="sidebar"></sidebar>
      <div class="box">
        <titles :type="'正文'" :title="item" :en="en"></titles>
        <div class="html">
          <h2>{{ contentitem && contentitem.title }}</h2>
          <p class="date">发表时间: {{ contentitem && contentitem.date }}  访问量: {{ contentitem && contentitem.hits || 0 }}</p>
          <div class="content" v-html="contentitem.content"></div>
          <a v-if="contentitem && contentitem.annexname" :href="contentitem.annex" target="_blank">附件: {{ contentitem.annexname }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from '../components/breadcrumb.vue'
import sidebar from '../components/sidebar/index.vue'
import titles from '../components/sidebar/title.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('menu')
const { mapState: contentnmapState, mapActions: contentmapActions } = createNamespacedHelpers('content')
export default {
  props: {
    id: String
  },
  components: {
    breadcrumb,
    sidebar,
    titles
  },
  data () {
    return {
      item: '',
      en: ''
    }
  },
  methods: {
    ...mapActions(['getmenu']),
    ...contentmapActions(['getdetails']),
    async filteritem () {
      const code = localStorage.getItem('itemId') || -1
      const items = this.items.filter(p => p.code === code)[0]
      this.item = items.name || ''
      this.en = items.en || ''
    }
  },
  async mounted () {
    const res = await this.getmenu()
    if (res.data.errcode === 0) this.filteritem()
    await this.getdetails({ id: this.id })
  },
  computed: {
    ...mapState(['items']),
    ...contentnmapState(['contentitem'])
  },
  watch: {
    id (val) {
      this.filteritem()
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 90%;
  margin: 0 auto;
  margin-top: 2%;
  .contentbox {
    display: flex;
    margin: 5%;
    .sidebar {
      width: 20%;
      margin-right: 5%;
    }
    .box {
      width: 75%;
      .html {
        width: 100%;
        margin: 5% 0;
        h2, h4 {
          width: 100%;
          text-align: center;
        }
        .slug {
          font-size: 0.8em;
        }
        .date {
          width: 100%;
          text-align: center;
        }
      }
    }
  }
}
</style>
