import { reactive } from 'vue';
import { $t } from '@/plugins/i18n';
import { ElTag, ElText, type FormRules } from 'element-plus';

// 表格列
export const columns: TableColumnList = [
	{ type: 'selection', align: 'left' },
	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
	// 金额
	{
		label: $t('amount'),
		prop: 'amount',
		sortable: true,
		formatter({ type, amount }) {
			return type === -1 ? (
				<ElText size={'large'} type={'danger'} style={{ fontWeight: 800 }}>
					- {amount}￥
				</ElText>
			) : (
				<ElText size={'large'} type={'success'} style={{ fontWeight: 800 }}>
					+ {amount}￥
				</ElText>
			);
		},
		width: 200,
	},
	// 类别
	{
		label: $t('categoryName'),
		prop: 'categoryName',
		width: 150,
		formatter({ categoryName }) {
			return <ElTag effect={'plain'}>{categoryName}</ElTag>;
		},
	},
	// 描述
	{ label: $t('description'), prop: 'description' },
	// 交易日期
	{
		label: $t('transactionDate'),
		prop: 'transactionDate',
		width: 190,
		sortable: true,
		formatter({ transactionDate }) {
			return (
				<ElText type={'success'} style={{ fontWeight: 800 }}>
					{transactionDate}
				</ElText>
			);
		},
	},
	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
	{ label: $t('table.operation'), fixed: 'right', width: 160, slot: 'operation' },
];

// 添加规则
export const rules = reactive<FormRules>({
	// 类型：1 - 收入，-1 - 支出
	type: [{ required: true, message: `${$t('input')}${$t('type')}`, trigger: 'blur' }],
	// 金额
	amount: [{ required: true, message: `${$t('input')}${$t('amount')}`, trigger: 'blur' }],
	// 交易日期
	transactionDate: [{ required: true, message: `${$t('input')}${$t('transactionDate')}`, trigger: 'blur' }],
	// 类别id
	categoryId: [{ required: true, message: `${$t('input')}${$t('categoryId')}`, trigger: 'blur' }],
});