<template>
  <view class="page-wrapper">
	<JeepayCustomNavbar title="红包记录" backCtrl="back" />
	
	<!-- 搜索 -->
	<JSearchTitle place="搜索流水号、店铺ID" @click="go.toSearchPage('redRechargeRecord')">
	  <template #right>
		<JeepaySearchSelect v-model:bizType="vdata.searchData.type" :list="vdata.searchParamsList" title="按变动类型筛选" @change="refTable"/>
	  </template>
	</JSearchTitle>
	
	<!-- 数据列表 -->
	<JeepayTableList ref="jeepayTableListRef" :searchData="vdata.searchData" :reqTableDataFunc="reqTableDataFunc">
		<template #tableBody="{ record }">
			<RedRechargeRecordRender :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_MCH_REF_PACKET_CHANGE } from "@/http/apiManager.js"
import RedRechargeRecordRender from '@/pageRed/list/render/RedRechargeRecordRender.vue'

const jeepayTableListRef = ref()

onReachBottom(() => { })

const vdata = reactive({
	searchData: { type: '' },
	searchParamsList: [
	  { label: '全部类型', value: '' },
	  { label: '下单奖励', value: '1' },
	  { label: '消费退款', value: '2' },
	]
})

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

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

// 请求
function reqTableDataFunc (params) {
    return reqLoad.list(API_URL_MCH_REF_PACKET_CHANGE, 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>
