<template>
	<view class="zzx-cell-box" @click="gotoPage(url)">
		<view class="cell-left">
			<view class="left-icon">
				<image v-if="icon" :src="icon" :style="{
				  width: iconSize,
				  height: iconSize
				}" class="empty-icon" mode="aspectFit" />
			</view>
			<view class="left-text">{{text}}</view>
		</view>
		<view class="cell-right">
			<view class="right-text">{{instructionText}}</view>
			<zzx-icon name="right"></zzx-icon>
		</view>
	</view>
</template>

<script lang="ts" setup>
	interface Props {
		icon ?: string         // 单元格图标
		text ?: string         // 单元格名字
		iconSize ?: string     // 图标尺寸（支持rpx/px）
		instructionText ?: string    // 右侧说明文字
		url ?: string  //跳转路径
	}
	// 默认props
	const props = withDefaults(defineProps<Props>(), {
		icon: '',  // 默认图标路径
		text: '',
		iconSize: '',
		instructionText: '说明文字',
		url: ''
	})

	const emit = defineEmits(['click']);

	const gotoPage = (path: string) => {
		if (!path) return;
		const hasHandlers = emit('click', path);
		if (!hasHandlers) {
			uni.navigateTo({ url: path });
		}
	};
</script>

<style scoped lang="less">
	.zzx-cell-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 80rpx;
		padding: 10rpx;

		.cell-left {
			display: flex;
			align-items: center;

			.left-text {
				margin-left: 10rpx;
				font-size: 30rpx;
			}
		}

		.cell-right {
			display: flex;
			.right-text {
				color: @minitext-color;
				margin-right: 10rpx;
				font-size: 28rpx;
			}
		}
	}

	.zzx-cell-box:active {
		background-color: #ececec;
	}
</style>