<template>
  <view class="dividend-list-container">
    <empty-data v-if="isEmpty"></empty-data>
    <mescroll-body
      v-else
      ref="mescrollRef"
      @init="mescrollInit"
      @up="upCallBack"
      @down="downCallBack"
      :up="{
        textNoMore: '--我也是有底线的！--',
      }"
    >
      <block v-for="(item, index) in resultList" :key="index">
        <history-netvalue-item
          :item="item"
          surceType="dividendMethodList"
        ></history-netvalue-item>
      </block>
    </mescroll-body>
  </view>
</template>

<script>
import { dividendList } from "api/my";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      page: 1,
      size: 10,
      resultList: [],
      isInit: true,
      mescroll: null,
      isEmpty: false,
    };
  },
  mounted() {
    this.mescroll = this.$refs.mescrollRef.mescroll;
    console.log("this.mescroll", this.mescroll);
  },
  onShow() {
    // this.loadReaultList();
  },
  methods: {
    async loadReaultList() {
      let res = await dividendList({
        pageNo: this.page,
        pageSize: this.size,
      });
      if (this.page == 1) {
        this.resultList = res.data.dividendRespData;
      } else {
        this.resultList = [...this.resultList, ...res.data.dividendRespData];
      }
      this.resultList.forEach((item) => {
        item.num = (item.totalFundVol * item.netValue).toFixed(2);
      });
      if (this.resultList.length === 0) {
        this.isEmpty = true;
      }
    },
    async mescrollInit() {
      console.log("首次加载");
      await this.loadReaultList();
      this.isInit = false;
      this.mescroll.endSuccess();
    },
    async downCallBack() {
      console.log("下拉刷新回调");
      if (this.isInit) return;
      this.page = 1;
      await this.loadReaultList();
      this.mescroll.endSuccess();
    },
    async upCallBack() {
      console.log("上拉加载回调");
      if (this.isInit) return;
      this.page += 1;
      await this.loadReaultList();
      this.mescroll.endSuccess();
    },
  },
};
</script>

<style lang="scss" scoped>
.dividend-list-container {
  width: 100%;
  height: 100%;
  .item-title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: $uni-title-bg-color;
    display: flex;
    align-content: center;
    justify-content: space-between;
    font-family: PingFangSC-Regular;
    font-size: $uni-font-size-base;
    padding-left: 4%;
    color: $uni-text-title-color;
    // margin-top: 0.1%;
    .right-btn {
      padding-right: 8%;
    }
  }
}
</style>