<template>
  <view class="page-wrapper">
		<JeepayCustomNavbar title="会员管理" backCtrl="back" />
    <view class="sta-input" @tap="go.toSearchPage('member')">
      <view class="input-main">
        <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
        搜索会员名称、手机号
      </view>
      <!-- <image class="icon-more" src="/static/iconImg/icon-more.svg" mode="scaleToFill" /> -->
    </view>
	
	
	<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc">
		<template #tableBody="{ record }">
			<MemberRender :record="record" />
		</template>
	</JeepayTableList>
	
    <view class="footer-wrapper">
      <view class="footer-button footer-button-style">
        <button hover-class="hover-button" hover-stay-time="150" class="flex-center" @tap="createMember">创建会员</button>
      </view>
    </view>
  </view>
  
  <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
  
  
</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_MEMBERS } from "@/http/apiManager.js"
import MemberRender from '@/pages/list/render/MemberRender.vue'

const jeepayTableListRef = ref()
const jeepayPopupConfirmRef = ref()

onReachBottom(() => { })

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

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


// 创建会员
const createMember = () => {
  go.to("PAGES_MEMBER_EDIT")
}

	
</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>
