<template>
  <z-paging
    ref="pagingRef"
    v-model="incomeList"
    :paging-style="{'top': '0'}"
    empty-view-text="您还没有获得收益"
    loading-more-no-more-text="到底了，没有更多了"
    class="Mall4j page-income-details"
    @query="onLoadPageData"
  >
    <!-- 总收益 -->
    <view class="total-revenue">
      <view class="bg" />
      <view class="text-box">
        <view class="text">
          历史总收益(元)
        </view>
        <view class="price">
          {{ wxs.parsePrice(accumulateAmount)[0] }}.{{ wxs.parsePrice(accumulateAmount)[1] }}
        </view>
      </view>
      <view
        class="withward"
        @tap="onToWithdrawal"
      >
        申请提现
      </view>
    </view>

    <!-- 数据 -->
    <view class="number-box">
      <view class="item">
        <view class="price">
          {{ wxs.parsePrice(settledAmount)[0] }}.{{ wxs.parsePrice(settledAmount)[1] }}
        </view>
        <view class="text">
          可提现余额(元)
        </view>
      </view>
      <view class="item">
        <view class="price">
          {{ wxs.parsePrice(unsettledAmount)[0] }}.{{ wxs.parsePrice(unsettledAmount)[1] }}
        </view>
        <view class="text">
          待结算收益(元)
        </view>
      </view>
      <view class="item">
        <view class="price">
          {{ wxs.parsePrice(todayAmount)[0] }}.{{ wxs.parsePrice(todayAmount)[1] }}
        </view>
        <view class="text">
          本月收益(元)
        </view>
      </view>
      <view class="item">
        <view class="price">
          {{ wxs.parsePrice(monthAmount)[0] }}.{{ wxs.parsePrice(monthAmount)[1] }}
        </view>
        <view class="text">
          今日收益(元)
        </view>
      </view>
    </view>

    <!-- 明细 -->
    <view
      v-if="incomeList.length"
      class="details"
    >
      <block
        v-for="(item, id) in incomeList"
        :key="id"
      >
        <view class="item">
          <view class="left">
            <view
              v-if="item.incomeType === 0"
              class="origin"
            >
              {{ $t('distribution.other') }}
            </view>
            <view
              v-if="item.incomeType === 1"
              class="origin"
            >
              {{ $t('distribution.reward1') }}
            </view>
            <view
              v-if="item.incomeType === 2"
              class="origin"
            >
              {{ $t('distribution.reward2') }}
            </view>
            <view
              v-if="item.incomeType === 3"
              class="origin"
            >
              {{ $t('distribution.reward3') }}
            </view>
            <view
              v-if="item.incomeType === 4"
              class="origin"
            >
              {{ $t('distribution.reward4') }}
            </view>
            <view class="time">
              {{ item.updateTime }}
            </view>
          </view>
          <view class="right">
            <view
              v-if="item.state === -1"
              class="number"
            >
              {{ wxs.parsePrice(item.incomeAmount)[0] }}.{{ wxs.parsePrice(item.incomeAmount)[1] }}
            </view>
            <view
              v-else
              :class="['number',item.incomeType === 4?'gray':'red']"
            >
              <span v-if="item.incomeAmount>0">+</span>{{ wxs.parsePrice(item.incomeAmount)[0] }}.{{ wxs.parsePrice(item.incomeAmount)[1] }}
            </view>
            <view
              v-if="item.incomeType !== 4"
              class="state red"
            >
              {{ item.state===-1?$t('distribution.incomeExpired'):(item.state===2?$t('distribution.settled'):$t('distribution.unsettlement')) }}
            </view>
          </view>
        </view>
      </block>
    </view>
  </z-paging>
</template>

<script setup>
const wxs = number()

const paySettlementType = uni.getStorageSync('cloudPaySettlementType') // 1:通联支付

onLoad(() => {
  onGetDisIncomeData()
})

onShow(() => {
  // 头部导航标题
  uni.setNavigationBarTitle({
    title: $t('distribution.incomeBreakdown')
  })
  // 获取钱包数据
  onGetDisWalletData() // 获取收益数据
})

// 获取我的钱包信息
const unsettledAmount = ref(0) // 待结算金额
const settledAmount = ref(0) // 可提现金额
const accumulateAmount = ref(0) // 累计收益
const onGetDisWalletData = () => {
  http.request({
    url: '/tmerclub_marketing/distribution_user_wallet',
    method: 'GET'
  }).then(res => {
    unsettledAmount.value = res.unsettledAmount
    settledAmount.value = res.settledAmount
    accumulateAmount.value = res.accumulateAmount
  })
}
// 获取用户本月收益和今日收益
const monthAmount = ref(0) // 本月收益
const todayAmount = ref(0) // 今日收益
const onGetDisIncomeData = () => {
  http.request({
    url: '/tmerclub_marketing/distribution_user_income/statistics',
    method: 'GET'
  }).then(res => {
    todayAmount.value = res.todayAmount
    monthAmount.value = res.monthAmount
  })
}

// 收入列表
const pagingRef = ref(null)
const incomeList = ref([])
const onLoadPageData = (pageNum, pageSize) => {
  http.request({
    url: '/tmerclub_marketing/distribution_user_income/page',
    method: 'GET',
    data: {
      pageNum,
      pageSize
    }
  }).then(res => {
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(res.list)
  })
}

// 去提现
const onToWithdrawal = () => {
  if (paySettlementType === 1) {
    // 开启通联支付下，跳转到通联支付提现页面
    uni.navigateTo({
      url: '/package-activities/pages/allinpay-withdrawal/allinpay-withdrawal'
    })
    return
  }
  uni.navigateTo({
    url: '/package-activities/pages/withdrawal/withdrawal'
  })
}

</script>

<style lang="scss" scoped>
@use "./income-details.scss";
</style>
