<template>
	<div class="base-upload-container">
		<Upload multiple type="drag" action="" :before-upload="onBeforeUpload" :show-upload-list="false">
			<div style="padding: 40px 0">
				<Icon type="ios-cloud-upload" size="100"
					style="color: #848484;margin: 40px 0;"></Icon>
				<p style="color: #ddd">选择或者拖拽文件到该区域进行上传</p>
			</div>
		</Upload>
		<div class="file-list-box">
			<div class="file-item" v-for="(item,index) in fileArr" :key="index">
				<p>
					<span>{{ item.name }}</span>
					<span class="tool-remove" v-if="isShowTool">
						<Icon type="md-close" @click="onRemoveFile(index)"/>
					</span>
				</p>
				<Progress :percent="progressArr[index]" :stroke-width="12"/>
			</div>
		</div>
		<Button  @click="onConfirmUpload" style="width: 100%;" class="modal-btn" :disabled="!fileArr.length">确认上传</Button>
	</div>
</template>

<script>
	import BlobTool from '@/utils/blobTool.js'
	export default {
		props: {
			auth: {
				type: Object,
				default: () => {
					return {
						sas: '',
						url: '',
						name: ''
					}
				}
			},
			scope: {
				type: String,
				default: 'school'
			}
		},
		data() {
			return {
				isShowTool:true,
				containerClient: null,
				fileArr:[],
				progressArr:[]
			}
		},
		created() {

		},
		methods: {
			async onBeforeUpload(file) {
				file.progress = 0
				this.fileArr.push(file)
				this.progressArr.push(0)
				return false
				
			},
			
			onRemoveFile(index){
				this.fileArr.splice(index,1)
			},
			
			async onConfirmUpload(){
				this.isShowTool = false
				let result = []
				let containerClient = this.containerClient
				let list = this.fileArr
				let that = this
				for(let i = 0 ; i < list.length; i++){
					let file = list[i]
					try{
						let blobFile = await containerClient.upload(file, "syllabus",{
							onProgress: function (e) {
								that.$set(that.progressArr,i,parseInt(e.loadedBytes * 100 / file.size))
							}
						});
						result.push(blobFile)
					}catch(e){
						this.$Message.error(e)
						return
					}
				}
				this.fileArr = []
				this.progressArr = []
				this.$emit('uploadFinish',result)
			}
		},
		mounted() {
			if(this.auth.sas){
				let n = this.auth
				this.containerClient = new BlobTool(n.url, n.name, n.sas, this.scope)
			}
		},
		watch: {
			auth: {
				handler(n, o) {
					this.containerClient = new BlobTool(n.url, n.name, n.sas, this.scope)
				}
			}
		}
	}
</script>

<style lang="less">
	.base-upload-container{
		.file-list-box{
			margin: 20px 5px;
			width: 100%;
			max-height: 200px;
			overflow: auto;
			
			.file-item{
				margin: 10px 0;
				
				.tool-remove{
					color: #b3b3b3;
					margin-left: 15px;
					font-size: 14px;
					cursor: pointer;
				}
			}
			
			.ivu-progress{
				margin-top: 10px;
			}
			
			.ivu-progress-text-inner{
				color: #ddd;
			}
			
			&::-webkit-scrollbar-thumb{
				background:#dadada !important;
			}
		}
	}
</style>
