<template>
	<fs-page>
		<fs-crud ref="crudRef" v-bind="crudBinding">
			<!-- <template #form_document_link="{ value, onChange, formData }">
				<div>
					<el-upload
						v-model:file-list="fileList"
						class="upload-demo"
						:action="uploadUrl"
						
						:on-change="handleChange"
						:before-upload="beforeUpload"
						:on-success="handleSuccess"
						:on-error="handleError"
						:limit="1"
					>
						<el-button type="primary">点击上传</el-button>
						<template #tip>
							<div class="el-upload__tip">
								请上传合同文件，支持 PDF/DOC/DOCX 格式
							</div>
						</template>
					</el-upload>
				</div>
			</template> -->
		</fs-crud>
	</fs-page>
</template>

<script lang="ts" setup name="contract">
import { onMounted, ref } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { GetPermission } from './api';
import { handleColumnPermission } from '/@/utils/columnPermission';
import type { UploadFile, UploadFiles } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';

const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions } = useFs({ createCrudOptions });

// 文件列表
const fileList = ref<UploadFiles>([]);

// 上传地址
const uploadUrl = ref(import.meta.env.VITE_API_URL + '/api/uploadfile/');

// 上传前验证
const beforeUpload = (file: File) => {
  const validTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
  const isValidType = validTypes.includes(file.type);
  const isLt10M = file.size / 1024 / 1024 < 10;

  if (!isValidType) {
    ElMessage.error('只能上传PDF/DOC/DOCX文件！');
    return false;
  }
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过 10MB！');
    return false;
  }
  return true;
};

// 文件状态改变时的钩子
const handleChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  console.log('文件变化:', uploadFile, uploadFiles);
};

// 上传成功回调
const handleSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	
  ElMessage.success('上传成功');
  console.log('上传成功:', response);
};

// 上传失败回调
const handleError = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  ElMessage.error('上传失败');
  console.error('上传失败:', error);
};

// 页面打开后获取列表数据
onMounted(async () => {
	// 设置列权限
	const newOptions = await handleColumnPermission(GetPermission, crudOptions);
	//重置crudBinding
	resetCrudOptions(newOptions);
	// 刷新
	crudExpose.doRefresh();
});
</script> 