<template>
  <z-paging
    ref="pagingRef"
    v-model="noticesPar"
    default-page-size="10"
    empty-view-text="暂无公告"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    :loading-more-custom-style="{'padding-bottom': '3.13rem', 'margin-top': '-40rpx'}"
    loading-more-no-more-text="没有更多了，看看别的吧"
    @query="queryShopNotices"
    @list-change="listChange"
  >
    <view class="Mall4j shop-page">
      <view class="shop-notices">
        <!-- 头部 -->
        <div class="shop-header">
          <shop-head
            ref="shopHeadRef"
            :shop-id="shopId"
            :is-products-page="false"
          />
        </div>

        <view class="notices">
          <view class="content">
            <view
              v-for="item in notices"
              :key="item.id"
              class="notice-item"
            >
              <view class="n-tit">
                <view class="tit">
                  {{ item.title }}
                </view>
                <view class="time">
                  {{ item.publishTime }}
                </view>
              </view>
              <view class="n-con">
                <rich-text :nodes="item.content" />
              </view>
              <view
                class="n-foot"
                @tap="toMessageDetail(item.id)"
              >
                <view class="foot-t">
                  查看详情
                </view>
                <view class="foot-i">
                  <image src="@/static/images/more.png" />
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 店铺tabbar -->
        <shop-tabbar
          style="position:fixed;bottom:0;width:100%;left:0;right:0;"
          :shop-id="shopId"
          current-tab="2"
        />
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import shopHead from '@/package-shop/components/shop-head/index'
import util from '@/utils/util'

const shopId = ref(0)
const shopInfo = ref({})
onLoad((options) => {
  // options = { ...Route.query }
  shopInfo.value = uni.getStorageSync('cloudShopInfo') || {}
  shopId.value = options.shopId || shopInfo.value.shopId
})

const notices = ref([])
const noticesPar = ref([]) // 多行展示时商品列表
const pagingRef = ref(null)
/**
 * 获取店铺标题列表
 */
const queryShopNotices = (pageNum, pageSize) => {
  http.request({
    url: '/mall4cloud_admin/ma/notice',
    method: 'GET',
    data: {
      shopId: shopId.value,
      pageSize,
      pageNum
    }
  }).then((res) => {
    for (let i = 0; i < res.list.length; i++) {
      res.list[i].content = util.formatHtml(res.list[i].content)
    }
    pagingRef.value.complete(res.list)
  })
}

const listChange = (list) => {
  notices.value = list
}

// 跳转到公告详情
const toMessageDetail = (id) => {
  uni.navigateTo({
    url: '/package-activities/pages/message-detail/message-detail?id=' + id + '&shopName=' + shopInfo.value.shopName
  })
}

</script>

<style lang="scss" scoped>
@use "../shop-page";

.shop-notices {
  background-color: #f2f3f7;
}
</style>
