<script lang="ts" setup>
import {
  appMerchantIndexDataGet,
  appUserUserBalanceDetailBalanceDetailListPost,
  appUserWithdrawalListPost
} from "@/service";
import {useUserStore} from "@/store";
import usePage from "@/hooks/usePage";
import dayjs from "dayjs";
import {Agreement} from "@/constant/enums";
import {nextTick} from "vue";
import Config from "@/config";

const userStore = useUserStore()
const {t} = useI18n()
const tabsList = ref([
  {
    title: t('pages-user.income.index.detailedList'),
    value: 1,
  },
  {
    title: t('pages-user.income.index.withdrawalRecords'),
    value: 2,
  }
])
const currentTab = ref(0)

function getList(pageNum: number, pageSize: number) {
  if (currentTab.value === 0) {
    return new Promise(resolve => {
      appUserUserBalanceDetailBalanceDetailListPost({
        params: {
          pageNum,
          pageSize,
        }
      }).then(res => {
        resolve(res)
      })
    })
  } else {
    return new Promise(resolve => {
      appUserWithdrawalListPost({
        params: {
          pageNum,
          pageSize,
        }
      }).then(res => {
        resolve(res)
      })
    })
  }
}

const {paging, firstLoaded, dataList, queryList} = usePage(getList)
// 加载状态
const loading = ref(true)
const storeInfo = ref({})

onShow(() => {
  nextTick(() => {
    loading.value = true
    // 查询商户首页数据
    appMerchantIndexDataGet({
      body: {
        timeZoneId: dayjs.tz?.guess() || Config.timezone
      }
    }).then(res => {
      console.log('商户首页数据', res)
      storeInfo.value = res.data
    }).finally(() => {
      loading.value = false
    })

    paging.value.refresh()
  })
})

function tabsChange(e: any) {
  currentTab.value = e.index
  paging.value.refresh()
}

function navigateTo(url: string) {
  uni.navigateTo({url})
}
</script>

