<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="变量值" class="w-full">
									<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="flex justify-between items-center panel-header">
				<span>对话消息</span>
				<el-button type="primary" size="small" @click="addMessage">
					<el-icon>
						<Plus />
					</el-icon>
					添加
				</el-button>
			</div>
			<div class="param-item">
				<el-draggable v-model="messages" :animation="200" item-key="index" handle=".drag-handle" class="w-full">
					<template #item="{ element: message, index }">
						<div class="mb-2">
							<div style="display: flex; align-items: center; margin-bottom: 5px">
								<el-icon class="cursor-move drag-handle">
									<Rank />
								</el-icon>
								<el-select v-model="message.role" class="w-full">
									<el-option v-for="option in roleOptions" :key="option.value" :label="option.label" :value="option.value" />
								</el-select>
								<el-button v-if="index !== 0" @click="removeMessage(index)">
									<el-icon>
										<Delete />
									</el-icon>
								</el-button>
							</div>
							<el-input v-model="message.content" type="textarea" :rows="3" placeholder="使用${变量名}格式引用上方定义的变量" />
						</div>
					</template>
				</el-draggable>
			</div>
		</div>

		<!-- 模型参数配置 -->
		<div class="mb-2 panel-section">
			<div class="panel-header">
				<span>模型配置</span>
			</div>

			<el-form label-position="top">
				<div class="param-item param-item-margin">
					<div class="flex items-center">
						<span class="mr-2">多模态：</span>
						<el-radio-group v-model="modelConfig.isVision" @change="onVisionChange">
							<el-radio label="0">否</el-radio>
							<el-radio label="1">是</el-radio>
						</el-radio-group>
					</div>
				</div>
				<div class="param-item param-item-margin">
					<div class="flex items-center">
						<span class="mr-2">大模型：</span>
						<model-select
							v-model="modelConfig.model"
							:key="modelSelectKey"
							:type="modelConfig.isVision === '1' ? ['Vision'] : undefined"
							class="flex-1"
						/>
					</div>
				</div>
				<template v-if="modelConfig.isVision === '1'">
					<div class="param-item param-item-margin">
						<div class="flex items-center">
							<span class="mr-2">图片来源：</span>
							<el-select v-model="modelConfig.picUrl" placeholder="请选择图片变量" class="flex-1">
								<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>
						</div>
					</div>
				</template>
			</el-form>
		</div>

		<!-- 输出变量部分 -->
		<div class="panel-section">
			<div class="panel-header">
				<span>输出变量</span>
			</div>

			<div class="params-list">
				<div v-for="(output, index) in outputParams" :key="index" class="mb-2">
					<div class="param-item">
						<el-row :gutter="12">
							<el-col :span="9">
								<el-text> 变量名： </el-text>
								<el-tag>{{ output.name }}</el-tag>
							</el-col>
							<el-col :span="2">
								<el-text>|</el-text>
							</el-col>
							<el-col :span="11">
								<el-text> 变量类型： </el-text>
								<el-tag>{{ output.type }}</el-tag>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Plus, Delete, Rank } from '@element-plus/icons-vue';
import common from './common';
import draggable from 'vuedraggable';
import ModelSelect from '../components/ModelSelect.vue';

export default {
	name: 'LlmPanel',
	mixins: [common],
	components: {
		Plus,
		Delete,
		Rank,
		'el-draggable': draggable,
		ModelSelect,
	},
	data() {
		return {
			messages: this.node.llmParams.messages,
			modelConfig: this.node.llmParams.modelConfig || {
				model: '',
				isVision: '0',
				max_tokens: 50,
				temperature: 0.7,
				top_p: 1,
			},
			modelList: [],
			roleOptions: [
				{ value: 'USER', label: 'USER' },
				{ value: 'SYSTEM', label: 'SYSTEM' },
				{ value: 'AI', label: 'ASSISTANT' },
			],
			modelSelectKey: 0,
		};
	},
	watch: {
		'modelConfig.picUrl': function (val) {
			this.node.llmParams.modelConfig.picUrl = val;
		},
		modelConfig: {
			deep: true,
			handler(val) {
				this.node.llmParams.modelConfig = val;
			},
		},
	},
	methods: {
		addMessage() {
			this.messages.push({
				role: 'USER',
				content: '',
			});
		},
		removeMessage(index) {
			if (this.messages.length > 1) {
				this.messages.splice(index, 1);
			}
		},
		onVisionChange() {
			this.modelConfig.model = '';
			this.modelConfig.picUrl = '';
			this.modelSelectKey++;
		},
	},
};
</script>

<style scoped>
.cursor-move {
	margin-right: 10px;
}
.w-full {
	margin-right: 15px;
}
</style>
