<template>
	<view>
		<u-form-item
			:label="label"
			:label-position="labelPosition"
			:prop="prop"
			:required="required"
		>
			<u-upload
				:file-list="modelValue"
				:multiple="multiple"
				:max-count="maxCount"
				width="79"
				height="79"
				useBeforeRead
				:accept="accept"
				@afterRead="fnAfterRead"
				@delete="fnDelete"
			/>
		</u-form-item>
		<u-line />
	</view>
</template>

<script>
import { setFileDelete } from "@/api";

export default {
	props: {
		label: {
			type: String,
			default: "图片",
		},
		labelPosition: {
			type: String,
			default: "top",
		},
		prop: {
			type: String,
			default: "",
		},
		required: {
			type: Boolean,
			default: true,
		},
		multiple: {
			type: Boolean,
			default: true,
		},
		maxCount: {
			type: Number,
			default: 4,
		},
		accept: {
			type: String,
			default: "image",
		},
		modelValue: {
			type: Array,
			required: true,
		},
	},

	data() {
		return {};
	},

	methods: {
		fnAfterRead({ file, index, name }) {
			if (this.multiple) {
				// 多选图片
				this.modelValue.push(...file);
			} else {
				// 单选图片
				this.modelValue.push(file);
			}
		},
		async fnDelete({ file, index, name }) {
			uni.showModal({
				title: "提示",
				content: this.accept === "image" ? "是否删除该图片" : "是否删除该视频",
				success: async (res) => {
					if (res.confirm) {
						if (file.IMGFILES_ID) {
							await setFileDelete({ IMGFILES_ID: event.file.IMGFILES_ID });
						}
						this.modelValue.splice(index, 1);
					}
				},
				fail: (err) => reject(err),
			});
		},
	},
};
</script>

<style scoped lang="scss"></style>
