<template>
	<view class="index">
		<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1" width="170" height="170">
			<view class="index-upload baiyin-flex baiyin-flex-c-t baiyin-flex-c-b">
				<image v-if="imgType === 'camera'" src="@/static/icon/zp1.png" mode="widthFix"></image>
				<view class="index-upload-tlo baiyin-flex baiyin-flex-wrap baiyin-flex-c-t baiyin-flex-c-b" v-else-if="imgType === 'cross'">
					<image :class="crossTextShow ? 'index-upload-tlo-lp' : ''" src="@/static/icon/zp4.png" mode=""></image>
					<view class="" v-if="crossTextShow">上传</view>
				</view>
			</view>
		</u-upload>
	</view>
</template>

<script>
import apiBaseConfig from '@/config/index.js';
export default {
	props: {
		imgType: {
			type: String,
			default: 'camera' //camera cross
		},
		crossTextShow: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			imgBgUrl: apiBaseConfig.imgBgUrl,
			globalData: getApp().globalData,
			fileList6: []
		};
	},
	onLoad() {},
	methods: {
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.index {
	&-upload {
		width: 170rpx;
		height: 170rpx;
		background-color: #f3f3f3;
		> image {
			width: 52rpx;
			height: 52rpx;
		}
		&-tlo {
			width: 100%;
			height: 100%;
			image {
				width: 40rpx;
				height: 40rpx;
			}
			view {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #000000;
				margin-top: -45rpx;
			}
			&-lp {
				margin-top: 43rpx;
			}
		}
	}
}
</style>