<route lang="json5">
  {
    layout: 'tabbar',
    style: {
      navigationBarTitleText: '%income.title%',
      navigationBarBackgroundColor: '#fff',
    },
  }
  </route>

<script lang="ts" setup>
// eslint-disable-next-line unused-imports/no-unused-imports
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app' // 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'

import { getEnum as _getEnum } from '@/api/common'
import { getAccountInfo as _getAccountInfo, envelopeList } from '@/api/wallet'
import { useUserStore } from '@/store/user'
import { formatNumber } from '@/utils'
import { toPage } from '@/utils/page'

defineOptions({
  name: 'Income', // 收益
})

// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)

const dayType = ref(1)

const userStore = useUserStore()
const isLoggedIn = computed(() => !!userStore.token)

// 搜索结果
const statusEnum = ref<any[]>([])
const typeEnum = ref<any[]>([])
const dataList = ref([])
const walletInfo = ref<any>({})
async function getEnum(id: number) {
  const res = await _getEnum({ id })
  if (id === 4) {
    statusEnum.value = res.data
  }
  else if (id === 5) {
    typeEnum.value = res.data
  }
}
async function getAccountInfo() {
  if (!isLoggedIn.value)
    return
  const res = await _getAccountInfo()
  console.log(res)
  if (res.code === '200') {
    walletInfo.value = res.data
  }
}
async function queryList(pageNo: number, pageSize: number) {
  if (!isLoggedIn.value) {
    paging.value.complete([])
    return
  }
  const data = {
    page: pageNo,
    size: pageSize,
    type: dayType.value,
  }
  try {
    const res = await envelopeList(data)
    paging.value.complete(res.data.list)
  }
  catch (error) {
    paging.value.complete(false)
  }
}
onShow(() => {
  getEnum(4)
  getEnum(5)
  if (isLoggedIn.value) {
    getAccountInfo()
  }
  else {
    walletInfo.value = {}
    paging.value?.complete([])
  }
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" use-page-scroll @on-refresh="getAccountInfo" @query="queryList">
    <view class="px-24rpx pb-24rpx">
      <view
        class="mb-20rpx rounded-16rpx pb-28rpx pt-44rpx text-white"
        style="background: linear-gradient( 55deg, #343434 0%, #101010 100%);"
      >
        <view class="mb-50rpx flex items-center text-center">
          <view class="flex-1">
            <view class="mb-3px text-22rpx">
              {{ $t('income.totalEarnings') }}
            </view>
            <view class="text-40rpx font-bold">
              {{ formatNumber(walletInfo.totalEarnings) }}
            </view>
          </view>
          <view class="flex-1">
            <view class="mb-3px text-22rpx">
              {{ $t('income.accountBalance') }}
            </view>
            <view class="text-40rpx font-bold">
              <text>{{ formatNumber(walletInfo.balance) }}</text>
            </view>
          </view>
        </view>
        <view class="flex items-center text-center">
          <view class="flex-1">
            <view class="mb-3px text-22rpx">
              <text class="mr-3px">
                {{ $t('income.settledAmount') }}
              </text>
              <wd-icon name="help-circle" size="20rpx" />
            </view>
            <view class="text-40rpx font-bold">
              {{ formatNumber(walletInfo.settledAmount) }}
            </view>
          </view>
          <wd-divider dashed custom-class="h-60rpx!" color="#A4A4A4" vertical />
          <view class="flex-1">
            <view class="mb-3px text-22rpx">
              <text class="mr-3px">
                {{ $t('income.pendingAmount') }}
              </text>
              <wd-icon name="help-circle" size="20rpx" />
            </view>
            <view class="text-40rpx font-bold">
              {{ formatNumber(walletInfo.pendingAmount) }}
            </view>
          </view>
        </view>
      </view>
      <view class="mb-20rpx rounded-16rpx bg-white py-24rpx text-center">
        <view class="flex items-center justify-between">
          <view class="flex-[33.33%]">
            <view class="mb-3px text-22rpx text-#5B5B5B">
              {{ $t('income.tdEarnings') }}
            </view>
            <view class="text-26rpx font-bold">
              {{ formatNumber(walletInfo.tDEamings) }}
            </view>
          </view>
          <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
          <view class="flex-[33.33%]">
            <view class="mb-3px text-22rpx text-#5B5B5B">
              {{ $t('income.ydEarnings') }}
            </view>
            <view class="text-26rpx font-bold">
              {{ formatNumber(walletInfo.yDEamings) }}
            </view>
          </view>
          <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
          <view class="flex-[33.33%]">
            <view class="mb-3px text-22rpx text-#5B5B5B">
              {{ $t('income.mtdEarnings') }}
            </view>
            <view class="text-26rpx font-bold">
              {{ formatNumber(walletInfo.mTDEamings) }}
            </view>
          </view>
        </view>
      </view>
      <view class="mb-20rpx flex items-center justify-between gap-22rpx text-center text-32rpx">
        <view class="flex-1 rounded-16rpx bg-[rgba(var(--wot-color-theme-rgb),0.5)] py-32rpx shadow-[4rpx_4rpx_8rpx_0rpx_rgba(0,0,0,0.5)]" @click="toPage({ url: '/pages/myOrders/myOrders' })">
          <text class="pr-16rpx">
            {{ $t('income.myGroupData') }}
          </text>
          <wd-icon name="chevron-right-circle" size="32rpx" />
        </view>
        <view class="flex-1 rounded-16rpx bg-#FEE750/50 py-32rpx shadow-[4rpx_4rpx_8rpx_0rpx_rgba(0,0,0,0.5)]" @click="toPage({ url: '/pages/wallet/withdraw', params: { balance: walletInfo.balance, type: 2 } })">
          <text class="pr-16rpx">
            {{ $t('income.withdrawNow') }}
          </text>
          <wd-icon name="chevron-right-circle" size="32rpx" />
        </view>
      </view>
      <view>
        <view class="mb-20rpx text-32rpx">
          {{ $t('income.revenueRecord') }}
        </view>
        <view class="mb-20rpx">
          <wd-radio-group v-model="dayType" shape="button" @change="() => queryList(1, 20)">
            <wd-radio :value="1">
              {{ $t('income.filter.dt') }}
            </wd-radio>
            <wd-radio :value="2">
              {{ $t('income.filter.yt') }}
            </wd-radio>
            <wd-radio :value="3">
              {{ $t('income.filter.l7d') }}
            </wd-radio>
            <wd-radio :value="4">
              {{ $t('income.filter.mtd') }}
            </wd-radio>
            <wd-radio :value="5">
              {{ $t('income.filter.ytd') }}
            </wd-radio>
          </wd-radio-group>
        </view>
        <view class="rounded-16rpx bg-white px-20rpx">
          <view
            v-for="(item, index) in dataList" :key="item.id" class="py-20rpx"
            :class="{ 'border-b-1 border-b-solid border-b-#e8e8e8': index !== dataList.length - 1 }"
          >
            <view class="mb-8rpx flex items-center justify-between text-24rpx">
              <text class="truncate">
                {{ typeEnum.find(i => i.code === item.bizType)?.name }}：{{ item.orderNo }}
              </text>
              <text class="flex-shrink-0 pl-16rpx">
                ৳ {{ formatNumber(item.amount) }}
              </text>
            </view>
            <view class="flex items-center justify-between text-22rpx">
              <text class="text-#5B5B5B">
                {{ item.transTime }}
              </text>
              <wd-text :type="item.status === 2 ? 'success' : 'primary'" :text="statusEnum.find(i => i.code === item.status)?.name" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
  <!-- 在页面最下方添加占位视图，高度等于 tabBar 的高度 -->
  <!-- <view class="edgeInsetBottom" /> -->
</template>

<style lang="scss" scoped>
:deep(.wd-radio-group) {
  background: transparent;

  .wd-radio.is-button.is-checked {
    .wd-radio__label {
      background: #ff334a !important;
      border-color: #ff334a !important;
      color: #fff !important;
    }
  }

  .wd-radio__label {
    width: 100rpx !important;
    min-width: 100rpx !important;
    max-width: 100rpx !important;
    height: 36rpx !important;
    line-height: 36rpx !important;
    padding: 0 !important;
    font-size: 22rpx !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(151, 151, 151, 0.2) !important;
  }
}
</style>
