<script setup lang="ts">
import yearMoth from './components/year-moth.vue';
import chooseType from './components/choose-type.vue';
import {appUserUserBalanceDetailBalanceDetailListPost} from "@/service";
import {useUserStore} from "@/store";
import {formatTimestampWithMonthName} from "@/utils/utils";
const { t } = useI18n();
import {Agreement} from "@/constant/enums";
const userStore = useUserStore()

// 时间筛选参数
const createBeginTime = ref('');
const createEndTime = ref('');

const { paging, dataList, queryList } = usePage((pageNum: number, pageSize: number) =>
    appUserUserBalanceDetailBalanceDetailListPost({
      params: {
        pageNum,
        pageSize,
        createBeginTime: createBeginTime.value ? createBeginTime.value : '',
        createEndTime: createEndTime.value ? createEndTime.value : '',
        balanceTypeList: balanceTypeList.value.length > 0 ? balanceTypeList.value : [],
      },
    }),
);

const yearMothRef = ref();
const chooseTypeRef = ref();

function handleClickLeft() {
  uni.navigateBack()
}
function navigateTo(url: string) {
  uni.navigateTo({
    url,
  });
}

// 打开日期选择弹出框
function openDatetimePicker() {
  yearMothRef.value.onOpen();
}

// 打开类型选择弹出框
function openChooseType() {
  chooseTypeRef.value.onOpen();
}

const balanceTypeList = ref([])
const chooseTypeStr = ref(null)
function handleChooseTypeConfirm(data: { code: string; name: string }) {
  console.log(data);
  balanceTypeList.value = [data.code];
  chooseTypeStr.value = data.name
  paging.value?.refresh();
}

// 处理年月选择确认
function handleDateConfirm(data: { createBeginTime: string; createEndTime: string }) {
  createBeginTime.value = data.createBeginTime;
  createEndTime.value = data.createEndTime;
  console.log('更新时间筛选参数:', data);
  // 重新加载数据
  paging.value?.refresh();
}

onShow(()=> {
  userStore.getUserInfo()
})
</script>

<template>
  <view class="bg-#F6F6F6">
    <image src="@img/chef/107.png" class="w-full h-472rpx"></image>
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <wd-navbar
            safeAreaInsetTop
            :fixed="true"
            :placeholder="true"
            :bordered="false"
            custom-class="!bg-transparent"
            @click-left="handleClickLeft"
        >
          <template #title>
            <text class="text-34rpx text-#fff !font-400">{{ t('pages-user.balance.title') }}</text>
          </template>
          <template #left>
            <view class="shrink-0">
              <view class="i-carbon:chevron-left text-50rpx text-#fff ml-[-10rpx]"></view>
            </view>
          </template>
        </wd-navbar>
        <view class="h-254rpx box z-9 mx-18rpx mt-18rpx px-40rpx py-52rpx">
          <view @click="navigateTo('/pages/agreement/index?code=' + Agreement.BALANCE_EXPLANATION)" class="flex items-center">
            <text class="text-28rpx text-#333">{{ t('pages-user.balance.my-balance') }}：</text>
            <image src="@img/chef/108.png" class="w-28rpx h-28rpx shrink-0"></image>
          </view>
          <view class="flex-center-sb">
            <view class="text-58rpx lh-58rpx text-#333 font-bold mt-46rpx">{{ userStore.userInfo?.balance }}</view>
            <wd-button @click="navigateTo('/pages-user/pages/recharge/index')" custom-class="!min-w-160rpx !h-64rpx !rounded-20rpx !bg-#00A76D">{{ t('common.recharge') }}</wd-button>
          </view>
        </view>
      </template>
      <view class="px-18rpx">
        <view class="bg-white rounded-36rpx overflow-hidden mt-18rpx py-30rpx">
          <view class="flex-center-sb pr-20rpx mb-8rpx">
            <view class="flex items-center">
              <view class="w-8rpx h-30rpx bg-#00A76D"></view>
              <text class="ml-10rpx text-34rpx text-#333">{{ t('pages-user.balance.detail-list') }}</text>
            </view>
            <view class="flex items-center">
              <view @click="openDatetimePicker" class="flex items-center mr-18rpx text-26rpx text-#000 bg-#F6F6F6 rounded-full px-14rpx py-10rpx">
                {{ t('pages-user.balance.month-filter') }}
                <image src="@img/chef/101.png" class="w-20rpx h-20rpx shrink-0 ml-8rpx"></image>
              </view>
              <view @click="openChooseType" class="flex items-center text-26rpx text-#000 bg-#F6F6F6 rounded-full px-14rpx py-10rpx">
                {{ chooseTypeStr ? chooseTypeStr : t('pages-user.balance.all') }}
                <image src="@img/chef/101.png" class="w-20rpx h-20rpx shrink-0 ml-8rpx"></image></view>
            </view>
          </view>
          <view class="px-20rpx">
            <template v-for="item in dataList">
              <view class="w-full border-bottom py-28rpx box-border">
                <view class="flex-center-sb text-#140005 text-28rpx leading-28rpx mb-14rpx">
                  <view>{{ item.balanceTypeSpec }}</view>
                  <view>{{ item.changeType === 1 ? '+' : '-' }}{{ item.changeAmount }}</view>
                </view>
                <view class="flex-center-sb text-#999 text-24rpx leading-24rpx">
                  <view>{{ formatTimestampWithMonthName(item.createTime) }}</view>
                  <view>{{ t('common.balance') }}：{{ item.afterChangeAmount }}</view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>
    </z-paging>
    <year-moth ref="yearMothRef" @confirm="handleDateConfirm" />
    <choose-type ref="chooseTypeRef" @confirm="handleChooseTypeConfirm" />
  </view>
</template>

<style scoped lang="scss">
.box {
  border-radius: 16rpx;
  background: linear-gradient(198deg, #D0F4E8 -8%, #FFFFFF 37%, #FFFFFF 56%, #FFFFFF 76%);
  box-sizing: border-box;
  border: 2rpx solid #FFFFFF;
}
</style>