<template>
	<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" @change="change" :safe-area="false">
		<view class="tips-wrapper">
			<view class="tips-text flex-center" v-if="title">{{ title }}</view>
			<scroll-view scroll-y class="list-wrap">
				<block v-for="v in list" :key="v[value]">
					<view
						class="single-text flex-center"
						hover-class="u-cell-hover"
						hover-stay-time="150"
						:style="{ color: v[value] == selected ? activeColor : v.color }"
						@tap="confirm(v)"
					>
						{{ v[label] }}
					</view>
				</block>
			</scroll-view>
			<view class="line"></view>
			<view class="tips-text tips-cancel flex-center" hover-class="u-cell-hover" hover-stay-time="150" @tap="popup.close()">取消</view>
		</view>
	</uni-popup>

	<JeepayPopupConfirm ref="jeepayPopupConfirm" />
</template>

<script setup>
import { reactive, ref, inject } from 'vue';
const emits = defineEmits(['confirm']);
const props = defineProps({
	title: { type: String }, //标题 传入展示 不传则隐藏
	activeColor: { type: String, default: '#2980FD' }, //选中后文字颜色
	textColor: { type: String }, //列表文字颜色
	textSize: { type: String }, //列表文字大小
	titleColor: { type: String }, //标题文字颜色
	titleSize: { type: String }, //标题文字大小
	list: { type: Array }, //渲染单选列表集合
	label: { type: String, default: 'label' }, //展示文字的键名 可传值复写
	value: { type: String, default: 'value' } //展示文字的key 可传值复写
});
const selected = ref(undefined);
const popup = ref(null);

const jeepayPopupConfirm = ref();

// 打开弹窗 val 选中数据的key
const open = (val) => {
	selected.value = val;
	popup.value.open();
};
const confirm = (listItem) => {
	popup.value.close();

	// 包含回调函数
	if (listItem.fun) {
		// 包含确认弹层。
		if (listItem.confirmText) {
			jeepayPopupConfirm.value
				.open(listItem.confirmText)
				.then(() => {
					listItem.fun();
				})
				.catch(() => {
					popup.value.open();
				});
		} else {
			listItem.fun();
		}
	} else {
		1;
		emits('confirm', listItem);
	}
};
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc');
const change = (e) => {
	if (changePageMetaOverflowFunc) {
		changePageMetaOverflowFunc(!e.show);
	}
};
const close = () => popup.value.close();
defineExpose({ open, close });
</script>

<style lang="scss" scoped>
.list-wrap {
	max-height: 60vh;
}
.tips-wrapper {
	// overflow: hidden;
	border-radius: 32rpx 32rpx 0 0;
	padding-top: 20rpx;
	padding-bottom: 60rpx;
	background-color: #fff;
	.tips-text {
		text-align: center;
		height: 90rpx;
		font-size: 30rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
	}
	.single-text {
		height: 120rpx;
	}
	.line {
		height: 20rpx;
		background-color: rgba(0, 0, 0, 0.07);
	}
	.tips-cancel {
		height: 110rpx;
		color: $J-color-t80;
		font-size: 33rpx;
		border: none;
	}
	.u-cell-hover {
		background-color: #f8f9fa;
	}
}
</style>
