<!-- 附件上传 -->
<template>
	<div class="g-components-upload-picture">
		<a-upload v-model:file-list="fileList" class="avatar-uploader" :show-upload-list="true" :before-upload="beforeUpload" @preview="setVisible" :list-type="listtype" @change="handleUpload" @remove="handleRemove" :maxCount="maxCount" :accept="accept">
			<img v-if="image" :src="image" alt="avatar" />
			<div v-else>
				<div v-if="listtype == 'picture'">
					<a-button>
						<template #icon>
							<PlusOutlined />
						</template>
						{{ btnText }}
					</a-button>
				</div>
				<div v-if="listtype == 'picture-card'">
					<plus-outlined />
					<div style="margin-top: 8px" v-if="btnText != '职位图片'">{{ btnText }}</div>
				</div>
			</div>
		</a-upload>

		<a-image v-if="imgUrl" :width="200" :height="0" :style="{ display: 'none', verticalAlign: 'top' }" :preview="{ visible, onVisibleChange: closeVisible }" :src="imgUrl" />
		<!-- 视频预览 -->
		<videoPreview :videoModal="videoModal" />
	</div>
	<!--  -->
</template>

<script setup>
/* 附件上传。
 * @params   list 回显的图片数组
 * @params   from 来源 字符串 默认为default，调用指定接口
 * @params   listtype 类型 字符串
 * 				      picture 卡片式文件列表
 * 					  picture-card 照片墙式文件列表
 * @function submitEvent 上传成功回调，返回对象格式
 * 						 {
 *							list:图片数组
 * 							image:当前上传的oss地址
 * 						 }
 * @function removeEvent 删除事件，返回对象格式。内容为图片信息
 */
import { ref, onMounted, getCurrentInstance, watch, defineEmits, defineProps } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { uploadImage } from "../../../api/base.js";
import { delivryUploadUserImage, delivryDelUserImage } from "../../../api/other/delivery.js";
import { useStore } from "../../../stores/counter.ts";
import videoPreview from "../image/videoPreview.vue";
import $ from "jquery";

/* #################### 初始化事件 #################### */
const storeJS = useStore();
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;
const emits = defineEmits(["submitEvent", "removeEvent"]);
const props = defineProps({
	list: {
		type: Array,
		default: () => {
			return [];
		},
	},
	from: {
		type: String,
		default: () => {
			return "default";
		},
	},
	type: {
		type: String,
		default: () => {
			return "picture";
		},
	},
	text: {
		type: String,
		default: () => {
			return "上传";
		},
	},
	accept: {
		type: String,
		default: () => {
			return "image/png,image/jpg,image/jpeg";
		},
	},
	maxCount: {
		type: Number,
		default: () => {
			return 2;
		},
	},
});
const listtype = ref("picture");
const image = ref("");
const fileList = ref([]);
const btnText = ref("");
const imgUrl = ref("");
onMounted(() => {
	image.value = "";
	fileList.value = props.list;
	console.log("fileList.value", fileList.value);
	listtype.value = props.type ? props.type : "picture";
	btnText.value = props.text ? props.text : "上传";
	// console.log('annex mounted:',props,' -- ',props.list);
});
const beforeUpload = (file) => {
	return false;
};
const closeVisible = () => {
	visible.value = false;
};
const visible = ref(false);
const videoModal = ref({});

const setVisible = (file) => {
	console.log(file.thumbUrl);
	if (file.thumbUrl.indexOf("mp4") > -1) {
		setTimeout(() => {
			videoModal.value.url = file.url;
			videoModal.value.isShow = true;
		}, 200);
	} else {
		imgUrl.value = file.thumbUrl;
		setTimeout(() => {
			visible.value = true;
		}, 200);
	}
};
const handleUpload = (info) => {
	console.log("info", info);
	// return;
	if (info.file.status == "removed") {
		// 删除
	} else {
		// 新增
		uploadImage().then((res) => {
			let dataObj = {};
			dataObj.policy = res.data.data.policy;
			dataObj.signature = res.data.data.signature;
			dataObj.ossaccessKeyId = res.data.data.accessid;
			dataObj.key = res.data.data.dir + commonJS.getUUID() + "_${filename}";
			dataObj.dir = res.data.data.dir;
			dataObj.host = res.data.data.host;
			let url = "http://matripe-cms.oss-cn-beijing.aliyuncs.com";
			var formData = new FormData();
			//注意formData里append添加的键的大小写
			formData.append("key", dataObj.key); //存储在oss的文件路径
			formData.append("OSSAccessKeyId", dataObj.ossaccessKeyId); //accessKeyId
			formData.append("policy", dataObj.policy); //policy
			formData.append("Signature", dataObj.signature); //签名
			formData.append("success_action_status", "200"); // 上传成功返回的状态码，不设置则是204
			formData.append("file", info.file); // 一定在最后
			// 创建请求的选项对象
			$.ajax({
				type: "post",
				url: "http://matripe-cms.oss-cn-beijing.aliyuncs.com",
				data: formData,
				contentType: false, // 不设置Content-Type请求头
				processData: false,
				success: function (data) {
					fileList.value[fileList.value.length - 1].thumbUrl = dataObj.host + "/" + dataObj.key.replace("${filename}", info.file.name);
					if (props.from == "default") {
						delivryUploadUserImage({
							fkId: storeJS.$state.deliveryUserid.content,
							url: fileList.value[fileList.value.length - 1].thumbUrl,
							type: 20,
							recordState: 1,
						}).then((imageRes) => {
							message.success("添加成功");
							fileList.value[fileList.value.length - 1].id = imageRes.data.img.id;
							emits("submitEvent", {
								list: fileList.value,
								image: fileList.value[fileList.value.length - 1].thumbUrl,
							});
						});
					} else {
						emits("submitEvent", {
							list: fileList.value,
							image: fileList.value[fileList.value.length - 1].thumbUrl,
						});
					}
				},
				fail: function (err) {
					console.log(err);
				},
			});
		});
	}
};

const handleRemove = ($data) => {
	if (props.from == "default") {
		delivryDelUserImage($data.id).then(() => {
			message.success("删除成功");
			emits("removeEvent", $data);
		});
	} else {
		emits("removeEvent", $data);
	}
};
</script>

<style lang="less">
.g-components-upload-picture {
	.ant-upload-list {
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		.ant-upload-list-item-container {
			width: calc(50% - 20px);
			margin-right: 20px;
			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}
	.ant-upload-list-item-name {
		color: #1677ff !important;
		&:hover {
			background-color: #ffffff !important;
		}
	}
}
</style>
