<template>
  <!-- <div class="products-yemian">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="bread-container">
            <b>您当前的位置：</b>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item v-for="item in breadList" :key="item.path">
                <router-link :to="item.path" :data-title="item.meta.title">{{
                item.meta.title }}</router-link>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="newsTitle && !$route.meta.isDetail">
                <span class="nav-title">{{ newsTitle }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="row" style="margin-top: 10px;">
            <div class="col-md-12 col-sm-9 content">
              <div class="content-news" v-html="toHtml(bannerDetail.content)"></div>
              <div class="content-news" v-html="toHtml(bannerDetail.content1)"></div>
              <div class="content-news" v-html="toHtml(bannerDetail.content2)"></div>
              <div class="content-news" v-html="toHtml(bannerDetail.content3)"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> -->
  <div class="row" style="margin: 10px 0 0;">
    <div class="col-md-24 content">
      <div class="content-news" v-html="toHtml(bannerDetail.content)"></div>
      <div class="content-news" v-html="toHtml(bannerDetail.content1)"></div>
      <div class="content-news" v-html="toHtml(bannerDetail.content2)"></div>
      <div class="content-news" v-html="toHtml(bannerDetail.content3)"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      bannerId: '',
      // newsTitle: ''
    }
  },
  created() {
    this.bannerId = this.$route.params.id
    this.getBannerMsg(this.$route.params.id)
  },
  computed: {
    ...mapGetters([
      'bannerDetail',
    ]),
    // breadList() {
    //   const matche = this.$route.matched
    //   matche[0].path = '/'
    //   const length = matche.length
    //   if (length > 1) {
    //     matche[length - 1].path = ''
    //     matche[length - 1].meta.title = this.bannerDetail.title
    //   }
    //   return matche
    // }
  },
  methods: {
    ...mapActions({
      getBannerMsg: 'app/getBannerMsg'
    }),

    toHtml(content) {
      if (!content) return ''
      return content.replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;/g, "&")
        .replace(/&quot;/g, '"')
        .replace(/&apos;/g, "'");
    }
  }
}
</script>

<style scoped>
.content {
  padding: 0;
}
.news-title {
  font-size: 3.2rem;
  text-align: center;
  margin-bottom: 20px;
}

.news-time {
  text-align: center;
  margin-bottom: 10px;
}

/* .bread-container {
  display: flex;
  align-items: center;
  line-height: 32px;
  border-bottom: 1px solid #dadada;
}

.bread-container .nav-title {
  font-weight: 600;
  color: #3884c0;
}

.bread-container .nav-title:hover {
  color: #333;
}

.el-breadcrumb__item {
  display: flex;
}

.el-breadcrumb__item:last-child a {
  font-weight: 600;
  color: #3884c0;
}

a {
  outline: none;
} */

/* .content-news p img {
    width: auto;
    height: auto;
  } */
</style>
