<template>
	<view class="upload">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		
		<view v-if="loading" class="loading">
			<image src="../../static/icon/loading.png" mode=""></image>
			<image class="rotate" src="../../static/icon/loadingcenter.png" mode=""></image>
			<text>{{ progress }}%</text>
			<view>{{ loadingText }}</view>
		</view>
		
		<view class="success" v-if="gotScore" :class="gotScore ? 'showbg' : ''">
			<view class="content" :class="[bigger ? 'bigger' : '']">
				<image src="../../static/icon/upload-suc.png" mode="scaleToFill"></image>
				<text>恭喜获得{{ gotScore }}学分</text>
			</view>
			<view class="goon" @tap="goon">继续获得</view>
			<view class="goon rank" @tap="toRank">查看排行榜</view>
			<image class="animation" :class="moveIndex === 1 ? 'drop' : ''" src="../../static/icon/monkey.png" mode="scaleToFill"></image>
			<image class="animation" :class="moveIndex === 2 ? 'drop' : ''" src="../../static/icon/monkey.png" mode="scaleToFill"></image>
			<image class="animation" :class="moveIndex === 3 ? 'drop' : ''" src="../../static/icon/monkey.png" mode="scaleToFill"></image>
			<image class="animation" :class="moveIndex === 4 ? 'drop' : ''" src="../../static/icon/monkey.png" mode="scaleToFill"></image>
			<image class="animation" :class="moveIndex === 5 ? 'drop' : ''" src="../../static/icon/monkey.png" mode="scaleToFill"></image>
		</view>
		
		<view v-if="repair" class="repair">
			<image src="../../static/icon/repair.png" mode=""></image>
			<view class="text">预计维护时间至 
			{{ userServerInfo.repair_end | getYear }} 年 
			{{ userServerInfo.repair_end | getMonth }} 月 
			{{ userServerInfo.repair_end | getDate }} 日 
			{{ userServerInfo.repair_end | getHousr }} 时 
			{{ userServerInfo.repair_end | getMinute }} 分结束</view>
		</view>
		<view v-else class="content">
			<view class="top">
				<view class="top-item solid-bottom">
					<text>精装版（套）</text>
					<custom-counter ref="counter1" v-model="input1"></custom-counter>
				</view>
				<view class="top-item solid-bottom">
					<text>简约版（套）</text>	
					<custom-counter ref="counter2" v-model="input2"></custom-counter>
				</view>
				<view class="top-item">
					<text>老人版（套）</text>
					<custom-counter ref="counter3" v-model="input3"></custom-counter>
				</view>
			</view>
			<view class="bot">
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img choose" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						 <image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="choose" @tap="ChooseImage" v-if="imgList.length === 0">
							<text class="cuIcon-camera"></text>
							<text class="text">图片上传</text>
						</view>
					</view>
				</view>
			</view>
			<view class="submit" @tap="upload">提交</view>
			<view class="howupload" @tap="tohowupload">如何上传 <text class="cuIcon-question"></text></view>
			<view class="example" @tap="previewExample">
				<image src="../../static/icon/example.png" mode="aspectFit"></image>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { api_upload } from '../../api.js'
	export default {
		data() {
			return {
				pageTitle: '图片上传',
				input1: 0,
				input2: 0,
				input3: 0,
				imgList: [],
				gotScore: 0,
				moveIndex: 0,
				bigger: false,
				loading: false,
				progress: 0,
				loadingText: ''
			};
		},
		computed: {
			userServerInfo () {
				return this.$store.state.userServerInfo
			},
			repair() {
				return +new Date / 1000 > this.userServerInfo.repair_start && +new Date / 1000 < this.userServerInfo.repair_end
			}
		},
		methods: {
			previewExample() {
				uni.compressImage({
					src: '../../static/icon/example.png',
					quality: 100,
					success: ({ tempFilePath }) => {
						uni.previewImage({
							urls: [tempFilePath]
						})
					}
				})
			},
			goon () {
				this.gotScore = 0
				this.clear();
			},
			toRank() {
				uni.toRank = true
				uni.navigateBack()
			},
			startAnimation () {
				setTimeout(() => {
					this.moveIndex ++
					this.timer = setInterval(() => {
						this.moveIndex ++
						this.bigger = true
						setTimeout(() => {
							this.bigger = false
						}, 100)
						if (this.moveIndex == 6) {
							this.moveIndex = 0
							clearInterval(this.timer)
						}
					}, 200)
				}, 200)
			},
			showModal(content) {
				uni.showModal({
					title: '上传失败',
					content,
					cancelText: '取消',
					confirmText: '重新上传',
					success: res => {
						if (res.cancel) {
							this.clear();
						}
						if (res.confirm) {
							this.clear();
							this.ChooseImage()
						}
					}
				})
			},
			showModalSuc(content) {
				uni.showModal({
				    title: '上传成功',
					showCancel: false,
				    content,
					success: res => {
						if (res.confirm) {
							this.clear()
						}
					}
				})
			},
			upload () {
				if (this.imgList.length) {
					if (+this.input1 + +this.input2 + +this.input3) {
						if (this.loading) {
							return 
						}
						this.loading = true
						this.loadingText = '正在上传图片至服务器...'
						this.progress = 0
						let progress = null
						const uploadTask = this.$ajax.upload(api_upload, 'img', this.imgList[0], {
							type1: this.input1,
							type2: this.input2,
							type3: this.input3,
							season: this.userServerInfo.season
						}, ({ data: res }) => {
							this.loadingText = '识别完成...'
							clearInterval(progress)
							this.progress = 100
							if (typeof res === 'string') {
								res = JSON.parse(res)
							}
							setTimeout(() => {
								this.loading = false
								this.loadingText = ''
								if (res.code === 200) {
									this.gotScore = res.data.score
									this.startAnimation() // 开始动画
								} else if (res.code === 201) {
									this.showModal('图片过大')
								} else if (res.code === 300) {
									this.showModal('图片重复，已有收款截图上传记录')
								} else if (res.code === 400) {
									this.showModal('图片与公司规定收款截图不符')
								} else if (res.code === 500) {
									this.showModalSuc('金额不符合要求，已转人工审核，请勿重复上传')
								} else if (res.code === 600) {
									this.showModalSuc('该截图正在人工审核，请勿重复提交')
								} else if (res.code === 700) {
									this.showModal('账单截图时间不在当前赛季时间范围')
								} else if (res.code === 800) {
									this.showModal('零钱明细的截图不允许上传')
								} else if (res.code === 900) {
									this.showModal('图片识别出错，已上传至人工审核')
								} else if (res.code === 1000) {
									this.showModal('金额为负')
								} else if (res.code === 1001) {
									this.showModal('订单号未识别，请查看截图是否正确')
								} else if (res.code === 1002) {
									this.showModal('时间未识别，请查看截图是否正确')
								} else if (res.code === 1003) {
									this.showModal('图片与公司规定收款截图不符')
								} else if (res.code === 1004) {
									this.showModal('订单金额未识别，请查看截图是否正确')
								} else if (res.code === 2000) {
									this.showModal('图片不标准，请重新截图上传')
								} else if (res.code === 3000) {
									this.showModal('赛季已结束')
								} else if (res.code === 4000) {
									this.showModal('系统维护中')
								} else {
									this.showModal('网络可能出了点问题，请重新截图上传')
								}
							}, 567)
						})
						uploadTask.onProgressUpdate(e => {
							this.progress = Math.floor((e.progress / 100) * 20)
							if (e.progress === 100) {
								this.loadingText = '图片上传成功，服务器正在识别...'
								progress = setInterval(() => {
									this.progress += 1
									if (this.progress === 99) {
										clearInterval(progress)
									}
								}, 50)
							}
						})
					} else {
						this.$refs.toast.hover('数量不能为空')
					}
				} else {
					this.$refs.toast.hover('还没有选择图片哦')
				}
			},
			clear () {
				this.input1 = 0
				this.input2 = 0
				this.input3 = 0
				this.$refs.counter1.inputValue = 0
				this.$refs.counter2.inputValue = 0
				this.$refs.counter3.inputValue = 0
				this.imgList = []
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original '], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.imgList = res.tempFilePaths
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定删除这张截图嘛？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			tohowupload () {
				uni.navigateTo({
					url: '../howupload/howupload'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload {
		@include page();
		overflow: scroll;
		background: $custom-nav-borderbot-color;
		.repair {
			image {
				width: 100%;
				height: 600rpx;
				margin-top: 140rpx;
			}
			view {
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				line-height: 50rpx;
				text-shadow: 2rpx #1CBBB4;
			}
		}
		.loading {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2;
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(1, 1, 1, .01);
			text {
				width: 150rpx;
				height: 150rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fa6342;
				font-size: 60rpx;
				border-radius: 50%;
				background: #FFFFFF;
			}
			image {
				top: 50%;
				left: 50%;
				width: 400rpx;
				height: 400rpx;
				position: absolute;
				margin-top: -200rpx;
				margin-left: -200rpx;
				&.rotate {
					animation: loading 4s infinite;
				}
			}
			view {
				top: 30%;
				left: 50%;
				width: 100%;
				color: #fa6342;
				font-size: 42rpx;
				text-align: center;
				position: absolute;
				transform: translateX(-50%);
			}
		}
		.content {
			margin-top: $custom-nav-borderbot-height;
			position: relative;
			display: flex;
			flex-direction: column;
			.example {
				flex: 1;
				width: 100%;
				background: #FFFFFF;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.connect {
				width: 16rpx;
				height: 112rpx;
				position: absolute;
				top: 278rpx;
				&.left {
					left: 91rpx;
				}
				&.right {
					right: 91rpx;
				}
			}
			.top {
				box-sizing: border-box;
				padding: 0 70rpx 0 50rpx;
				background: #FFFFFF;
				.top-item {
					height: 98rpx;
					font-size: 36rpx;
					color: rgba(42,42,42,1);
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
			.bot {
				height: 240rpx;
				margin-top: 10rpx;
				box-sizing: border-box;
				padding: 30rpx 0;
				background: #FFFFFF;
				color: rgba(178,178,178,1);
				.choose {
					width: 180rpx;
					height: 180rpx;
					border: 3rpx dashed rgba(178,178,178,1);
					border-radius: 4rpx;
					margin: 0 auto;
					position: relative;
					.text {
						position: absolute;
						@include text(28rpx);
						width: 100%;
						text-align: center;
						bottom: 22rpx;
					}
					.cuIcon-camera {
						font-size: 75rpx;
						color: rgba(178,178,178,1);
					}
				}
			}
			.submit{
				width: 400rpx;
				height: 70rpx;
				margin: 30rpx auto 0;
				background:rgba(250,99,66,1);
				border-radius: 35rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				line-height: 70rpx;
				text-align: center;
			}
			.howupload {
				font-size: 24rpx;
				line-height: 84rpx;
				text-align: center;
				font-weight: bold;
				color:rgba(243,67,54,1);
				text {
					margin-left: 9rpx;
				}
			}
		}
		.success {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .3);
			z-index: 3;
			.animation {
				width: 66rpx;
				height: 66rpx;
				position: absolute;
				margin-left: -33rpx;
				top: -66rpx;
				left: 50%;
				&.drop {
					animation: monkey-drop .2s linear;
					animation-fill-mode: forwards;
				}
			}
			.content {
				position: absolute;
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 681rpx;
					margin-top: 52rpx;
				}
				text {
					position: absolute;
					top: 624rpx;
					left: 50%;
					transform: translateX(-50%);
					font-size: 43rpx;
					color: #FDE157;
				}
				&.bigger {
					animation: bigger 0.05s;
					animation-fill-mode: forwards;
				}
			}
			.goon {
				position: absolute;
				width: 300rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: #FA6342;
				font-size: 32rpx;
				color: #FFFFFF;
				top: 764rpx;
				right: 50rpx;
				border-radius: 35rpx;
				&.rank {
					right: 400rpx;
					color: #FA6342;
					background: transparent;
					border: 1rpx solid #FA6342;
				}
			}
			&.showbg {
				animation: unload-ok-bg .2s;
				animation-fill-mode: forwards;
			}
		}
	}
	@keyframes unload-ok-bg {
		0% {
			background: rgba(0, 0, 0, 0);
		}
		100% {
			background: rgba(0, 0, 0, .3);
		}
	}
	@keyframes monkey-drop {
		0% {
			top: -66rpx;
			display: block;
		}
		100% {
			top: 470rpx;
			display: none;
		}
	}
	@keyframes bigger {
		0% {
			transform: scale(1, 1);
		}
		50% {
			transform: scale(1.1, 1.1);
		}
		100% {
			transform: scale(1, 1);
		}
	}
	@keyframes loading {
		0% {
			transform: rotateZ(0deg);
		}
		100% {
			transform: rotateZ(360deg);
		}
	}
</style>
