<template>
    <view class="notice-list">
     
      <scroll-view scroll-y="true" style="height:calc(100vh - 140rpx);width: 100%;background: #F5F5F5;margin-top:32rpx"
        :refresher-triggered="triggered" :refresher-enabled="true" @refresherrefresh="refresherrefresh"
        refresher-background="#f1f1f1" @scrolltolower="onListBottom">
        <ul class="card">
          <li v-for="(item, index) in dataList" :key="index" @click="jump(item)">
            <view class="title">
              <view class="text">
                <view>{{ item.title }}</view>
                <view class="mark" v-if="!item.readStatus"></view>
              </view>
              <view style="flex-shrink: 0;color: #999999;">{{ item.createdAt }}</view>
            </view>
            <view>
              <!-- {{ item.content }} -->
              <u-parse :html="item.content"></u-parse>
            </view>
          </li>
        </ul>
        <view style=" line-height: 100rpx;">
          <uni-load-more :status="scrollType"></uni-load-more>
        </view>
      </scroll-view>
    </view>
  </template>
  <script>
  // import requestName from '@/common/requestName'
  export default {
    name: 'NoticeList',
    data() {
      return {
        dataList: [
            {
                title:'11111',//标题
                createdAt:'转发通知',
                content:'222<p>44444444444</p>',
                readStatus:true
            }
        ],
        current: 0,
        style: {
          borderRadius: '100px',
          background: '#fff',
          padding: '0 32rpx'
        },
        search: {
          pageNo: 1,
          pageSize: 20,
          readStatus: ''
        },
        scrollType: '',
        triggered: false,
        refreshNeed: false
      }
    },
    onLoad(data) {
      this.getList()
    },
    onShow() {
      console.log(this.refreshNeed);
      if (this.refreshNeed) {
        this.reSearch()
      }
    },
    methods: {
  
      getList() {
        // this.$wx_http.get(requestName['pageNotice'], this.search).then(res => {
        //   let data = res.data.records
        //   this.scrollType = ''
        //   this.triggered = false
        //   if (data.length >= this.search.pageSize) {
        //     this.scrollType = 'more'
        //   }
        //   this.dataList = this.dataList.concat(data)
        // })
      },
  
      reSearch() {
        this.search.pageNo = 1
        this.dataList = []
        this.getList()
      },
  
      onListBottom() {
        if (this.scrollType == 'more') {
          this.search.pageNo += 1
          this.getList()
        }
      },
      onreachBottom() {
        this.getDevicePage()
      },
      refresherrefresh() {
        this.triggered = true
        this.reSearch()
      }
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .notice-list {
    height: calc(100vh - 0px);
    background: #F5F5F5;
    overflow: hidden;
    .mark-read-btn {
      background: #FFFFFF;
      border-radius: 8rpx;
      border: 1px solid rgba(255, 255, 255, 0.43);
      padding: 0;
      margin: 24rpx 30rpx;
      text-align: center;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      color: #FF8800;
      display: flex;
      justify-content: center;
      align-items: center;
  
      image {
        width: 34rpx;
        height: 32rpx;
        display: block;
        margin-right: 20rpx;
        fill:#004BAA
      }
    }
  
  
    .card {
      margin: 0 16px;
      list-style: none;
      padding: 0;
  
      li {
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.43);
        padding: 12px 14px;
        margin-bottom: 24rpx;
        font-size: 28rpx;
  
        .title {
          border-bottom: 1px solid #F0F0F0;
          display: flex;
          justify-content: space-between;
          padding-bottom: 10rpx;
          margin-bottom: 15rpx;
  
  
          .text {
            font-size: 30rpx;
            flex-grow: 1;
            display: flex;
            margin-right: 20rpx;
            font-weight: 400;
            color: #333333;
          }
  
          .mark {
            width: 16rpx;
            height: 16rpx;
            background: #D9362D;
            border-radius: 50%;
            margin-left: 12rpx;
            margin-top: 5rpx;
            flex-shrink: 0;
          }
  
        }
  
  
      }
    }
  }
  </style>