<template>
  <div class="notice-detail">
    <div class="content">
      <div class="crumbs">
        <nuxt-link :to="`/notice-list?shopId=${shopId}&shopName=${shopName}`" class="item-a">{{
          shopId != 0 ? `${shopName}-` + $t('storeAnnouncement') : $t('lanhaiHeadlines')
        }}</nuxt-link>
        <span class="arrow">></span>
        <span class="item-span">{{ noticeDet.title }}</span>
      </div>
      <div class="notic-box">
        <div class="det">
          <div class="tit">{{ noticeDet.title }}</div>
          <div class="time-box">
            <div class="text">{{$t('releaseTime')}}：</div>
            <div class="time">{{ noticeDet.publishTime }}</div>
          </div>
          <div class="con" v-rich="noticeDet.content"></div>
        </div>
        <!-- <div class="list-box">
          <div class="more" @click="goNoticeList">
            <div class="text">最新公告</div>
            <div class="arrow"></div>
          </div>
          <div class="list">
            <div
              class="item"
              v-for="item in noticeList"
              :key="item.id"
              @click="goNoticeDet(item.id)"
            >
              <div class="tit">{{item.title}}</div>
              <div class="time">{{item.publishTime.substring(0,10)}}</div>
            </div>
            <div class="item arrow-box" v-if="this.pages > 1">
              <div class="prev-arrow" @click="prevItem" :class="{'disable': this.current <= 1}"></div>
              <div
                class="next-arrow"
                @click="nextItem"
                :class="{'disable': this.current >= this.pages}"
              ></div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      id: this.$route.query.id,  // 接收公告列表id
      noticeDet: {},  // 公告详情
      noticeList: [],  // 公告列表
      pages: 1, // 总页数
      current: this.$route.query.current || 1, // 当前页数
      shopId: this.$route.query.shopId || 0,
      shopName : this.$route.query.shopName
    }
  },
  created () {
    this.getNoticeDet()
    this.getNoticeList(1)
  },
  mounted () {
    document.title = this.$t('lanhaiHeadlines')
  },

  watch: {
    // 在当前页面点击顶部喇叭时进数据请求
    '$route' () {
      //监听路由是否变化
      this.id = this.$route.query.id
      this.shopId = this.$route.query.shopId
      this.shopName = this.$route.query.shopName
      this.getNoticeDet()
    }
  },
  methods: {

    // 获取公告详情
    getNoticeDet () {
      this.$axios.get('/shop/notice/info/' + this.id).then(({ data }) => {
        if (!data) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('notice.noticeGone'),
            duration: 1200
          })
          setTimeout(()=> {
            this.$router.push({ path: '/notice-list?shopId=' + this.shopId + '&shopName=' + this.shopName })
          }, 1200)    
          return
        }
        this.noticeDet = data
      })
    },

    // 获取公告列表
    getNoticeList (cur) {
      this.$axios.get('/shop/notice/noticeList/' + this.shopId, {
        params: {
          current: cur,  //当前页
          size: 5
        }
      }).then(({ data }) => {
        this.noticeList = data.records
        this.pages = data.pages
      })
    },

    // 切换分页
    prevItem () {
      if (this.current > 1) {
        var cur = --this.current
        this.getNoticeList(cur)
      }
    },

    nextItem () {
      if (this.current <= this.pages) {
        var cur = ++this.current
        this.getNoticeList(cur)
      }
    },

    // 去公告列表
    goNoticeList () {
      this.$router.push({ path: '/notice-list', query: {
          shopId: this.shopId,
          shopName: this.shopName
        }
      })
    },

    // 去公告详情
    goNoticeDet (id) {
      this.id = id
      this.getNoticeDet()
      this.$router.push({
        path: '/notice-detail',
        query: {
          id: id,
          shopId: this.shopId,
          shopName: this.shopName
        }
      })
    }
  }
}
</script>

<style scoped src='~/assets/css/notice-detail.css'></style>
