<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>{{ pagedetails && pagedetails.title }}</h2>
          <!-- <p class="slug">{{ pagedetails && pagedetails.slug }}</p> -->
          <p class="date" v-if="pagedetails.date">发表时间: {{ pagedetails.date }}</p>
          <div class="content" v-html="pagedetails && pagedetails.content"></div>
          <a v-if="pagedetails && pagedetails.annexname" :href="pagedetails.annex" target="_blank">附件: {{ pagedetails.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: pagemapState, mapActions: pagemapActions } = createNamespacedHelpers('page')
const { mapState: bannermapState, mapActions: bannermapActions } = createNamespacedHelpers('banner')
export default {
  props: {
    id: String
  },
  components: {
    breadcrumb,
    sidebar,
    titles
  },
  data () {
    return {
      item: '',
      en: '',
      code: '',
      pagedetails: {}
    }
  },
  methods: {
    ...mapActions(['getmenu']),
    ...pagemapActions(['getdetails']),
    ...bannermapActions({ bannergetdetails: 'getdetails' }),
    async filteritem () {
      let items = {}
      if (this.code !== '-1') {
        items = this.items.filter(p => p.code === this.code)[0]
      }
      // eslint-disable-next-line eqeqeq
      this.item = this.code == '-1' ? '轮播图' : items.name
      // eslint-disable-next-line eqeqeq
      this.en = this.code == '-1' ? 'image' : items.en
    }
  },
  async mounted () {
    this.code = localStorage.getItem('itemId')
    const res = await this.getmenu()
    if (res.data.errcode === 0) this.filteritem()
    // eslint-disable-next-line eqeqeq
    if (this.code == '-1') {
      await this.bannergetdetails({ id: this.id })
      this.pagedetails = this.banneritem
    } else {
      await this.getdetails({ code: this.id })
      this.pagedetails = this.pageitem
    }
  },
  computed: {
    ...mapState(['items']),
    ...pagemapState(['pageitem']),
    ...bannermapState(['banneritem'])
  },
  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>
