<template>
	<view class="page-wrapper">
		<view class="title-wrapper flex-column" v-if="vdata.isIsvShow">
			<view class="title">选择线上应用</view>
			<view class="tips" @click="ak.go.to('PAGES_WEBVIEW', { url: 'https://shouyinbei.yuque.com/rv7pt7/xczlxt/dgxuxxgl17vsvwvl?singleDoc#' })">
				(线上场景需要通过应用获取各种能力并进行开发对接（如APP支付、分账、代付等），当前进件商户需要与应用进行关联。
				<text class="t">了解应用</text>
				)
			</view>
			<!-- <JSwitch :bol="vdata.isIsvShow" :confirmTips="false" @confirm="changeShow" /> -->
		</view>
		<!-- <view class="selected-wrapper selected-appId" :class="{ 'hide-appId': !vdata.isShow }"> -->
		<view class="selected-wrapper selected-appId" v-if="vdata.isIsvShow">
			<JeepayBizsPopupView :hasTitle="false" bizType="mchApp" v-model:value="vdata.appId" :showName="vdata.bindAppName" :isIcon="false" :addUse="true" />
			<image src="/static/iconImg/icon-arrow-right.svg" class="arrow" />
		</view>
		<view class="title-wrapper">
			<view class="title">选择支付通道</view>
		</view>
		<view class="selected-wrapper" @tap="toAddPage">
			<text v-if="!vdata.ifCode">请选择支付通道</text>
			<view class="ifcode-info" v-else>
				<view class="ifcode-title">{{ vdata.ifName }}</view>
				<view class="ifcode-code">{{ vdata.ifCode }}</view>
			</view>
			<image src="/static/iconImg/icon-arrow-right.svg" class="arrow" />
		</view>
		<view class="title-wrapper" v-if="vdata.ifCode">
			<view class="title">选择支付渠道号</view>
		</view>
		<view class="selected-wrapper selected-appId" v-if="vdata.ifCode">
			<JeepayBizsPopupView
				:hasTitle="false"
				bizType="isvApp"
				v-model:value="vdata.isvNo"
				:range="vdata.range"
				:ifCode="vdata.ifCode"
				:showName="vdata.isvName"
				:isIcon="false"
			/>
			<image src="/static/iconImg/icon-arrow-right.svg" class="arrow" />
		</view>

		<view class="next-but">
			<Button @tap="queryMchAppPayPassage">下一步</Button>
		</view>
	</view>
	<!-- 选择支付 接口 -->
	<JeepayPopupListSelect
		ref="selectIfcodeRef"
		title="请选择通道"
		:isCheckbox="false"
		:reqTableDataFunc="reqTableDataByIfcodeFunc"
		:fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
		@confirm="confirmIfCode"
	>
		<!-- 小程序， 插槽不生效， 待排查！  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>
				</view>
			</view>
		</template>
		<!-- #endif -->
	</JeepayPopupListSelect>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import ak from '@/commons/utils/ak.js';
