<template>
  <view class="px-30rpx pt-20rpx">
    <!--  -->
    <view class="text-txBase text-lg grid grid-cols-3 gap-y-20rpx bg-white  box-shadow  mb-base py-30rpx">
      <view class="flex text-txBase items-center justify-center flex-col">
        <view class="text-lg ">{{info.pre|numFormat}}</view>
        <view class="mt-10rpx text-lg">预收益</view>
      </view>
      <view class="flex text-txBase items-center justify-center flex-col">
        <view class="text-lg">{{info.receive |numFormat}}</view>
        <view class="mt-10rpx text-lg">已获得</view>
      </view>
      <view class="flex text-txBase items-center justify-center flex-col">
        <view class="text-lgprice-text">{{info.total |numFormat}}</view>
        <view class="mt-10rpx ">总收益和</view>
      </view>
    </view>
    <!--  -->
    <view
      class="sticky top-0 z-1500 bg-hex-F5F5F5 rounded-full grid grid-cols-3 text-28rpx text-hex-333 leading-40rpx py-10rpx">
      <view class="text-center">备注</view>
      <view class="text-center">返利</view>
      <view class="text-center">状态</view>
    </view>
    <mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
      :down="downOption" :up="upOption">
      <block v-for="(item,index) in dataList" :key="index">
        <view class="grid grid-cols-3 text-28rpx text-h666 py-18rpx mt-16rpx " @tap="show=true,selOrder=item.order">
          <view class="text-center line-1  h-full" v-if="item.order">
            {{item.order.sn}}
          </view>
          <!-- <view class="text-center line-1 ">{{item.created_at*1000 | date('yyyy-mm-dd')}}</view> -->
          <view class="text-center price-text">{{item.money}}</view>
          <view class="text-center ">{{item.status_text}}</view>
        </view>
        <u-line></u-line>
      </block>
    </mescroll-body>
    <!-- 备注弹窗 -->
    <cu-modal v-model="show" title="详情">
      <view class="p-base mt-10rpx" v-if="!!selOrder">
        <view>
          <text class="font-extrabold">订单号：</text>
          <text>{{selOrder.sn}}</text>
        </view>
        <view>
          <text class="font-extrabold">总金额：</text>
          <text class="price-text">{{selOrder.total_amount}}</text>
        </view>
        <view>
          <text class="font-extrabold">时&nbsp;&nbsp;&nbsp;间：</text>
          <text>{{selOrder.created_at*1000 | date('yyyy-mm-dd')}}</text>
        </view>

      </view>
    </cu-modal>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        info: {},
        show: false,
        selOrder: null,
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1,
        },
        dataList: [], //获取到的数据
      };
    },
    filters: {
      StatusText(value) {
        const status = [{
          value: 0,
          label: '待付款'
        }, {
          value: 1,
          label: ' 付款中'
        }, {
          value: 2,
          label: '已付款'
        }, , {
          value: 3,
          label: '付款失败'
        }]
        const obj = status.find((e) => e?.value == value) ?? {}
        return obj?.label ?? value
      }
    },
    computed: {
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 44 + 'px';
      },
    },
    onLoad() {
      this.getDate()
    },
    methods: {
      async getDate() {
        const res = await this.$api.get('/v1/profit/total')
        this.info = res
      },
      downCallback() {
        this.mescroll.resetUpScroll();
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        this.$api.get(`/v1/profit`, {
          params: {
            page: page.num,
            per_page: page.size
          }
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (page.num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data, );
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
    }
  }
</script>

<style lang="scss">
  page {
    background: #ffffff;
  }

  .box-shadow {
    box-shadow: 0px 2rpx 10rpx rgba(0, 0, 0, 0.15);
    border-radius: 15rpx;
  }

  .word-break {
    word-break: break-word; //文本超出 自动换行
  }
</style>
