<template>
  <div class="list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="list.length ? $t('common.l46') : ''"
        @load="getNoticeList"
      >
        <div class="item" v-for="item in list" :key="item.noticeId">
          <div class="title">{{ item.title }}</div>
          <div class="time">{{ item.time }}</div>
        </div>
      </van-list>
      <NoData v-if="!loading && list.length == 0"/>
    </van-pull-refresh>
  </div>
</template>
<script>
import { getNoticeList } from "@/api/market";
export default {
  props: ['symbolInfo'],
  data () {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      total: 0,
      pageNum: 0,
      pageSize: 10,
    }
  },
  methods: {
    operationShow(item) {
      this.targetInfo = item;
      this.operationPopupShow = true;
    },
    getNoticeList() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.pageNum += 1;
      getNoticeList({
        symbol: this.symbolInfo.symbol,
        market: this.symbolInfo.market,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        if (Array.isArray(res)) {
          this.loading = false;
          this.finished = true;
          return
        }
        if (this.pageNum == 1) {
          this.list = res.list || []
        } else {
          this.list = this.list.concat(res.list || [])
        }
        this.total = res.total
        this.loading = false;
        if (this.list.length >= res.total) {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      })
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.pageNum = 0;
      this.getNoticeList();
    }
  },
}
</script>
<style lang="less" scoped>
.list {
  padding-top: 12px;
}
.van-pull-refresh {
  height: calc(100vh - 130px);
  overflow-y: auto;
  padding: 12px 18px 0;
}
.item {
  cursor: pointer;
  padding: 17px 0;
  border-bottom: 1px solid rgba(210,217,227,0.26);
  .title {
    color: var(--color-1-);
    line-height: 20px;
    margin-bottom: 8px;
  }
  .time {
    height: 1;
    font-size: 12px;
    color: #A6A6A6;
  }
}
</style>