<template>
	<a-drawer
		:title="'文件信息'"
		:width="900"
		:visible="visible"
		:destroy-on-close="true"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical" v-if="recordData.addFlag === 1">
			<a-tabs v-model:activeKey="activeKey">
				<a-spin :spinning="uploadLoading">
					<a-upload-dragger :show-upload-list="false" :custom-request="customRequestLocal">
						<p class="ant-upload-drag-icon">
							<inbox-outlined></inbox-outlined>
						</p>
						<p class="ant-upload-text" style="padding:0px 5px">单击或拖动文件到此区域进行上传</p>
					</a-upload-dragger>
				</a-spin>
			</a-tabs>
		</a-form>
		<br>
		<a-table
			ref="table"
			size="small"
			:columns="columns"
			:data-source="tableData"
			:expand-row-by-click="true"
			bordered
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'thumbnail'">
					<a v-if="record.suffix === 'png' ||
							record.suffix === 'jpg' ||
							record.suffix === 'jpng' ||
							record.suffix === 'ico' ||
							record.suffix === 'gif'"
					   :href="record.fileUrl" target="_blank">
						<img
							:src="record.thumbnail"
							class="record-img"
						/></a>
					<a v-else-if="record.suffix === 'doc' || record.suffix === 'docx'" @click="priview(record.kkFileUrl)" target="_blank">
						<img
							src="/src/assets/images/fileImg/docx.png"
							class="record-img"
						/></a>
					<a v-else-if="record.suffix === 'zip'" :href="record.fileUrl" target="_blank">
						<img
							src="/src/assets/images/fileImg/xlsx.png"
							class="record-img"
						/></a>
					<a v-else-if="record.suffix === 'xls' || record.suffix === 'xlsx'" @click="priview(record.kkFileUrl)" target="_blank">
						<img src="/src/assets/images/fileImg/zip.png" class="record-img"/></a>
					<a v-else-if="record.suffix === 'rar'" :href="record.fileUrl" target="_blank">
						<img src="/src/assets/images/fileImg/rar.png" class="record-img"/></a>
					<a v-else-if="record.suffix === 'ppt' || record.suffix === 'pptx'" @click="priview(record.kkFileUrl)" target="_blank">
						<img src="/src/assets/images/fileImg/ppt.png" class="record-img"
						/></a>
					<a v-else-if="record.suffix === 'txt'" @click="priview(record.kkFileUrl)" target="_blank">
						<img src="/src/assets/images/fileImg/txt.png" class="record-img"/></a>
					<a v-else-if="record.suffix === 'html'" @click="priview(record.kkFileUrl)" target="_blank">
						<img src="/src/assets/images/fileImg/html.png" class="record-img"/></a>
					<a v-else :href="record.fileUrl" target="_blank">
						<img src="/src/assets/images/fileImg/file.png" class="record-img"/></a>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<!--					<a @click="detailRef.onOpen(record)">详情</a>
										<a-divider type="vertical"/>-->
					<a :href="record.downloadPath" target="_blank">下载</a>
					<a-divider type="vertical"/>
					<a-popconfirm v-if="recordData.removeFlag === 1" title="删除此文件？" @confirm="deleteFile(record)">
						<a-button type="link" danger size="small">删除</a-button>
					</a-popconfirm>
				</template>
			</template>
		</a-table>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
<!--			<a-button type="primary" @click="onSubmit" v-if="'还款凭证,质押凭证'.indexOf(recordData.bizName) > -1">上传</a-button>-->
		</template>
		<uploadForm ref="uploadFormRef" @successful="table.refresh(true)"/>
		<detail ref="detailRef"/>
	</a-drawer>
</template>
<script setup name="depotGrainInfoFileForm">
import {cloneDeep} from 'lodash-es'
import {message} from 'ant-design-vue'
import fileApi from '@/api/dev/fileApi'
import detail from './detail.vue'
import {notification} from "ant-design-vue";
import tool from '@/utils/tool'
import depotGrainInfoApi from "@/api/biz/depotGrainInfoApi";
import depotRepayOrderApi from "@/api/biz/depotRepayOrderApi";
import depotLoanGrantApi from '@/api/biz/depotLoanGrantApi'
import {required, rules} from "@/utils/formRules";
import {Base64} from 'js-base64';
import sysConfig from "@/config";

// 抽屉状态
const visible = ref(false)
const emit = defineEmits({successful: null})

