<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" />
	</cl-crud>
</template>

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

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

const { service } = useCool();

// cl-table 表格配置
const Table = useTable({
	columns: [
		{
			type: 'selection',
			width: 60
		},
		{
			label: '模型名称',
			prop: 'modelName',
			minWidth: 150
		},
		{
			label: '模型标识',
			prop: 'modelKey',
			minWidth: 120
		},
		{
			label: '模型类型',
			prop: 'modelType',
			minWidth: 120
		},
		{
			label: '描述',
			prop: 'description',
			minWidth: 200,
			showOverflowTooltip: true
		},
		{
			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: '700px'
	},
	props: {
		labelWidth: '120px'
	},
	items: [
		{
			label: '模型名称',
			prop: 'modelName',
			required: true,
			component: {
				name: 'el-input',
				props: {
					placeholder: '请输入模型名称，如：GPT-4、通义千问等'
				}
			}
		},
		{
			label: '模型标识',
			prop: 'modelKey',
			required: true,
			component: {
				name: 'el-input',
				props: {
					placeholder: '请输入模型唯一标识，如：gpt-4、qwen-max'
				}
			}
		},
		{
			label: '模型类型',
			prop: 'modelType',
			required: true,
			component: {
				name: 'el-input',
				props: {
					placeholder: '请输入模型类型，如：openai、qwen、zhipu'
				}
			}
		},
		{
			label: '描述',
			prop: 'description',
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					rows: 3,
					placeholder: '请输入模型描述信息'
				}
			}
		},
		{
			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,
					placeholder: '排序号，数字越小越靠前'
				}
			}
		}
	]
});

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