<template>
  <view>
    <z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <navbar :title="t('pages-user.income.title')"/>
      </template>
      <view class="p-20rpx">
        <view class="relative">
          <image
              class="w-full h-452rpx absolute top-0 left-0"
              src="@img/chef/120.png"
          ></image>
          <view class="relative z-2 w-full h-192rpx px-24rpx flex-center-sb">
            <view>
              <view class="flex items-center">
                <text class="text-28rpx lh-28rpx text-#333">{{ t('pages-user.income.index.walletBalance') }}</text>
                <image
                    class="w-28rpx h-28rpx ml-10rpx"
                    src="@img/chef/121.png"
                    @click="navigateTo('/pages/agreement/index?code='+ Agreement.CHEF_BENEFIT_DESCRIPTION)"
                ></image>
              </view>
              <view class="text-50rpx lh-50rpx text-#333 font-bold mt-33rpx">{{
                  userStore.currenMerchantInfo?.balance || 0
                }}
              </view>
            </view>
            <view
                class="border-#333 border-solid border-1rpx rounded-12rpx center h-60rpx px-15rpx text-30rpx lh-30rpx text-#333"
                @click="navigateTo('/pages-user/pages/income/withdraw')">
              {{ t('pages-user.income.index.withdrawal') }}
            </view>
          </view>
          <view class="relative z-2 w-full h-130rpx px-24rpx bg flex items-center">
            <view class="w-full h-full flex flex-col justify-center">
              <view class="text-26rpx lh-26rpx text-#333">{{ t('pages-user.income.index.accumulatedIncome') }}</view>
              <view class="text-32rpx lh-32rpx text-#333 mt-20rpx">${{ storeInfo?.totalIncome || 0 }}</view>
            </view>
            <view class="w-1rpx h-60rpx rotate-180 bg-#fff"></view>
            <view class="w-full h-full flex flex-col justify-center pl-24rpx">
              <view class="text-26rpx lh-26rpx text-#333">{{ t('pages-user.income.index.toBeCredited') }}</view>
              <view class="text-32rpx lh-32rpx text-#333 mt-20rpx">${{ storeInfo?.waitIncome || 0 }}</view>
            </view>
          </view>
          <view class="relative z-2 w-full h-130rpx px-24rpx bottom-bg flex items-center">
            <view class="w-full h-full flex-col flex justify-center">
              <view class="text-26rpx lh-26rpx text-#333">{{ t('pages-user.income.index.today') }}</view>
              <view class="text-32rpx lh-32rpx text-#333 mt-20rpx">${{ storeInfo?.todayIncome || 0 }}</view>
            </view>
            <view class="w-1rpx h-60rpx rotate-180 bg-#fff"></view>
            <view class="w-full h-full flex-col justify-center flex pl-40rpx">
              <view class="text-26rpx lh-26rpx text-#333">{{ t('pages-user.income.index.yesterday') }}</view>
              <view class="text-32rpx lh-32rpx text-#333 mt-20rpx">${{ storeInfo?.yesterdayIncome || 0 }}</view>
            </view>
            <view class="w-1rpx h-60rpx rotate-180 bg-#fff"></view>
            <view class="w-full h-full flex-col justify-center flex pl-40rpx">
              <view class="text-26rpx lh-26rpx text-#333">{{ t('pages-user.income.index.thisMonth') }}</view>
              <view class="text-32rpx lh-32rpx text-#333 mt-20rpx">${{ storeInfo?.monthIncome || 0 }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="px-100rpx">
        <wd-tabs v-model="currentTab" :line-width="68" animated color="#333" inactiveColor="#666" @change="tabsChange">
          <template v-for="item in tabsList" :key="item.value">
            <wd-tab :title="item.title"></wd-tab>
          </template>
        </wd-tabs>
      </view>

      <view>
        <template v-if="currentTab === 0">
          <template v-for="item in dataList">
            <view class="border-bottom h-134rpx flex flex-col justify-center px-20rpx">
              <view class="flex-center-sb text-28rpx lh-28rpx text-#333 mb-16rpx">
                <view class="">{{ item.balanceTypeSpec }}</view>
                <view class="">{{ item.changeType === 1 ? '+' : '-' }} {{ item.changeAmount }}</view>
              </view>
              <view class="flex-center-sb text-24rpx lh-24rpx text-#666">
                <view class="">{{ dayjs(Number(item.createTime)).format('YYYY.MM.DD') }}</view>
                <view class="">{{ t('common.balance') }}：{{ item.afterChangeAmount }}</view>
              </view>
            </view>
          </template>
        </template>
        <template v-if="currentTab === 1">
          <template v-for="item in dataList">
            <view class="border-bottom h-134rpx flex-center-sb px-20rpx"
                  @click="navigateTo('/pages-user/pages/income/record-detail?id=' + item.id)">
              <view class="flex-1">
                <view class="flex-center-sb text-28rpx lh-28rpx text-#333 mb-16rpx">
                  <view class="">{{ item.bankName }}({{ item.card }})</view>
                  <view class="">-{{ item.withdrawalAmount }}</view>
                </view>
                <view class="flex-center-sb text-24rpx lh-24rpx text-#666">
                  <view class="">{{ dayjs(Number(item.createTime)).format('YYYY.MM.DD') }}</view>
                  <view v-if="item.status === 1" class="">{{ t('pages-user.store-settle-in.audit.submitted') }}</view>
                  <view v-if="item.status === 2" class="text-#00A76D">{{
                      t('pages-user.store-settle-in.audit.pass')
                    }}
                  </view>
                  <view v-if="item.status === 3" class="text-#FF1212">{{
                      t('pages-user.store-settle-in.audit.reject')
                    }}
                  </view>
                </view>
              </view>
              <image
                  class="w-12rpx h-20rpx shrink-0 ml-14rpx"
                  src="@img/chef/100202.png"
              ></image>
            </view>
          </template>
        </template>
      </view>
    </z-paging>
  </view>
</template>

<style>
page {
  background-color: white;
}
</style>

<style lang="scss" scoped>
.bg {
  background: linear-gradient(269deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 99%);
}

.bottom-bg {
  border-radius: 0 0 16rpx 16rpx;
  background: linear-gradient(91deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 99%);
}
</style>