<template>
	<JeepayBackground>
		<view class="input-wrapper">
			<view class="input-main">
				<uni-easyinput class='jeepay-search'  :inputBorder="false" :placeholder="vdata.pageObject.searchPlaceholder" 
				 v-model="vdata.searchVal" @focus="focus" @confirm="searchFunc">
					<template #prefixIcon><image src="@/static/iconImg/icon-search.svg" class="input-icon" @tap="vdata.searchVal=''" /></template>
				</uni-easyinput>
				<button  type="text" @click="searchFunc()">搜索</button>
				<!-- <button v-show="!vdata.isSearch" type="text" @click="searchFunc">取消</button> -->
			</view>
		</view>

		<JeepayTableList ref="tableRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData" :initData="false">
			<template #tableBody="{ record }">
				<PayOrderRender v-if="vdata.pageType == 'payOrder'" :record="record" />
				<MchAppRender v-if="vdata.pageType == 'mchApp'" :record="record" />
				<WxmpUserRender v-if="vdata.pageType == 'wxmpUser'" :record="record" />
				<MchApplymentRender v-if="vdata.pageType == 'mchApplyment'" :record="record" />
				<MchStoreRender v-if="vdata.pageType == 'mchStore'" :record="record" />
				<SysUserRender v-if="vdata.pageType == 'sysUser'" :record="record" />
				<AppConfigRender v-if="vdata.pageType == 'payPassage'" :record="record" :configAppId="vdata.pageOptions.appId" />
				<MemberRender v-if="vdata.pageType == 'member'" :record="record" />
				<MemberRechargeRecordRender v-if="vdata.pageType == 'memberRechargeRecord'" :record="record" />
				<MemberAccountHistoryRender v-if="vdata.pageType == 'memberAccountHistory'" :record="record" />
				
				<!-- 设备的三个类型的搜索 -->
				<DeviceCommonsRender v-if="vdata.pageType == 'qrc'" type="qrc" :record="record" />
				<DeviceCommonsRender v-if="vdata.pageType == 'storeTerminal'" type="storeTerminal" :record="record" />
				<DeviceCommonsRender v-if="vdata.pageType == 'device'" type="device" :record="record" />
				<DeviceCommonsRender v-if="vdata.pageType == 'face'" type="face" :record="record" />
				<FaceCardRender v-if="vdata.pageType == 'faceImgAd'"  v-bind="record" />
				
				<!-- 数据渲染: 动态组件： 微信小程序不支持 -->
				<!-- <component ref="recordRenderComponentRef" :is="vdata.pageObject.component" :record="record" /> -->
			</template>
		</JeepayTableList>
	</JeepayBackground>
</template>

<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue';
import emit from '@/commons/utils/emit.js';
import go from '@/commons/utils/go.js';
import {
	reqLoad,
	API_URL_PAY_ORDER_LIST,
	API_URL_MCH_APP_LIST,
	API_URL_WXMP_USER_LIST,
	API_URL_MCH_APPLYMENT_LIST,
	API_URL_MCH_STORE_LIST,
	API_URL_SYS_USER_LIST,
	API_URL_PAY_PASSAGE_LIST,
	API_URL_SYS_CODE_LIST,
	API_URL_SYS_DEVICE_LIST,
	API_URL_SYS_TERMINALS,
    API_URI_PAY_AD_LIST,
    API_URL_MEMBERS,
	API_URL_MEMBER_RECHARGE_RECORDS,
	API_URL_MEMBER_ACCOUNT_HISTORY
} from '@/http/apiManager.js';
import { onLoad, onUnload, onReachBottom } from '@dcloudio/uni-app';
import PayOrderRender from './render/PayOrderRender.vue';
import MchAppRender from './render/MchAppRender.vue';
import WxmpUserRender from './render/WxmpUserRender.vue';
import MchApplymentRender from './render/MchApplymentRender.vue';
import MchStoreRender from './render/MchStoreRender.vue';
import SysUserRender from './render/SysUserRender.vue';
import AppConfigRender from './render/AppConfigRender.vue';
import DeviceCommonsRender from './render/DeviceCommonsRender.vue';
import FaceCardRender from './render/FaceCardRender.vue';
import MemberRender from './render/MemberRender.vue';
import MemberRechargeRecordRender from './render/MemberRechargeRecordRender.vue';
import MemberAccountHistoryRender from './render/MemberAccountHistoryRender.vue';

onReachBottom(() => {});

const tableRef = ref();
const recordRenderComponentRef = ref(); // 数据渲染组件

