<template>
	<view class="uploade-file">
		<view class="uploade-title" v-if="uploadTitle">
			<text style="color: #f56c6c;position: absolute;left: 18rpx;" v-if="required">*</text>
			<text>{{uploadTitle}}（{{fileList.length}}/6）</text>
		</view>
		<view class="fileList flex flex_wrap">
			<view class="previewImages" v-for="(item,index) in fileDetailList" :key="index">
				<template v-if="item.type === 'image'">
					<image mode="aspectFill" :src="item.url" :data-index="index" @click="previewImage" class="previewImg" />
				</template>
				<template v-if="item.type === 'video'">
					<video class="previewImg" :src="item.url" :page-gesture="true" :show-mute-btn="true" :enable-play-gesture="true"/>
				</template>				
				<u-icon  v-if="isShowDelete" 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" />
					<text style="margin-top:10rpx">{{btnTitle}}</text>
					<text class="font_bolder orderTotal" v-if="!uploadTitle">（{{fileList.length}}/6）</text>
				</view>
			</template>
			<template v-else>
				<u-upload :fileList="fileList" :maxCount="maxCount" :accept="uploadAccept" :maxDuration="maxDuration"
				:sizeType="['compressed']" multiple @afterRead="uploadAfterRead" :previewImage="false">
					<!-- 自定义上传按钮 -->
					<view class="uploadeBtn flex_col" v-if="isShowBtn">
						<view class="t-icon t-icon-picture" />
						<text style="margin-top:10rpx">{{btnTitle}}</text>
						<text class="font_bolder orderTotal" v-if="!uploadTitle">（{{fileList.length}}/6）</text>
					</view>
					<view v-else style=" height: 140rpx"></view>
				</u-upload>
			</template>
			
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<canvas type="2d" id="upload-canvas" class="uploadCanvas" 
			:style="{'width':width+'px','height':height+'px','position':'absolute','z-index':'-999','top':'0px','left':'-1000000px'}"></canvas>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<canvas canvas-id="upload-canvas" class="uploadCanvas"
			:style="{'width':width+'px','height':height+'px','position':'absolute','z-index':'-9999999','top':'0px','left':'-1000000px'}"></canvas>
		<!-- #endif -->
	</view>
</template>

<script>
	const uploadBehavior = require('../../../mixins/uploadBehavior')
	export default {
		name: "bs-uploader",
		mixins: [uploadBehavior],
		options: { styleIsolation: 'shared' },
		props: {
			uploadTitle: {
				type: String,
				default: ""
			},
			uploadAccept: {
				type: String, //接受的文件类型:  image | video | file | all | media; file只支持H5（all、media仅小程序支持）
				default: "image"
			},
			maxDuration: {
				type: Number, //当accept为video时生效，拍摄视频最长拍摄时间，单位秒
				default: 60
			},
			maxCount: {
				type: Number, //最大上传数量
				default: 6
			},
			btnTitle: { //按钮名字
				type: String,
				default: "上传图片"
			},
			isShowBtn: {
				type: Boolean,
				default: true //是否显示上传按钮
			},
			required: {
				type: Boolean,
				default: false //图片是否必传
			},
			isShowDelete: {
				type: Boolean,
				default: true 			
			}
		},
		data() {
			return {
				
			}
		},
		created() {
			// #ifdef H5
			const platform = uni.getSystemInfoSync().platform
			if (platform === 'ios') {
				// this.isIos = true
			}
			// #endif
		},
	}
</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: 180rpx;
					height: 140rpx;
					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: 180rpx;
				height: 140rpx;
				border: 2rpx dashed #D9D9D9;
				margin-left: 20rpx;
				background-color: #FAFAFA;
				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;
				}
			}
		}

	}
</style>