// 定义tableDOM
const table = ref()
const form = ref()
const formRef = ref()
const searchFormRef = ref()
let searchFormState = reactive({})
const uploadFormRef = ref()
const detailRef = ref()
const uploadLoading = ref(false)
const activeKey = ref('Local')
const submitLoading = ref(false)

const columns = [
	{
		title: '文件名称',
		dataIndex: 'name',
		ellipsis: true,
	},
	{
		title: '缩略图',
		dataIndex: 'thumbnail',
		ellipsis: true,
		width: '120px'
	},
	{
		title: '文件大小',
		dataIndex: 'sizeInfo',
		ellipsis: true,
		width: '80px'
	},
	{
		title: '文件后缀',
		dataIndex: 'suffix',
		ellipsis: true,
		width: '80px'
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		width: '180px'
	}
]

let selectedRowKeys = ref([])
// 列表选择配置
const options = {
	alert: {
		show: false,
		clear: () => {
			selectedRowKeys = ref([])
		}
	},
	rowSelection: {
		onChange: (selectedRowKey, selectedRows) => {
			selectedRowKeys.value = selectedRowKey
		}
	}
}
// 字段数据
const tableData = ref([])
const recordData = ref([])
let deleteNotAllowMsg = ''
// 打开抽屉
const onOpen = (record) => {
	visible.value = true
	recordData.value = Object.assign({}, record)
	console.log(recordData.value)
	//添加和删除按钮控制  (1:展示;2:不展示)
	if (!recordData.value.addFlag)
		recordData.value.addFlag = 1
	if (!recordData.value.removeFlag)
		recordData.value.removeFlag = 1
	if (recordData.value.bankOpApprovalState)
		deleteNotAllowMsg = '不能删除文件!'
	loadData()
}
const loadData = () => {
	depotGrainInfoApi.depotGrainInfoFileLst({"id": recordData.value.id}).then((data) => {
		tableData.value = data
	})
}
// 关闭抽屉
const priview = (url) => {
	let encode = encodeURIComponent(Base64.encode(url))
	url = sysConfig.API_URL.replaceAll('/api', '') + '/kkFile/onlinePreview?url=' + encode
	console.log(url)
	window.open(url);
}
// 关闭抽屉
const onClose = () => {
	deleteNotAllowMsg = ''
	recordData.value = {}
	visible.value = false
}
// 默认要校验的
const formRules = {}
// 删除
const deleteFile = (record) => {
	if (deleteNotAllowMsg) {
		message.warning(deleteNotAllowMsg)
		return false
	}
	depotGrainInfoApi.depotGrainInfoFileDelete({fileId: record.id, depotId: recordData.value.depotId}).then(() => {
		loadData()
	})
}
// 批量删除
const deleteBatchFile = () => {
	if (selectedRowKeys.value.length < 1) {
		message.warning('请选择一条或多条数据')
		return false
	}
	const params = selectedRowKeys.value.map((m) => {
		return {
			id: m
		}
	})
	fileApi.fileDelete(params).then(() => {
		table.value.clearRefreshSelected()
	})
}
// 存储位置
const engineOptions = tool.dictTypeList('FILE_ENGINE').map((item) => {
	return {
		value: item['dictValue'],
		label: item['name']
	}
})
// 上传本地文件
const customRequestLocal = (data) => {
	uploadLoading.value = true
	const fileData = new FormData()
	fileData.append('file', data.file)
	fileData.append('id', recordData.value.id)
	depotGrainInfoApi
		.depotGrainInfoFileUpload(fileData)
		.then(() => {
			loadData()
			notification.info({
				message: '文件',
				description: '已上传成功'
			})
		})
		.finally(() => {
			uploadLoading.value = false
		})
}
// 验证并提交数据
const onSubmit = () => {
	submitLoading.value = true
	const formDataParam = cloneDeep(recordData.value)
	formDataParam.bankOpApprovalState = '已上传凭证'
	if (recordData.value.bizName === '质押凭证') {
		depotLoanGrantApi
			.bankOpApproval(formDataParam)
			.then(() => {
				onClose()
				emit('successful')
			})
			.finally(() => {
				submitLoading.value = false
			})
	} else if (recordData.value.bizName === '还款凭证') {
		depotRepayOrderApi
			.bankOpApproval(formDataParam)
			.then(() => {
				onClose()
				emit('successful')
			})
			.finally(() => {
				submitLoading.value = false
			})
	}
}

// 抛出函数
defineExpose({
	onOpen
})
</script>
<style scoped>
.record-img {
	width: 40px;
	height: 40px;
}
</style>
