<!--
   通用的选择某项业务，  一般用作修改页。 
   目前支持：  门店 和  应用 
  @author terrfly
  @site https://www.jeepay.vip
  @date 2022/12/08 14:18
-->
<template>
	<view class="details-wrapper" style="align-items: flex-start; padding-top: 40rpx">
		<view v-if="props.hasTitle" class="details-title">
			<slot name="title">{{ bizTypeMap[props.bizType].title }}</slot>
		</view>
		<view @tap="show">
			<view class="sub-title">
				<view class="details-info single-text-beyond">
					<text :class="{ 'text-gray': vdata.selectedRow[bizTypeMap[props.bizType].nameKey] ? false : true }">
						{{ vdata.selectedRow[bizTypeMap[props.bizType].nameKey] || bizTypeMap[props.bizType].nameDef }}
					</text>
				</view>
				<image src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" v-if="isIcon" />
			</view>
			<view class="sub-info details-info single-text-beyond">{{ vdata.selectedRow[bizTypeMap[props.bizType].id] }}</view>
		</view>
	</view>
	<view>
		<JeepayBizinfoSelect ref="jeepayBizinfoSelectRef" :bizType="props.bizType" :isCheckbox="false" :range="props.range" :ifCode="props.ifCode" :addUse="props.addUse" />
		<JeepayIncomingBizinfoSelect ref="jeepayIncomingBizinfoSelectRef" :bizType="props.bizType" :range="props.range" :ifCode="props.ifCode" />
	</view>
</template>

<script setup>
import { ref, reactive, nextTick, watch, onMounted } from 'vue';

const jeepayBizinfoSelectRef = ref();
const jeepayIncomingBizinfoSelectRef = ref();

const bizTypeMap = {
	store: { title: '选择门店', nameKey: 'storeName', nameDef: '请选择门店', id: 'storeId' },
	mchApp: { title: '选择应用', nameKey: 'appName', nameDef: '请选择应用', id: 'appId' },
	isvApp: { title: '选择渠道', nameKey: 'isvName', nameDef: '请选择渠道', id: 'isvNo' },
	incomingApp: { title: '发起进件', nameKey: 'name', nameDef: '请选择场景', id: 'range' }
};

// emit 父组件使用： v-model:value="val" 进行双向绑定。
const emits = defineEmits(['update:value', 'update:showName', 'change']);

const props = defineProps({
	// 是否包含 标题部分
	hasTitle: { type: Boolean, default: true },

	//绑定的值， 双向绑定
	value: { type: [String, Number] },

	// 仅仅用作修改的回显
	showName: { type: [String, Number] },

	// 业务类型： 默认门店
	bizType: { type: String, default: 'store' },
	range: { type: String, default: 0 },
	ifCode: { type: String, default: '' },
	isIcon: { type: Boolean, default: true },
	addUse: { type: Boolean, default: false }
});

onMounted(() => {
	if (props.value) {
		vdata.selectedRow[bizTypeMap[props.bizType].id] = props.value;
	}
	if (props.showName) {
		vdata.selectedRow[bizTypeMap[props.bizType].nameKey] = props.showName;
	}
});

// 切换时
watch(
	() => props.value,
	(newVal, oldVal) => {
		vdata.selectedRow[bizTypeMap[props.bizType].id] = newVal;
	}
);

// 切换时
watch(
	() => props.showName,
	(newVal, oldVal) => {
		vdata.selectedRow[bizTypeMap[props.bizType].nameKey] = newVal;
	}
);

const vdata = reactive({
	// 当前选择行
	selectedRow: {}
});

function show() {
	jeepayBizinfoSelectRef.value.open().then((selectedRow) => {
		vdata.selectedRow = selectedRow || {};

		emits('update:value', vdata.selectedRow[bizTypeMap[props.bizType].id]);
		emits('update:showName', vdata.selectedRow[bizTypeMap[props.bizType].nameKey]);
		emits('change', vdata.selectedRow[bizTypeMap[props.bizType].id]);
	});
}
</script>

<style lang="scss" scoped>
.details-wrapper {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	background-color: #fff;
	.details-title {
		width: 180rpx;
		color: #4c4c4c;
	}
	.details-info {
		flex-grow: 1;
		width: 405rpx;
	}
	image {
		width: 108rpx;
		height: 100rpx;
	}

	.sub-title {
		flex: 1;
		display: flex;
		image {
			width: 108rpx;
			height: 40rpx;
		}
	}
	.sub-info {
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #a1a1a1;
		padding-bottom: 20rpx;
	}

	.text-gray {
		color: #b3b3b3;
	}
}
</style>