// 定义所有的页面类型
const pageTypeMap = {
	payOrder: {
		// 支付订单列表
		component: PayOrderRender, // 渲染组件
		searchUrl: API_URL_PAY_ORDER_LIST,
		searchField: 'unionOrderId', // 搜索字段
		searchPlaceholder: '支付订单号、商户单号' // 显示名称
	},

	mchApp: {
		// 商户应用
		component: MchAppRender, // 渲染组件
		searchUrl: API_URL_MCH_APP_LIST,
		searchField: 'unionSearchId', // 搜索字段
		searchPlaceholder: '应用APPID、名称' // 显示名称
	},

	wxmpUser: {
		// 通知人管理
		component: WxmpUserRender, // 渲染组件
		searchUrl: API_URL_WXMP_USER_LIST,
		searchField: 'nickname', // 搜索字段
		searchPlaceholder: '昵称' // 显示名称
	},

	mchApplyment: {
		// 进件
		component: MchApplymentRender, // 渲染组件
		searchUrl: API_URL_MCH_APPLYMENT_LIST,
		searchField: 'unionSearchId', // 搜索字段
		searchPlaceholder: '进件单号' // 显示名称
	},

	mchStore: {
		// 门店
		component: MchStoreRender, // 渲染组件
		searchUrl: API_URL_MCH_STORE_LIST,
		searchField: 'unionStoreInfo', // 搜索字段
		searchPlaceholder: '门店名称、ID' // 显示名称
	},

	sysUser: {
		// 用户管理
		component: SysUserRender, // 渲染组件
		searchUrl: API_URL_SYS_USER_LIST,
		searchField: 'realname', // 搜索字段
		searchPlaceholder: '姓名' // 显示名称
	},

	payPassage: {
		// 支付通道配置
		component: AppConfigRender, // 渲染组件
		searchUrl: API_URL_PAY_PASSAGE_LIST,
		searchField: 'wayCode', // 搜索字段
		searchPlaceholder: '支付方式代码' // 显示名称
	},
	
	qrc: {
		searchUrl: API_URL_SYS_CODE_LIST,
		searchField: 'appSearchData',
		searchPlaceholder: '搜索码牌名称，编号'
	},
	
	device: {
		searchUrl: API_URL_SYS_DEVICE_LIST,
		searchField: 'appSearchData',
		searchPlaceholder: '搜索设备名称、编号'
	},
	
	storeTerminal: {
		searchUrl: API_URL_SYS_TERMINALS,
		searchField: 'trmName',
		searchPlaceholder: '搜索辅助终端名称'
	},
	face: {
		searchUrl: API_URL_SYS_DEVICE_LIST,
		searchField: 'appSearchData',
		searchPlaceholder: '搜索设备名称、编号'
	}, 
	faceImgAd:{
		searchUrl: API_URI_PAY_AD_LIST,
		searchField: 'title',
		searchPlaceholder: '搜索广告标题'
	},
	// 会员管理
	member: {
		component: MemberRender, // 渲染组件
		searchUrl: API_URL_MEMBERS,
		searchField: 'unionQueryParam',
		searchPlaceholder: '搜索手机号、会员名称'
	},
	// 会员充值记录
	memberRechargeRecord: {
		component: MemberRechargeRecordRender, // 渲染组件
		searchUrl: API_URL_MEMBER_RECHARGE_RECORDS,
		searchField: 'unionQueryParam',
		searchPlaceholder: '搜索订单号、手机号、会员名称'
	},
	// 会员账户流水
	memberAccountHistory: {
		component: MemberAccountHistoryRender, // 渲染组件
		searchUrl: API_URL_MEMBER_ACCOUNT_HISTORY,
		searchField: 'unionQueryParam',
		searchPlaceholder: '搜索充值单号、手机号、会员名称'
	}
};

onLoad(option => {
	vdata.pageOptions = option;
	vdata.pageType = option.type;
	vdata.pageObject = pageTypeMap[option.type];
	// 特殊处理
	if (vdata.pageType == 'payPassage') {
		vdata.searchData.appId = option.appId;
	}
	
	// 特殊处理
	if (vdata.pageType == 'device') {
		vdata.searchData.deviceType = option.deviceType;
	}
	
	// 特殊处理
	if (vdata.pageType == 'sysUser') { // 不查询普通用户。 
		vdata.searchData.isNotHasType2 = 1;
	}
	
});

// 监听 更新事件
onUnload(() => uni.$off(emit.ENAME_REF_SEARCH_PAGE));
uni.$on(emit.ENAME_REF_SEARCH_PAGE, function(data) {
	searchFunc();
});

const vdata = reactive({
	pageOptions: {}, // 页面参数

	pageType: '', // 页面类型

	pageObject: {}, // 页面对象

	searchVal: '', // 搜索值

	searchData: {} ,// 搜索内容
	
	


	
});

// 请求
function reqTableDataFunc(params) {

	return reqLoad.list(vdata.pageObject.searchUrl, params);
}

// 点击搜索事件
async function searchFunc(val) {
	if(!vdata.searchVal.trim()) return;

	vdata.searchData[vdata.pageObject.searchField] = vdata.searchVal;
	tableRef.value.refTable(true); // 刷新列表页
	
}

const focus = () => {
	vdata.isSearch = false
	
}

</script>

<style lang="scss" scoped>
.input-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	padding-top: 22rpx;
	height: 110rpx;
	background-color: $J-bg-ff;
	.input-main {
		flex: 1;
		display: flex;
		align-items: center;
		height: 70rpx;
		image {
			padding: 22rpx;
			width: 26rpx;
			height: 26rpx;
		}
		input {
			flex: 1;
			font-size: 27rpx;
		}
		::v-deep uni-button {
			font-size: 32rpx;
			color: rgba(29,121,253,1);
			background: rgba(255,255,255,1);
		}
		::v-deep.uni-easyinput {
			.uni-easyinput__content {
				background-color: $J-bg-f5 !important;
				border-radius: $J-b-r12;
				.uni-easyinput__content-input {
					padding-left: 0 !important;
					.uni-input-input {
						border-radius: $J-b-r12 !important;
						overflow: hidden !important;
					}
				}
				.uni-input-placeholder {
					font-size: 27rpx;
				}
				.uni-icons {
					color: rgba(230,230,230,1) !important;
				}
			}
		}
	}
}
.input-icon{
	position: relative;
	z-index: 10;
}
.search-button{
	position: absolute;
	right: 0;
	background-color: transparent !important;
	color: transparent  !important;
}

</style>
