<template>
	<div class="upload-container">
		<Tabs value="name1" @on-click="onTabChange">
			<TabPane label="整校实施方案上传" name="name1">
				<div class="upload-box">
					<p style="margin: 20px 0;"><span style="color: red;vertical-align: middle;">*</span> 学校名称</p>
					<Input v-model="schoolName" placeholder="请输入学校名称..." />
					<p style="margin: 20px 0;"><span style="color: red;vertical-align: middle;">*</span> 实施方案</p>
					<p style="margin: 0 10px;color: #838383;font-size: 12px;margin-bottom: 20px;">支持Word、PDF格式上传，文件大小需小于50M</p>
					<AbilityUpload :auth="curSas" mode="outer" :acceptTypes="['pdf','doc','docx']" :maxSize="52428800" @uploadFinish="uploadFinish" ref="upload1"></AbilityUpload>
					<Button type="info" icon="ios-paper-plane" @click="onSubmit('0')" :loading="btnLoading">提交</Button>
				</div>
			</TabPane>
			<TabPane label="信息化规划上传" name="name2">
				<div class="upload-box">
					<p style="margin: 20px 0;"><span style="color: red;vertical-align: middle;">*</span> 学校名称</p>
					<Input v-model="schoolName2" placeholder="请输入学校名称..." />
					<p style="margin: 20px 0;"><span style="color: red;vertical-align: middle;">*</span> 信息化规划</p>
					<p style="margin: 0 10px;color: #838383;font-size: 12px;">支持Word、PDF格式上传，文件大小需小于50M</p>
					<AbilityUpload :auth="curSas" mode="outer" :acceptTypes="['pdf','doc','docx']" :maxSize="52428800" @uploadFinish="uploadFinish" ref="upload2"></AbilityUpload>
					<Button type="info" icon="ios-paper-plane" @click="onSubmit('1')" :loading="btnLoading">提交</Button>
				</div>
			</TabPane>
		</Tabs>
	</div>
</template>

<script>
	import BlobTool from '@/utils/blobTool.js'
	export default {
		data(){
			return {
				btnLoading:false,
				schoolName:'',
				schoolName2:'',
				curSas: {
					sas: '',
					url: '',
					name: ''
				},
				curTab:'name1'
			}
		},
		created() {
			this.getSas()
		},
		methods:{
			onTabChange(val){
				this.curTab = val
			},
			async getSas(){
				this.curSas = await this.$tools.getSchoolSas()
			},
			onSubmit(){
				if(this.curTab === 'name1' && this.$refs.upload1.fileArr.length === 0){
					this.$Message.warning('请先上传方案文件！')
					return
				}
				if(this.curTab === 'name2' && this.$refs.upload2.fileArr.length === 0){
					this.$Message.warning('请先上传方案文件！')
					return
				}
				if(this.curTab === 'name1' && this.schoolName === ''){
					this.$Message.warning('学校名称不能为空！')
					return
				}
				if(this.curTab === 'name2' && this.schoolName2 === ''){
					this.$Message.warning('学校名称不能为空！')
					return
				}
				
				
				this.btnLoading = true
				// this.$refs.upload1.onConfirmUpload()
				this.schoolName = ''
				this.schoolName2 = ''
				setTimeout(() => {
					this.$refs.upload1.fileArr = []
					this.$refs.upload2.fileArr = []
					this.$Message.success('上传成功！')
					this.btnLoading = false
				},1000)
			},
			
			uploadFinish(res){
				this.schoolName = ''
				this.schoolName2 = ''
				this.$refs.upload1.fileArr = []
				this.$refs.upload2.fileArr = []
				this.$Message.success('上传成功！')
			}
		}
	}
</script>

<style lang="less" src="./AbilityUpload.less" scoped></style>
