<template>
	<view class="uploade-file">
		
		<view class="fileList flex flex_wrap">
			<view class="previewImages" v-for="(item,index) in fileList" :key="index">
				<image mode="aspectFill" :src="item" :data-index="index" @click="previewImage" class="previewImg" />
				<u-icon name="close-circle-fill" class="clearIcon" size="30" @click="deleteFile" :index='index' />
			</view>
			<template v-if="isIos">
				<view class="uploadeBtn flex_col" @click="onUpLoad">
					<view class="t-icon t-icon-picture" />
					<view class="">
						上传图片
					</view>
					<view class="required" v-if="required">
						*
					</view>
				</view>
			</template>
			<template v-else>
				<u-upload :fileList="fileList" :maxCount="maxCount" :sizeType="['compressed']" multiple @afterRead="uploadAfterRead" :previewImage="false">
					<!-- 自定义上传按钮 -->
					<view class="uploadeBtn flex_col" v-if="isShowBtn">
						<view class="t-icon t-icon-picture" />
						<view class="">
							上传图片
						</view>
						<view class="required" v-if="required">
							*
						</view>
					</view>
					<view v-else style=" height: 140rpx"></view>
				</u-upload>
			</template>
		</view>
	</view>
</template>

<script>
	const uploadBehavior = require('../../../mixins/uploadBehavior')
	export default {
		name: "bs-uploader",
		mixins: [uploadBehavior],
		options: { styleIsolation: 'shared' },
		props: {
			uploadTitle: {
				type: String,
				default: ""
			},
			btnTitle: { //按钮名字
				type: String,
				default: "上传图片"
			},
			isShowBtn: {
				type: Boolean,
				default: true //是否显示上传按钮
			},
			required: {
				type: Boolean,
				default: false //图片是否必传
			},
			maxCount: {
				type: Number,
				default: 6
			}
		},
		data() {
			return {

			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.uploade-file {
		.uploade-title {
			font-size: 28rpx;
			color: #8C8C8C;
			margin-bottom: 24rpx;
		}

		.fileList {
			width: 100%;

			.previewImages {
				position: relative;
				overflow: hidden;

				.previewImg {
					width: 218rpx;
					height: 218rpx;
					margin: 0 0 20rpx 20rpx;
				}

				/deep/.uicon-close-circle-fill {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #fff;
					color: #D81E06 !important;
					position: absolute;
					top: 4rpx;
					right: 4rpx;
				}
			}

			.uploadeBtn {
				position: relative;
				color: #929292;
				width: 218rpx;
				height: 218rpx;
				border: 2rpx dashed #D9D9D9;
				border-radius: 4rpx;
				background-color: #FFFFFF;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				
				.t-icon-picture{
					width: 50rpx;
					height: 50rpx;
				}

				.orderTotal {
					color: #333333;
					position: absolute;
					right: -100rpx;
					bottom: 0;
					z-index: 999;
				}
				.required{
					color: #D81E06;
					position: absolute;
					left: -15rpx;
					top: 0rpx;
					
				}
			}
		}

	}
</style>
