<template>
	<div class="panel-content">
		<!-- 输入变量部分 -->
		<div class="mb-2 panel-section">
			<div class="flex justify-between items-center panel-header">
				<span>变量输入</span>
				<el-button type="primary" size="small" @click="addParam">
					<el-icon>
						<Plus />
					</el-icon>
					添加
				</el-button>
			</div>

			<div class="params-list">
				<div v-for="(param, index) in inputParams" :key="index" class="mb-2">
					<div class="param-item">
						<el-row :gutter="12">
							<el-col :span="9">
								<el-input v-model="param.name" placeholder="变量名" />
							</el-col>
							<el-col :span="12">
								<el-select v-model="param.type" placeholder="变量值">
									<el-option-group v-for="item in previousOutputParams" :key="item.name" :label="item.name">
										<el-option v-for="param in item.list" :key="param.name" :label="param.name" :value="`${item.id}.${param.name}`" />
									</el-option-group>
								</el-select>
							</el-col>
							<el-col :span="3">
								<el-button @click="removeParam(index)">
									<el-icon>
										<Delete />
									</el-icon>
								</el-button>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>

		<!-- 文本内容编辑 -->
		<div class="mb-2 panel-section">
			<div class="panel-header">
				<span>文本内容</span>
			</div>
			<div class="text-editor">
				<el-input
					v-model="node.textParams.content"
					type="textarea"
					:rows="8"
					placeholder="请输入要返回的固定文本内容..."
					show-word-limit
					maxlength="5000"
				/>
			</div>
			<div class="text-tips">
				<el-alert title="提示：此节点将返回您设置的固定文本内容，可用于流程中的固定消息、说明文字等场景。" type="info" :closable="false" show-icon />
			</div>
		</div>

		<!-- 输出变量配置 -->
		<div class="mb-2 panel-section">
			<div class="panel-header">
				<span>输出变量</span>
			</div>
			<div class="params-list">
				<div v-for="(param, index) in outputParams" :key="index" class="mb-2">
					<div class="param-item readonly">
						<el-row :gutter="12">
							<el-col :span="9">
								<el-input v-model="param.name" :disabled="true" placeholder="变量名" />
							</el-col>
							<el-col :span="12">
								<el-input v-model="param.type" :disabled="true" placeholder="变量类型" />
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Plus, Delete } from '@element-plus/icons-vue';
import common from './common.ts';
import './panel.css';

export default {
	name: 'TextPanel',
	components: {
		Plus,
		Delete,
	},
	mixins: [common],
	watch: {
		// 监听节点参数变化，确保节点有正确的默认参数
		'node.textParams': {
			handler() {
				if (!this.node.textParams) {
					this.$set(this.node, 'textParams', { content: '' });
				}
			},
			immediate: true,
			deep: true,
		},
	},
	created() {
		// 确保节点有textParams属性
		if (!this.node.textParams) {
			this.$set(this.node, 'textParams', { content: '' });
		}
	},
};
</script>

<style scoped>
.text-editor {
	margin-bottom: 12px;
}

.text-tips {
	margin-top: 8px;
}

.param-item.readonly {
	opacity: 0.6;
}

.param-item.readonly .el-input {
	background-color: #f5f7fa;
}
</style>
