<!--

  订单列表页面， 数据渲染 
   业务： 应用配置信息

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/12/02 16:57
-->
<template>
	
	<JeepayTableListItem :title="props.record.wayName" :subtitle="props.record.wayCode" @tap="openConfig">
		<template #titleRight>
			<view v-if="props.record.isConfig" class="state-dot state-dot-enable">已配置</view>
			<view v-else class="state-dot state-dot-disable">未配置</view>
		</template>
	</JeepayTableListItem>
   
   <!-- 选择支付 接口 -->
   <JeepayPopupListSelect
     ref="selectIfcodeRef"
     title='请选择支付渠道'
     :reqTableDataFunc="reqTableDataByIfcodeFunc"
     :fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
	 @confirm="confirmFunc"
   >
   
   <!-- 小程序， 插槽不生效， 待排查！  TODO -->
   <!-- 详见： https://ask.dcloud.net.cn/question/158765  -->
   <!-- JeepayPopupListSelect.js  修改 "content-" + i0,  改为： content 即可。    -->
   
    <!-- #ifdef APP-PLUS || H5 -->
	  <template #content="{record}">
		   <view class="pay-wrapper">
			 <view class="pay-info">
			   <view class="pay-logo flex-center" :style="{ backgroundColor: record.bgColor }">
				 <image :src="record.icon" mode="scaleToFill" />
			   </view>
			   <view>
				 <view class="pay-title">{{ record.ifName }}</view>
				 <view class="pay-rate">{{getRateStr(record.paywayFee)}}</view>
			   </view>
			 </view>
		   </view>
	  </template>
	  <!-- #endif -->
   
   </JeepayPopupListSelect>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { reqLoad, API_URL_PAY_PASSAGE_LIST, $getAvailablePayInterface, $wayCodeConfigIfCode } 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 cal from '@/commons/utils/cal.js'

const selectIfcodeRef = ref()

// 定义传入属性
const props = defineProps({
	
  record: {type:Object, default: () => {}}, // 渲染对象 
  
  configAppId: { type: String }, // 配置的appId 
  
})

const vdata = reactive({
	
	configedIfCode: '', // 已配置的ifCode 
	
	apiRes: { }, //接口返回数据缓存
})

// 请求
function reqTableDataByIfcodeFunc (params) {
    return Promise.resolve(vdata.apiRes)
}


// 打开面板 ( 先查询过滤下。  )
function openConfig(wayCode){
	
	vdata.configedIfCode = '';
	
	$getAvailablePayInterface(props.configAppId, props.record.wayCode).then(res => {
		vdata.apiRes = res
    if(!res.bizData.records.length) return  infoBox.showToast('暂无可配置的渠道')
		res.bizData.records.forEach(r => {
			if(r.configState == 1){
				vdata.configedIfCode = r.ifCode
			}
		})
	
		if(vdata.configedIfCode){
			selectIfcodeRef.value.open({ifCode: vdata.configedIfCode})	
		}else{
			selectIfcodeRef.value.open()
		}
		
	})
}

function confirmFunc(v){
	
	if(!v){
		return infoBox.showToast('请选择接口')
	}
	
	$wayCodeConfigIfCode(props.configAppId, props.record.wayCode, v.ifCode).then(() => {
		infoBox.showSuccessToast("配置完成")
		
		emit.refPageAndSearchEmit(emit.ENAME_REF_PAY_PASSAGE_LIST)
		
		selectIfcodeRef.value.close();	
	})
}


function getRateStr(paywayFee){
	
	if(paywayFee.feeType == 'SINGLE'){
		return '单笔费率:' + cal.cert2Dollar(paywayFee.feeRate * 10000) + "%"
	}else{
		return '阶梯费率'
	}
}


</script>

<style lang="scss" scoped>
.pay-wrapper {
  display: flex;
  align-items: center;
  height: 170rpx;
  .dot {
    position: relative;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background-color: #d7d8d9;
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: #fff;
    }
  }
  .dot-active {
    background-color: #2980fd;
  }
  .pay-info {
    display: flex;

    .pay-logo {
      margin: 0 20rpx 0 0rpx;
      width: 90rpx;
      height: 90rpx;
      border-radius: $v-b-r20;
      background-color: #07112d;
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
    .pay-title {
      font-size: 30rpx;
      font-weight: 400;
    }
    .pay-rate {
      margin-top: 16rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: $J-color-t99;
    }
  }
}
</style>