<template>
  <scroll-view style="height:100%;" scroll-y refresher-enabled="true" refresher-background="none" :refresher-threshold="100" :refresher-triggered="refreshTriggered" @refresherrefresh="refresh" @scrolltolower="getData">
    <view class="notice-container">
      <view class="card">
        <view class="card-content">
          <view v-for="(item, index) in list" :key="index" class="notice-item flex-row">
            <image src="/static/icon/icon-notice.png" />
            <view class="notice-content">
              <view class="title">{{item.notice_title}}</view>
              <text class="content">{{item.notice_content}}</text>
              <view class="link" @click="openApp(item.notice_link)">{{item.notice_link_name}}</view>
              <view class="time">{{formatTime(item.notice_time)}}</view>
            </view>
          </view>
        </view>
        <view class="load-more">
          <u-loadmore :status="loadStatus" loading-icon="semicircle" />
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { app } from '@/utils/api'

export default {
  props: {
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: [],
      page: 1,
      loaded: false,
      refreshTriggered: false,
      loadStatus: 'loadmore'
    }
  },
  methods: {
    init() {
      if (this.loaded === false) {
        this.getData()
      }
    },
    async getData() {
      if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
        return
      }
      this.loadStatus = 'loading'
      await app.noticeList(this.type, this.page).then(res => {
        if (res.code == 1) {
          if (res.data.page < res.data.page_total) {
            this.loadStatus = 'loadmore'
            this.page++
          } else {
            this.loadStatus = 'nomore'
          }
          this.list = this.list.concat(res.data.list)
          this.loaded = true
        } else {
          this.loadStatus = 'loadmore'
        }
      }).catch(e => {
        this.loadStatus = 'loadmore'
      })
      this.refreshTriggered = false
    },
    refresh() {
      this.refreshTriggered = true
      this.loadStatus = 'loadmore'
      this.page = 1
      this.list = []
      this.getData()
    }
  }
}
</script>

<style lang="scss">
.notice-container {
  padding: 15px;
  .notice-item {
    margin-bottom: 15px;
    &:last-child {
      margin: 0;
    }
    uni-image {
      width: 24px;
      height: 24px;
    }
    .notice-content {
      margin-left: 10px;
      padding-bottom: 15px;
      flex: 1 1 0%;
      border-bottom: 1px solid #e8e9ec;
      .title {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 700;
        color: #1a1a2a;
        line-height: 20px;
      }
      .content {
        font-size: 14px;
        font-weight: 400;
        color: #1a1a2a;
        line-height: 20px;
      }
      .link {
        margin-top: 15px;
        font-size: 13px;
        color: $uni-color-primary;
      }
      .time {
        font-size: 12px;
        font-weight: 400;
        color: #91919b;
        margin-top: 10px;
      }
    }
  }
}
</style>