<!--

  订单列表页面， 数据渲染 
   业务： 进件

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/29 09:17
-->
<template>
	<!-- 草稿 灰色 失败红色 审核中 黄色 -->
	<!-- 列表卡片 -->
	<view class="apply-card">
		<view class="apply-title" @tap="toDetailPage">
			<view class="pay-img-wrapper flex-center" :style="{ backgroundColor: record.bgColor }">
				<image :src="props.record.storeLogo" mode="aspectFill" />
			</view>
			<view class="apply-title-wrapper">
				<view class="apply-title-info">
					<text class="single-text-beyond" style="width: 340rpx">{{ props.record.storeName }}</text>
					<!-- <view class="apply-state">
						<text>{{ stateList[record.state]?.text }}</text>
						<view class="apply-dot" :style="{ backgroundColor: stateList[record.state]?.bgColor }"></view>
					</view> -->
				</view>
				<view class="apply-time">{{ props.record.createdAt }}</view>
			</view>
		</view>
		<view class="apply-info-title" @tap="toDetailPage">
			<view class="title">门店编号</view>
			<view class="info">{{ props.record.storeId }}</view>
		</view>
		<view class="apply-info-title" @tap="toDetailPage">
			<view class="title">所属商户</view>
			<view class="info">{{ props.record.isvName }}</view>
		</view>
		<view class="apply-button">
			<!-- <view
				v-if="
					ent.has('ENT_MCH_APPLYMENT_SIGN') &&
					(props.record.state == 1 || props.record.state == 2 || props.record.state == 4 || props.record.state == 5 || props.record.state == 6)
				"
				class="sign flex-center"
				hover-class="touch-hover"
				@tap="toSignPage"
			>
				签约开通
			</view>
			<view
				v-if="ent.has('ENT_MCH_APPLYMENT_GET_INFO') && (props.record.state == 1 || props.record.state == 4 || props.record.state == 5)"
				class="new-state flex-center"
				hover-class="touch-button"
			>
				获取最新状态
			</view> -->
			<view class="new-state flex-center" hover-class="touch-button" @tap="ak.go.to('PAGES_DEVICE_MAIN')">设备管理</view>
			<!-- <view v-if="ent.has('ENT_MCH_APPLYMENT_ADD')" class="new-state flex-center" hover-class="touch-button" @tap.stop="toShowSelectIfCode()">设备管理</view> -->
		</view>

		<!-- 选择支付 接口 -->
		<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>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import cal from '@/commons/utils/cal.js';
import go from '@/commons/utils/go.js';
import datamap from '@/commons/utils/datamap.js';
import ent from '@/commons/utils/ent.js';
import ak from '@/commons/utils/ak.js';
import { $getAllAllowApplymentIfCodeList } from '@/http/apiManager.js';

const selectIfcodeRef = ref();

const vdata = reactive({
	addIfCodeList: [] // 可以选择的接口集合
});

function toDetailPage() {
	go.to('PAGES_APP_STORE_DETAIL', { storeId: props.record.storeId });
}

function toH5ApplyOptionPage(applyId, configPage) {
	uni.navigateTo({ url: `/pageApply/applyDetailH5ApplyOption?applyId=${applyId}&configPage=${configPage}` });
}

// 去进件详情 / 修改页
function toViewPage() {
	let isView = 1;

	if ([0, 3, 8].indexOf(props.record.state) >= 0) {
		isView = 0;
	}
	go.to('PAGES_APPLYMENT_H5_DETAIL', { autoConfigMchAppId: props.record.autoConfigMchAppId, isvNo: props.record.isvNo, applyId: props.record.applyId, isView: isView });
}

// 签约开通
function toSignPage() {
	go.to('PAGES_APPLYMENT_H5_OPTION', { applyId: props.record.applyId, configPage: 'NEXT_BIZS' });
}

// 定义传入属性
const props = defineProps({
	record: { type: Object, default: () => {} } // 渲染对象
});
const stateList = reactive([
	{
		text: '草稿', //0
		bgColor: '#D9D9D9'
	},
	{
		text: '审核中', //1
		bgColor: '#FFCC66'
	},
	{
		text: '已开通', //2
		bgColor: '#18BC73'
	},
	{
		text: '申请被驳回', //3
		bgColor: '#FF4D5B'
	},
	{
		text: '待验证', //4
		bgColor: '#FFCC66'
	},
	{
		text: '待签约', //5
		bgColor: '#2980FD'
	},
	{
		text: '', //6 占位
		bgColor: ''
	},
	{
		text: '等待预审', //7
		bgColor: '#FFCC66'
	},
	{
		text: '预审拒绝', //8
		bgColor: '#FF4D5B'
	}
]);

// 打开选择渠道页面
function toShowSelectIfCode() {
	ak.go.to('PAGES_DEVICE_MAIN');
	// ak.go.to('PAGES_APPLYMENT_SELECETDPAY', { applyId: props.record.applyId, ifCode: props.record.ifCode, range: props.record.range });
	return;
	$getAllAllowApplymentIfCodeList().then(({ bizData }) => {
		vdata.addIfCodeList = bizData;
		selectIfcodeRef.value.open();
	});
}

// 请求可以选择的支付渠道
function reqTableDataByIfcodeFunc() {
	// 模拟请求数据
	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, copyInfoSourceApplyId: props.record.applyId });
}

function toCopyPage() {}
</script>

<style lang="scss" scoped>
//   列表卡片样式
.apply-card {
	padding: 0.1rpx 30rpx;
	padding-bottom: 10rpx;
	margin: 20rpx;

	background-color: #fff;
	border-radius: $J-b-r32;
	.apply-title {
		display: flex;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
		font-size: 30rpx;
		.pay-img-wrapper {
			margin-right: 20rpx;
			width: 90rpx;
			height: 90rpx;
			border-radius: 20rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.apply-title-wrapper {
			flex: 1;
			.apply-title-info {
				display: flex;
				justify-content: space-between;
				height: 40rpx;
				.apply-state {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #999;
					white-space: nowrap;
					text {
						transform: translateX(-10rpx);
					}
					.apply-dot {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: #2980fd;
					}
				}
			}
			.apply-time {
				color: #999;
				margin-top: 10rpx;
				font-size: 26rpx;
			}
		}
	}

	.apply-info-title {
		margin: 20rpx 0;
		display: flex;
		font-size: 26rpx;
		.title {
			color: #808080;
		}
		.info {
			text-indent: 56rpx;
		}
	}
	.apply-button {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 20rpx;
		view {
			font-size: 26rpx;
			font-weight: 500;
			height: 62rpx;
			border-radius: 12rpx;
		}
		.sign {
			width: 164rpx;
			border: 1rpx solid #d3d3d4;
		}
		.new-state {
			margin-left: 20rpx;
			width: 216rpx;
			color: #fff;
			background: $jeepay-bg-primary;
		}
	}
}

.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>
