<template>
	<view class="page-wrapper">
		<!-- 搜索栏头部 -->
		<view class="search-title">
			<view class="search-input">
				<!-- <view class="search-input" @tap="go.toSearchPage('mchApplyment')"> -->
				<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" class="search-img" />
				<input placeholder="搜索商户号/名称" v-model="searchValue" placeholder-class="input-placeholder" @confirm="searchHandle" />
				<view class="close" v-if="searchValue" @click="clearHandle">
					<image src="/static/iconImg/icon-x.svg" mode="scaleToFill" class="del-img" />
				</view>
			</view>
			<view class="search-state" :class="{ active: searchValue }">
				<div class="btn-wrap">
					<view class="s-wrap flex-center" @tap="statePopup.open(vdata.searchData.state)" v-if="!searchValue">
						{{ vdata.selected.label || '全部状态' }}
						<image class="arrow" src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
					</view>
					<view class="s-wrap flex-center" @click="searchHandle" v-else>搜索</view>
				</div>
			</view>
		</view>

		<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
			<template #tableBody="{ record }">
				<MchApplymentRender :record="record" @refresh="jeepayTableListRef.refTable(true)" />
			</template>
		</JeepayTableList>

		<!-- 底部固定按钮 -->
		<view class="list-footer">
			<view class="button-wrapper">
				<Button @tap="toSelectIfCodePage">发起进件</Button>
			</view>
		</view>

		<JSinglePopup :list="stateList" title="按状态筛选" ref="statePopup" @confirm="confirmState" />

		<!-- 选择支付 接口 -->
		<JeepayPopupListSelect
			ref="selectIfcodeRef"
			title="请选择渠道"
			: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>

		<!-- :fields="{ key: 'range', left: 'name', right: 'range' }" -->
		<!-- 选择支付 接口 -->
		<!-- <JeepayIncomingPopupListSelect
	  ref="selectIncomingRef"
	  title='请选择场景类型'
	  :reqTableDataFunc="reqTableIncomingDataByIfcodeFunc"
	  :fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
	  @confirm="confirmIfCode"
	>
	
	
	</JeepayIncomingPopupListSelect> -->

		<!-- 选择支付 接口 -->
		<JeepayPopupListSelect
			ref="selectIncomingRef"
			title="请选择场景类型"
			:reqTableDataFunc="reqTableIncomingDataByIfcodeFunc"
			:fields="{ key: 'range', left: 'name' }"
			@confirm="confirmIncoming"
		></JeepayPopupListSelect>
	</view>
</template>

<script setup>
import { reactive, ref, computed, provide } from 'vue';
import { onReachBottom, onUnload } from '@dcloudio/uni-app';
import go from '@/commons/utils/go.js';
import ak from '@/commons/utils/ak.js';
import { reqLoad, API_URL_MCH_APPLYMENT_LIST, $getAllAllowApplymentIfCodeList } from '@/http/apiManager.js';
import MchApplymentRender from '@/pages/list/render/MchApplymentRender.vue';

onReachBottom(() => {});

const statePopup = ref(null);
const jeepayTableListRef = ref();
const selectIfcodeRef = ref();
const selectIncomingRef = ref();

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

// 清空搜索
function clearHandle() {
	searchValue.value = '';
	vdata.searchData.mchApplyName = searchValue.value;
	jeepayTableListRef.value.refTable(true);
}

// 搜索
function searchHandle() {
	// reqTableDataFunc({ mchApplyName: searchValue });
	vdata.searchData.mchApplyName = searchValue.value;
	jeepayTableListRef.value.refTable(true);
}

const vdata = reactive({
	incomingStatus: true,
	searchData: {
		mchApplyName: ''
	},
	selected: {}, // 当前选择对象

	addIfCodeList: [] // 可以选择的接口集合
});

