<template>
	<!-- 底部彈窗容器，使用 uni-popup 實現(xiàn)彈窗基礎(chǔ)功能 -->
	<uni-popup 
		ref="popup" 
		type="bottom" 
		background-color="#fff" 
		borderRadius="60rpx 60rpx 0 0"
	>
		<!-- 鍵盤容器，支持自定義高度和內(nèi)邊距 -->
		<view 
			class="w-p-100 mt-30 pr-15 pl-15 pb-15 border-box overflow-y" 
			:style="{height:height}"
		>
			<!-- 鍵盤按鈕區(qū)域，使用 grid 布局實現(xiàn)6列均勻分布 -->
			<view class="keyboard-content h-p-100">
				<view 
					v-for="item in charts" 
					:key="item.id" 
					class="key-item"  
					@click="handleInput(item.value)"
				>
					{{item.value}}
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue'

	// 彈窗實例引用，用于控制彈窗打開/關(guān)閉
	const popup = ref(null)

	// 組件 props 定義
	const props = defineProps({
		// 彈窗高度，默認(rèn) 400rpx
		height: {
			type: String,
			default: '400rpx'
		},
	})

	// 角標(biāo)鍵盤數(shù)據(jù)（上標(biāo)數(shù)字 + 上標(biāo)負(fù)號）
	const charts = [
		{ id: 1, value: '1', type: 'up' },
		{ id: 2, value: '2', type: 'up' },
		{ id: 3, value: '3', type: 'up' },
		{ id: 4, value: '?', type: 'up' },
		{ id: 5, value: '?', type: 'up' },
		{ id: 6, value: '?', type: 'up' },
		{ id: 7, value: '?', type: 'up' },
		{ id: 8, value: '?', type: 'up' },
		{ id: 9, value: '?', type: 'up' },
		{ id: 10, value: '?', type: 'up' },
		{ id: 11, value: '?', type: 'up' } // 上標(biāo)負(fù)號
	]

	// 定義組件事件，用于向父組件傳遞輸入結(jié)果
	const emit = defineEmits(['handleInput'])

	// 記錄當(dāng)前操作的屬性（可選，用于父組件區(qū)分多個輸入場景）
	const attrbuteHandle = ref('')

	/**
	 * 打開彈窗
	 * @param {String} attrbute - 可選參數(shù)，標(biāo)識當(dāng)前操作的輸入字段
	 */
	const open = (attrbute) => {
		attrbuteHandle.value = attrbute
		popup.value.open()
	}

	/**
	 * 關(guān)閉彈窗
	 */
	const close = () => {
		popup.value.close()
	}

	/**
	 * 處理鍵盤點擊事件
	 * @param {String} value - 選中的角標(biāo)字符
	 */
	const handleInput = (value) => {
		// 向父組件發(fā)射事件，傳遞選中的字符和當(dāng)前操作的屬性
		emit('handleInput', value, attrbuteHandle.value)
	}

	// 暴露組件方法，允許父組件調(diào)用 open 和 close
	defineExpose({
		open,
		close
	})
</script>

<style scoped>
	/* 鍵盤容器樣式：網(wǎng)格布局 + 背景色 + 邊框圓角 */
	.keyboard-content {
		background-color: #f5f5f5;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; /* 6列均勻分布 */
		border: 1px solid #ccc;
		border-radius: 10rpx;
	}

	/* 鍵盤按鈕樣式：居中對齊 + 邊框 + 圓角 + 間距 */
	.key-item {
		box-sizing: border-box;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		margin: 20rpx;
		background-color: #fff;
		transition: background-color 0.2s;
	}

	/* 按鈕點擊反饋 */
	.key-item:active {
		background-color: #e8f4f8;
		border-color: #409eff;
	}

	/* 輔助樣式（適配 UniApp 尺寸單位） */
	.w-p-100 { width: 100%; }
	.h-p-100 { height: 100%; }
	.mt-30 { margin-top: 30rpx; }
	.pr-15 { padding-right: 15rpx; }
	.pl-15 { padding-left: 15rpx; }
	.pb-15 { padding-bottom: 15rpx; }
	.border-box { box-sizing: border-box; }
</style>

<template>
	<view class="container">
		<!-- 示例：輸入框 + 打開鍵盤按鈕 -->
		<view class="input-group">
			<input 
				v-model="inputValue" 
				placeholder="點擊下方按鈕輸入角標(biāo)"
				class="input"
			/>
			<button @click="openSubscriptKeyboard">打開角標(biāo)鍵盤</button>
		</view>

		<!-- 引入角標(biāo)鍵盤組件 -->
		<subscript-keyboard 
			ref="subscriptKeyboard" 
			height="450rpx"  <!-- 自定義彈窗高度 -->
			@handleInput="handleSubscriptInput"
		/>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	// 引入組件（根據(jù)實際文件路徑調(diào)整）
	import SubscriptKeyboard from '@/components/SubscriptKeyboard/SubscriptKeyboard.vue'

	const inputValue = ref('')
	const subscriptKeyboard = ref(null)

	/**
	 * 打開角標(biāo)鍵盤
	 */
	const openSubscriptKeyboard = () => {
		// 可傳遞參數(shù)標(biāo)識當(dāng)前操作的輸入字段（如多個輸入框時使用）
		subscriptKeyboard.value.open('inputValue')
	}

	/**
	 * 處理角標(biāo)輸入回調(diào)
	 * @param {String} value - 選中的角標(biāo)字符
	 * @param {String} attr - 當(dāng)前操作的屬性名
	 */
	const handleSubscriptInput = (value, attr) => {
		// 將選中的角標(biāo)字符拼接到輸入框
		inputValue.value += value
		// 如需自動關(guān)閉彈窗，可添加：subscriptKeyboard.value.close()
	}
</script>

<style scoped>
	.container {
		padding: 50rpx;
	}
	.input-group {
		margin-bottom: 30rpx;
	}
	.input {
		border: 1px solid #ccc;
		border-radius: 8rpx;
		padding: 15rpx;
		margin-bottom: 20rpx;
	}
	button {
		background-color: #409eff;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		padding: 15rpx;
	}
</style>

// 擴展 charts 數(shù)據(jù)
const charts = [
	// 上標(biāo)數(shù)字
	{ id: 1, value: '1', type: 'up' },
	// ... 其他上標(biāo)數(shù)據(jù)
	// 下標(biāo)數(shù)字
	{ id: 12, value: '?', type: 'down' },
	// ... 其他下標(biāo)數(shù)據(jù)
]

// 添加 Prop 控制顯示類型
const props = defineProps({
	// ... 原有 props
	type: {
		type: String,
		default: 'up', // up-上標(biāo)，down-下標(biāo)
		validator: (value) => ['up', 'down'].includes(value)
	}
})

// 渲染時根據(jù) type 過濾數(shù)據(jù)
const displayCharts = computed(() => {
	return charts.filter(item => item.type === props.type)
})