<template>
	<view class="img-wrap rel">
		<view class="upload-box">
			<view class="img-item pic" v-for="(file,index) in imgList" >
<!-- 				<view class="tip-sucess u-flex u-row-center" v-if="file && (file.status == status.QUEUED || file.status == status.UPLOADING)">
					<span>正在上传中...{{file.percent}}%</span>
				</view> -->
				<img :src="file.src" mode="aspectFill" @click="perviewImg(index)">
				<view class="close"  @click="removeImg(index)">
					<u-icon name="close" color="#fff" size="20"></u-icon>
				</view>
			</view>
			<view>
				<view class="pic upload"  @click="chooseImage('qiniu')">
					<u-icon name="camera" color="#fff" size="100"></u-icon>
					<span class="txt">点击拍摄</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import base from '@/components/upload/index';
	export default {
		mixins:[base],
		data() {
			return {
				initImgList:[],
				currentIndex: 0,
				uploadType: '',
				pageTitle:''
			}
		},
		computed: {
			
		},
		onLoad(option) {
			this.initPage(option)
			// this.initworkingAgeList();
			// this.getareaList()
		},
		beforeDestroy(){
			this.setPrevPageData()
		},
		methods: {
			goBack(type) {
				// if (type) {
				// 	this.setPrevPageData()
				// }
				this.setPrevPageData()
				uni.navigateBack({
					delta: 2
				});
			},
			initPage(option) {
				const uploadType = option.uploadType
				
				this.uploadType = uploadType
				let pages = getCurrentPages()
				if (pages.length < 2) {
					return
				}
				let prevVue = pages[pages.length - 2].$vm 
				this.imgList = prevVue.imgObj[uploadType] || []
				const formShowList = prevVue.formShowList
				formShowList.map(item=>{
					if(item.filedName===uploadType){
						this.pageTitle = item.label || '图片上传'
					}
				})
				if(this.uploadType!=='other_certificates'){
					this.selectNum = 1
				}
				uni.setNavigationBarTitle({
					title: this.pageTitle
				});
			},
			setPrevPageData() {
				let pages = getCurrentPages()
				if (pages.length < 2) {
					return
				}
				let selected = this.selected
				let prevVue = pages[pages.length - 2].$vm
				const uploadType = this.uploadType
				prevVue.imgObj[uploadType] = this.imgList
			},
			initworkingAgeList() {
				let list = [{
					value: 0,
					name: "1年内",
				}, ];
				for (let i = 1; i < 10; i++) {
					const item = {
						value: i,
						name: i + "年",
					};
					list.push(item);
				}
				list.push({
					value: 10,
					name: "10年+",
				});
				this.workingAgeList = list;
			},
			getareaList(code, level, provinceIndex) {
				provinceIndex = provinceIndex || 0
				this.currentIndex = provinceIndex
				let areaList = this.areaList
				if (level) {
					if (areaList[provinceIndex].children) {
						return
					}
				}
				uni.showLoading({
					title: '加载中'
				});
				let params = {
					type: '充电桩安装',
					level: level || 0,
					code: code
				}
				const res = this.$u.api.getSettleArea(params)
				uni.hideLoading()
				if (res.status != 200) {
					return;
				}
				if (!level) {
					this.areaList = res.data
					const parmas = [res.data[0].id, 1]
					this.getareaList(...parmas)
				} else {
					this.$set(areaList[provinceIndex], 'children', res.data)
				}
			},
			selectAge(item) {
				this.selected.working_age = item.value
				this.selected.workingAgeTxt = item.name
			},
			selectArea(areaItem) {
				const code = areaItem.id
				const selected = this.selected
				const idx = selected.areaIds.indexOf(code)
				const currentProvince = this.areaList[this.currentIndex]
				let txt = currentProvince.name + '-' + areaItem.name
				if (idx >= 0) {
					selected.areaTxts.splice(idx, 1)
					selected.areaIds.splice(idx, 1)
				} else {
					selected.areaIds.push(code)
					selected.areaTxts.push(txt)
				}
				this.selected = selected
			},
		},
	}
</script>

<style lang="scss">
	.upload-box {
		padding: 30rpx 16rpx;

		.pic {
			position: relative;
			display: block;
			width: 720rpx;
			height: 450rpx;
			// overflow: hidden;
			border-radius: 12rpx;
			margin-bottom: 30rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.pic.upload {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			img {
				display: block;
				width: 60rpx;
				height: 52rpx;
			}

			.txt {
				font-weight: bold;
				margin-top: 18rpx;
				font-size: 32rpx;
				color: #fff;

				&.iconfont {
					font-size: 60rpx;
				}
			}

			background-color: rgba(0, 0, 0, 0.3);
		}
	}
	.close{
		position: absolute;
		width:50rpx;
		height:50rpx;
		right:0;
		top:0;
		text-align: center;
		line-height:50rpx;
		border-radius: 50%;
		background: red;
		color: #fff;
	}
	.tip-sucess {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 20rpx 0;
		width: 100%;
		z-index: 5;
		background: rgba(0, 0, 0, .4);
		border-radius: 0;
		color: #fff;
		font-size: 28rpx;

		&.tip-fail i {
			background: red;
		}

		i {
			margin-right: 12rpx;
			width: 50rpx;
			height: 50rpx;
			background: #7fbe4c;
			border-radius: 50%;
			text-align: center;
			line-height: 50rpx;
			font-size: 24rpx;
		}
	}
</style>
