<template>
  <view>
    <view class="container">
      <view v-if="list.status !== 'empty'">
        <view class="record" v-for="(item, index) in list.data" :key="item.id">
          <view class="left">
            <view class="title">{{ titleMap[item.points_type] }}</view>
            <view class="date">{{ item.created }}</view>
          </view>
          <view class="right">
            <image mode="aspectFill" class="icon" src="/static/icon/ic_jifen@2x.png" />
            <view class="number" v-if="item.status === 1">+ {{ getPrice(item.original_trans_amount) }}</view>
            <view class="number" v-if="item.status === 2">- {{ getPrice(item.original_trans_amount) }}</view>
          </view>
        </view>
        <LoadMore :status="list.status" />
      </view>

      <view v-if="list.status === 'empty'" class="data_none">
        <view style="height: 228rpx" />
        <image mode="aspectFill" class="data_img" src="/static/pic_wushuju@2x.png" />
        <view class="data_title">暂无数据</view>
      </view>
    </view>
  </view>
</template>

<script>
import { createList, getList } from '@/utils/list';
import { titleMap, record } from '@/pages/mine-integral-bonus/mock';
import LoadMore from '@/components/LoadMore';

export default {
  components: { LoadMore },
  data() {
    return {
      record: [],
      titleMap,
      show: false,

      list: createList(),
    };
  },

  onLoad(query) {
    // this.record = record;
    this.fetchList();
  },

  async onPullDownRefresh() {
    this.list = createList();
    await this.fetchList();
    uni.stopPullDownRefresh();
  },

  onReachBottom() {
    this.fetchList();
  },

  methods: {
    async fetchList() {
      await getList(this, 'list', ['/api/app/pointsrecord/list', {}]);
      console.log(this.list);
    },
  },
};
</script>

<style scoped lang="scss">
@import 'index.scss';
</style>
