<template>
  <JeepayBackground >
		<JeepayCustomNavbar title="应用支付配置" backCtrl="back" />
    <JSearchTitle place="搜索支付方式代码、名称" @click=" () => go.toSearchPage('payPassage', {appId: vdata.searchData.appId})">
      <template #right>
        <view class="pay-type" @tap="single.open(vdata.searchData.wayType)">
			{{ getSearchWayTypeStr() }}
			<image src="/pageDevice/static/devIconImg/icon-arrow-down.svg" mode="scaleToFill" />
        </view>
      </template>
    </JSearchTitle>
	
	<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData" >
		<template #tableBody="{ record }">
			<AppConfigRender :record="record" :configAppId="vdata.searchData.appId" />
		</template>
	</JeepayTableList>
  <JSinglePopup title="请选择支付类型" ref="single" :list="list" @confirm="confirm" />
  </JeepayBackground>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload, onReachBottom  } from '@dcloudio/uni-app'
import { reqLoad, API_URL_PAY_PASSAGE_LIST } from '@/http/apiManager.js'
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'
import infoBox from '@/commons/utils/infoBox.js'
import AppConfigRender from '@/pages/list/render/AppConfigRender.vue'

// 触底刷新
onReachBottom(() => { })

const jeepayTableListRef = ref(null)

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


const vdata = reactive({
  searchData: {},
})
	
onLoad((options) => {
  vdata.searchData.appId = options.appId
})

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


const single = ref(null)
const list = reactive([
  { label: '全部类型', value: '' },
  { label: '微信', value: 'WECHAT' },
  { label: '支付宝', value: 'ALIPAY' },
  { label: '云闪付', value: 'YSFPAY' },
  { label: '银联', value: 'UNIONPAY' },
  { label: '其他', value: 'OTHER' },
])
const confirm = (e) => {
  vdata.searchData.wayType = e.value
  jeepayTableListRef.value.refTable(true)
}


function getSearchWayTypeStr(){
	
	if(!vdata.searchData.wayType){
		return "全部类型"
	}
	return list.filter(r => r.value == vdata.searchData.wayType)[0].label
}

</script>

<style lang="scss" scoped>

  .pay-type {
    display: flex;
    align-items: center;
    margin-left: 40rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #222425;
    image {
      margin-left: 10rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }

</style>
