<template>
	<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
		<template #desc>
			<view class="u-text-left u-p-30 color-666 u-font-28">
				<view class="u-m-t-32 u-flex">
					<view class="" v-if="pointDeductionRule.enableRewards">
						<text class="color-red">*</text>
						<text class=""
							v-if="pointDeductionRule.equivalentPoints">{{ pointDeductionRule.equivalentPoints }}积分等于1元,</text>
						<text>
							最大抵扣积分{{ maxCanUsePoints }}
						</text>
						<text>, 最小抵扣积分0 </text>
					</view>
				</view>
				<view class="u-m-t-40 u-flex">
					<view>积分</view>
					<view class="u-m-l-32 border u-p-l-10 u-p-r-10 u-flex-1">
						<uni-easyinput type="number" @input="pointsInput" @change="pointsChange" paddingNone
							:inputBorder="false" v-model="form.points" placeholder="输入积分抵扣数量"></uni-easyinput>
					</view>
				</view>
			</view>
		</template>
		<template #btn>
			<view class="u-p-30">
				<view class="u-m-t-10">
					<my-button @tap="confirm" shape="circle" fontWeight="700">修改</my-button>
					<view class="">
						<my-button @tap="close" type="cancel" bgColor="#fff">取消</my-button>
					</view>
				</view>
			</view>
		</template>
	</my-model>
</template>

<script setup>
	import {
		reactive,
		nextTick,
		ref,
		watch
	} from "vue";
	import myModel from "@/components/my-components/my-model.vue";
	import myButton from "@/components/my-components/my-button.vue";
	import myTabs from "@/components/my-components/my-tabs.vue";
	import infoBox from "@/commons/utils/infoBox.js";
	const props = defineProps({
		title: {
			type: String,
			default: "积分抵扣",
		},
		maxCanUsePoints: {
			type: Number,
			default: 0
		},
		pointDeductionRule: {
			type: Object,
			default: () => {
				return {
					enableRewards: false,
					unusableReason: "",
					minDeductionPoints: 0,
					maxUsablePoints: 0,
				};
			},
		},
		price: {
			type: [Number, String],
			default: 0,
		},
	});

	function to2(n) {
		if (!n) {
			return "";
		}
		return n.toFixed(2);
	}

	function pointsInput(e) {
		setTimeout(() => {
			form.points = Math.floor(e);
		}, 100);
	}

	function pointsChange(newval) {
		form.points = Math.floor(newval);
		if (newval < 0) {
			form.points = 0;
			return infoBox.showToast("积分抵扣不能小于0");
		}
		if (newval > props.maxCanUsePoints) {
			form.points = props.price;
			return infoBox.showToast(
				"积分抵扣不能大于" + props.maxCanUsePoints
			);
		}
	}

	const form = reactive({
		points: props.price,
	});
	watch(
		() => props.price,
		(newval) => {
			form.points = newval;
		}
	);

	function resetForm() {
		form.points = 0;
	}

	const model = ref(null);

	function open() {
		model.value.open();
		form.points = props.price;
	}

	function close() {
		model.value.close();
	}
	const emits = defineEmits(["confirm"]);

	function confirm() {
		emits("confirm", Math.floor(form.points));
		close();
	}
	defineExpose({
		open,
		close,
	});
</script>

<style lang="scss" scoped>
	.border {
		border-radius: 8rpx;
		overflow: hidden;
		border-color: #999;
	}

	.lh34 {
		line-height: 34rpx;
	}

	.tag {
		background-color: #fff;
		border: 1px solid #e5e5e5;
		line-height: inherit;
		font-size: 24rpx;
		color: #666666;
		padding: 6rpx 20rpx;
		border-radius: 8rpx;

		&.active {
			border-color: #e6f0ff;
			color: $my-main-color;
		}
	}

	.hover-class {
		background-color: #e5e5e5;
	}

	.discount {
		.u-absolute {
			top: 0;
			bottom: 0;
			right: 0;
		}
	}

	.bg1 {
		background: #f7f7fa;
	}

	.tab {
		padding: 0 80rpx;
	}

	.border {
		border: 1px solid #e5e5e5;
		border-radius: 4rpx;
	}

	.input-box {
		padding: 22rpx 32rpx;
		font-size: 28rpx;
		color: #666;
	}

	.placeholder-class {
		font-size: 28rpx;
	}
</style>