<template>
	<view class="goods-count">
		<!-- <template v-if="countNum">
			<text class="count-icon iconfont" @click.stop="handleCount('subtract')">&#xe65a;</text>
			<text class="count-num">{{countNum}}</text>
		</template> -->
		<text class="count-icon iconfont" @click.stop="handleCount('add')">&#xe659;</text>
	</view>
</template>

<script lang="ts" setup>
	import { ref, watch } from 'vue';

	const countNum = ref(0);
	type CountType = 'add' | 'subtract';
	const handleCount = (type: CountType) => {
		$emit('UpdateGoodsNum', 0)
		return
		switch (type) {
			case 'add':
				countNum.value++;
				break;
			case 'subtract':
				if (countNum.value && countNum.value > 0) {
					countNum.value--;
				}
				break;
		}
	}

	const $emit = defineEmits(['UpdateGoodsNum'])
	watch(() => countNum.value, (newCountNum) => {
		$emit('UpdateGoodsNum', newCountNum)
	})
</script>

<style lang="scss" scoped>
	.goods-count {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		padding-left: 10rpx;

		.count-icon {
			color: red;
			line-height: 1;
			font-size: 32rpx;
		}

		.count-num {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
			padding: 0 8rpx;
			line-height: 1;
		}
	}
</style>