<template>
  <view class="page-wrapper">
	<JeepayCustomNavbar title="账户流水" backCtrl="back" />
	
	<!-- 搜索 -->
	<JSearchTitle place="搜索" @click="go.toSearchPage('memberAccountHistory')">
	  <template #right>
		<JeepaySearchSelect v-model:bizType="vdata.searchData.bizType" :list="vdata.bizTypeList" title="按业务类型筛选" @change="refTable"/>
	  </template>
	</JSearchTitle>
	
	
	<JeepayTableList ref="jeepayTableListRef" :searchData="vdata.searchData" :reqTableDataFunc="reqTableDataFunc">
		<template #tableBody="{ record }">
			<MemberAccountHistoryRender :record="record" />
		</template>
	</JeepayTableList>
	
  </view>
  
</template>


<script setup>
import { nextTick, reactive, ref } from "vue"
import { onReachBottom, onShow, onUnload } from '@dcloudio/uni-app'
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'
import { reqLoad, API_URL_MEMBER_ACCOUNT_HISTORY } from "@/http/apiManager.js"
import MemberAccountHistoryRender from '@/pages/list/render/MemberAccountHistoryRender.vue'

const jeepayTableListRef = ref()

const vdata = reactive({
	searchData: { bizType: '' },
	bizTypeList: [
	  { label: '全部业务类型', value: '' },
	  { label: '支付充值', value: '1' },
	  { label: '现金充值', value: '2' },
	  { label: '会员消费', value: '3' },
	  { label: '消费退款', value: '4' },
	  { label: '人工调账', value: '5' },
	]
})

onReachBottom(() => { })

// // 监听 更新事件 
onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_ACCOUNT_HISTORY_LIST))
uni.$on(emit.ENAME_REF_MEMBER_ACCOUNT_HISTORY_LIST, function(data){
	jeepayTableListRef.value.refTable(true)
})

function refTable (e) {
	jeepayTableListRef.value.refTable(true)
}

// 请求
function reqTableDataFunc (params) {
    return reqLoad.list(API_URL_MEMBER_ACCOUNT_HISTORY, params)
}

</script>

<style lang="scss" scoped>
.sta-input {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  height: 110rpx;
  background-color: $J-bg-ff;
  .input-main {
    flex: 1;
    display: flex;
    align-items: center;
    height: 70rpx;
    background-color: $J-bg-f5;
    border-radius: $J-b-r12;
    color: rgba(0, 0, 0, 0.35);
    font-size: 27rpx;
    font-weight: 400;
    image {
      padding: 22rpx;
      width: 26rpx;
      height: 26rpx;
    }
  }
  .icon-more {
    margin-left: 30rpx;
    width: 70rpx;
    height: 70rpx;
  }
}
.footer-wrapper {
  height: 170rpx;
  background-color: transparent;
  .footer-button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30rpx;
    button {
      height: 110rpx;
      font-size: 33rpx;
      font-weight: 500;
      color: $J-color-tff;
      border-radius: 20rpx;
      background: $jeepay-bg-primary;
    }
    .hover-button {
      opacity: 0.5;
    }
  }
}
</style>
