<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 批量删除 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="搜索模板名称、标识、场景" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert">
			<!-- 自定义提示词预览 -->
			<template #slot-prompt-preview="{ scope }">
				<div v-if="scope.promptContent" class="prompt-preview">
					<el-divider content-position="left">提示词预览</el-divider>
					<div class="preview-content">{{ scope.promptContent }}</div>
				</div>
			</template>
		</cl-upsert>
	</cl-crud>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'aiconfig-template'
});

import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { reactive } from 'vue';

const { service } = useCool();

// 模型列表
const modelList = reactive<any[]>([]);

// 使用场景列表
const sceneOptions = [
	{ label: '日报生成', value: 'daily_report' },
	{ label: '周报生成', value: 'weekly_report' },
	{ label: '月报生成', value: 'monthly_report' },
	{ label: '工作建议', value: 'work_suggestion' },
	{ label: '数据分析', value: 'data_analysis' }
];

// 获取模型列表
async function loadModels() {
	try {
		const res = await service.aiconfig.model.list();
		modelList.length = 0;
		modelList.push(...res.map((item: any) => ({ label: item.modelName, value: item.id })));
	} catch (err) {
		console.error('加载模型列表失败:', err);
	}
}

// cl-table 表格配置
const Table = useTable({
	columns: [
		{
			type: 'selection',
			width: 60
		},
		{
			label: '模板名称',
			prop: 'templateName',
			minWidth: 150
		},
		{
			label: '模板标识',
			prop: 'templateKey',
			minWidth: 150
		},
		{
			label: '关联模型',
			prop: 'modelId',
			minWidth: 120,
			dict: modelList
		},
		{
			label: '使用场景',
			prop: 'scene',
			minWidth: 120,
			dict: sceneOptions
		},
		{
			label: '温度参数',
			prop: 'temperature',
			width: 100
		},
		{
			label: '最大Token',
			prop: 'maxTokens',
			width: 100
		},
		{
			label: '状态',
			prop: 'status',
			width: 100,
			dict: [
				{
					label: '禁用',
					value: 0,
					type: 'danger'
				},
				{
					label: '启用',
					value: 1,
					type: 'success'
				}
			]
		},
		{
			label: '排序',
			prop: 'orderNum',
			width: 100,
			sortable: 'custom'
		},
		{
			label: '创建时间',
			prop: 'createTime',
			minWidth: 160,
			sortable: 'custom'
		},
		{
			type: 'op',
			width: 180,
			buttons: ['edit', 'delete']
		}
	]
});

// cl-upsert 新增、编辑配置
const Upsert = useUpsert({
	dialog: {
		width: '900px'
	},
	props: {
		labelWidth: '140px'
	},
	items: [
		{
			label: '模板名称',
			prop: 'templateName',
			required: true,
			component: {
				name: 'el-input',
				props: {
					placeholder: '请输入模板名称，如：日报格式化模板'
				}
			}
		},
		{
			label: '模板标识',
			prop: 'templateKey',
			required: true,
			component: {
				name: 'el-input',
				props: {
					placeholder: '请输入模板唯一标识，如：daily_report_format'
				}
			}
		},
		{
			label: '关联模型',
			prop: 'modelId',
			required: true,
			component: {
				name: 'el-select',
				options: modelList,
				props: {
					placeholder: '请选择关联的AI模型'
				}
			}
		},
		{
			label: '使用场景',
			prop: 'scene',
			required: true,
			component: {
				name: 'el-select',
				options: sceneOptions,
				props: {
					placeholder: '请选择使用场景'
				}
			}
		},
		{
			label: '系统提示词',
			prop: 'systemPrompt',
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					rows: 3,
					placeholder: '请输入系统提示词（System Prompt），用于定义AI的角色和行为'
				}
			}
		},
		{
			label: '提示词内容',
			prop: 'promptContent',
			required: true,
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					rows: 8,
					placeholder:
						'请输入提示词内容，可使用变量如：{{content}}、{{date}}等\n\n示例：\n请将以下语音转写的内容格式化为工作日报：\n{{content}}\n\n要求：\n1. 提炼关键工作内容\n2. 按时间顺序整理\n3. 突出重点和成果'
				}
			}
		},
		{
			label: '温度参数',
			prop: 'temperature',
			value: 0.7,
			component: {
				name: 'el-slider',
				props: {
					min: 0,
					max: 1,
					step: 0.1,
					showInput: true,
					marks: {
						0: '0',
						0.5: '0.5',
						1: '1'
					}
				}
			},
			tips: '控制输出的随机性，0表示确定性输出，1表示最大随机性'
		},
		{
			label: '最大Token数',
			prop: 'maxTokens',
			value: 2000,
			component: {
				name: 'el-input-number',
				props: {
					min: 100,
					max: 8000,
					step: 100
				}
			},
			tips: '限制AI生成的最大长度'
		},
		{
			label: '状态',
			prop: 'status',
			value: 1,
			component: {
				name: 'el-radio-group',
				options: [
					{
						label: '禁用',
						value: 0
					},
					{
						label: '启用',
						value: 1
					}
				]
			}
		},
		{
			label: '排序号',
			prop: 'orderNum',
			value: 0,
			component: {
				name: 'el-input-number',
				props: {
					min: 0,
					step: 1
				}
			}
		},
		{
			label: '备注',
			prop: 'remark',
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					rows: 2,
					placeholder: '请输入备注信息'
				}
			}
		},
		{
			prop: 'slot-prompt-preview',
			component: {
				name: 'slot-prompt-preview'
			}
		}
	],
	onOpen() {
		// 打开弹窗时加载模型列表
		loadModels();
	}
});

// cl-crud 配置
const Crud = useCrud(
	{
		service: service.aiconfig.template
	},
	app => {
		app.refresh();
	}
);

// 初始化加载模型列表
loadModels();
</script>

<style scoped>
.prompt-preview {
	margin-top: 10px;
}

.preview-content {
	padding: 15px;
	background-color: #f5f7fa;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	white-space: pre-wrap;
	word-wrap: break-word;
	max-height: 300px;
	overflow-y: auto;
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: 13px;
	line-height: 1.6;
	color: #606266;
}
</style>