const stateList = reactive([
	{ label: '全部', value: '' },
	{ label: '草稿', value: '0' },
	{ label: '审核中', value: '1' },
	{ label: '进件成功', value: '2' },
	{ label: '驳回待修改', value: '3' },
	{ label: '待验证', value: '4' },
	{ label: '待签约', value: '5' },
	{ label: '等待预审', value: '7' },
	{ label: '预审拒绝', value: '8' },
	{ label: '已风控', value: '20' },
	{ label: '已冻结', value: '21' },
	{ label: '进件请求中', value: '100' }
]);

const searchValue = ref('');

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

//按状态筛选
function confirmState(r) {
	vdata.selected = r || {};
	vdata.searchData.state = r.value;
	jeepayTableListRef.value.refTable(true);
}

// 打开选择渠道页面
function toAddPage() {
	$getAllAllowApplymentIfCodeList().then(({ bizData }) => {
		vdata.addIfCodeList = bizData.filter((v) => {
			return v.isOpenApplyment == 1;
		});
		selectIfcodeRef.value.open();
	});
}

// 请求可以选择的支付渠道
function reqTableDataByIfcodeFunc() {
	// 模拟请求数据
	console.log(vdata.addIfCodeList, 'incomingList');
	return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false } });
}

function confirmIfCode(selected) {
	if (!selected) {
		ak.infoBox.showToast('请选择进件渠道');
		return false;
	}
	selectIfcodeRef.value.close();
	ak.go.to('PAGES_APPLYMENT_H5_DETAIL', { isView: 0, ifCode: selected.ifCode });
}
// 页面跳转  选择 应用渠道
function toSelectIfCodePage() {
	selectIncomingRef.value.open();
	// ak.go.to('PAGES_APPLYMENT_SELECETDPAY')
}
function confirmIncoming(selected) {
	console.log(selected, 'selectedselected');
	if (!selected) {
		ak.infoBox.showToast('请选择场景类型');
		return false;
	}
	selectIncomingRef.value.close();
	ak.go.to('PAGES_APPLYMENT_SELECETDPAY', { range: selected.range });
}

function reqTableIncomingDataByIfcodeFunc() {
	const incomingList = [
		{ range: 0, name: '线下场所', intro: '接入线下支付服务，获得微信、支付宝、银联二维码、POS刷卡等基础支付能力。以及多方分账、手动现取、分时结算、资金快速到账等增值服务。' },
		{
			range: 1,
			name: '线上平台',
			intro: '接入线上支付能力，获取微信、支付宝、银联二维码等在线支付能力。以及快捷支付、APP支付、H5支付、订单分账、代收代付、远程收款单等增值服务。'
		}
	];
	console.log(incomingList, 'incomingList');
	return Promise.resolve({ bizData: { records: incomingList, hasNext: false } });
}
</script>

<style lang="scss" scoped>
.page-wrapper {
	min-height: calc(100vh - 80rpx);
	//   搜索栏样式
	.search-title {
		display: flex;
		align-items: center;
		padding: 0 30rpx;

		height: 110rpx;
		.search-input {
			flex: 1;
			display: flex;
			align-items: center;
			height: 70rpx;
			background-color: #fff;
			border-radius: 12rpx;
			position: relative;
			padding-right: 70upx;
			.search-img {
				padding: 22rpx;
				width: 26rpx;
				height: 26rpx;
			}
			.close {
				$closeSize: 70upx;
				width: $closeSize;
				height: $closeSize;
				position: absolute;
				top: 50;
				right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.del-img {
					$size: 34upx;
					width: $size;
					height: $size;
				}
			}
		}
		.search-state {
			$height: 40upx;
			width: 200upx;
			height: $height;
			margin-left: 40rpx;
			font-size: 30rpx;
			color: #222425;
			position: relative;
			overflow: hidden;
			transition: all 0.1s ease-in-out;
			&.active {
				width: 80upx;
			}
			.arrow {
				margin-left: 10rpx;
				width: 40rpx;
				height: 40rpx;
				transform: rotate(180deg);
			}
			.btn-wrap {
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				transition: all 0.1s ease-in-out;
				.s-wrap {
					height: $height;
				}
			}
		}
	}
}

.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;
		}
	}
}
</style>