import { reqLoad, $getMchPayPassage, $getAllAllowApplymentIfCodeList, API_URL_MCH_APP_LIST, $getAllIsvInfoList } from '@/http/apiManager.js';
onLoad((options) => {
	console.log(options, 'options');
	if (options.applyId) vdata.applyId = options.applyId;
	if (options.range) vdata.range = options.range;
	if (vdata.range != 1) {
		vdata.isShow = false;
		vdata.isIsvShow = false;
	}
});
const vdata = reactive({
	range: 0,
	isShow: true,
	isIsvShow: true,
	appId: ''
});
const statePopup = ref(null);
const jeepayTableListRef = ref();
const selectIfcodeRef = ref();
const selectIsvRef = ref();
// 打开选择通道页面
function toAddPage() {
	$getAllAllowApplymentIfCodeList().then(({ bizData }) => {
		vdata.addIfCodeList = bizData.filter((v) => {
			return v.isOpenApplyment == 1;
		});
		selectIfcodeRef.value.open();
	});
}
// 查询默认 应用
const findDefaultMchApp = () => {
	reqLoad.list(API_URL_MCH_APP_LIST, { defaultFlag: 1 }).then(({ bizData }) => {
		vdata.bindAppName = bizData.records[0].appName;
		vdata.appId = bizData.records[0].appId;
	});
};
findDefaultMchApp();
// 请求可以选择的支付通道
function reqTableDataByIfcodeFunc() {
	// 模拟请求数据
	return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false } });
}
// 查询商户支付应用参数是否配置
function queryMchAppPayPassage() {
	if (vdata.appId == undefined && vdata.range == 1) {
		ak.infoBox.showToast('请选择进件应用');
		return false;
	}
	if (vdata.ifCode == undefined) {
		ak.infoBox.showToast('请选择进件通道');
		return false;
	}
	if (vdata.isvNo == undefined) {
		ak.infoBox.showToast('请选择所属渠道');
		return false;
	}
	$getMchPayPassage(vdata.appId, vdata.ifCode).then(({ bizData }) => {
		if (bizData && bizData.existMchParams && vdata.isShow) {
			uni.showModal({
				title: '注意',
				content: `当前所选应用已在通道【${vdata.ifName}】配置参数、费率，该笔进件成功后将自动覆盖原有配置，或将导致原有支付功能失效，请谨慎提交。`,
				success: (res) => {
					if (res.confirm) {
						ak.go.to('PAGES_APPLYMENT_H5_DETAIL', {
							range: vdata.range,
							isvNo: vdata.isvNo,
							isView: 0,
							ifCode: vdata.ifCode,
							appId: vdata.isShow ? vdata.appId : '',
							copyInfoSourceApplyId: vdata.applyId ? vdata.applyId : '',
							autoConfigMchAppId: vdata.appId
						});
					}
				}
			});
		} else {
			ak.go.to('PAGES_APPLYMENT_H5_DETAIL', {
				range: vdata.range,
				isvNo: vdata.isvNo,
				isView: 0,
				ifCode: vdata.ifCode,
				appId: vdata.isShow ? vdata.appId : '',
				copyInfoSourceApplyId: vdata.applyId ? vdata.applyId : '',
				autoConfigMchAppId: vdata.appId
			});
		}
	});
}
const changeShow = (e) => {
	console.log(e);
	vdata.isShow = e;
};
const changeIsvShow = (e) => {
	console.log(e);
	vdata.isIsvShow = e;
};
// 选择支付通道
function confirmIfCode(selected) {
	Object.assign(vdata, selected);
	selectIfcodeRef.value.close();
}

// 打开选择渠道页面
function toIsvAddPage() {
	if (vdata.ifCode == undefined) {
		ak.infoBox.showToast('请选择进件通道');
		return false;
	}
	console.log(vdata.ifCode, 'vdata.ifCode');
	$getAllIsvInfoList(vdata.ifCode).then(({ bizData }) => {
		vdata.addIsvList = bizData.filter((v) => {
			return v.isOpenApplyment == 1;
		});
		selectIsvRef.value.open();
	});
}
// 请求可以选择的支付渠道
function reqTableDataByIsvFunc() {
	// 模拟请求数据
	return Promise.resolve({ bizData: { records: vdata.addIsvList, hasNext: false } });
}
// 选择支付渠道
function confirmIsv(selected) {
	Object.assign(vdata, selected);
	selectIfcodeRef.value.close();
}
</script>

<style lang="scss" scoped>
.page-wrapper {
	padding-top: 60rpx;
	min-height: 100vh;

	.title-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 670rpx;
		&.flex-column {
			padding: 0;
			align-items: flex-start;
			flex-direction: column;
			.title {
				padding: 0 30upx;
			}
		}

		.title {
			font-size: 32rpx;
		}
		.tips {
			$bg: #ffeed8;
			color: #c57000;
			font-size: 20upx;
			margin-top: 20upx;
			background-color: #ffeed8;
			padding: 12upx 16upx;
			border-radius: 10upx;
			position: relative;
			&::after {
				$size: 20upx;
				content: '';
				width: $size;
				height: $size;
				border-radius: 8upx;
				background-color: $bg;
				position: absolute;
				top: $size * 0.5 * -1;
				left: 60upx;
				transform: rotate(-45deg);
			}
			.t {
				color: $uni-primary;
				font-weight: bold;
			}
		}
	}

	.selected-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto 120rpx;
		padding: 0 0 0 30rpx;
		box-sizing: border-box;
		width: 670rpx;
		min-height: 120rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.arrow {
			width: 100rpx;
			height: 100rpx;
		}

		.ifcode-info {
			padding-top: 20rpx;

			.ifcode-code {
				padding: 15rpx 0 20rpx;
				font-size: 30rpx;
				color: #a1a1a1;
			}
		}
	}

	.selected-appId {
		padding-bottom: 25rpx;
	}

	.next-but {
		padding-top: 80rpx;
		width: 670rpx;
		margin: 0 auto;
	}
}

.hide-appId {
	margin-bottom: 110rpx;
	padding: 0 !important;
	min-height: 0 !important;
	height: 0 !important;
	overflow: hidden;
}
</style>
