<template>
	<view>
		<view class="cu-bar bg-white ">
			<view class="action">
				{{title}}
			</view>
			<view class="action" v-if="canEdit">
				{{imgList.length}}/{{maxPhotoNum}}
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(img,index) in imgList" @click.stop="preview(index)">
					<image :src="img" mode='aspectFill'></image>
					<view class="cu-tag bg-red" v-if="canEdit" @tap.stop="deleteImage(index)">
						<text class="cuIcon-close"></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="canEdit && imgList.length < maxPhotoNum">
					<text class="cuIcon-cameraadd"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
	import conf from '../../conf/config.js'
	import {uploadImageAsync} from '../../api/common/commonApi.js'
	const context = require("../../lib/java110/Java110Context.js");
	const factory = context.factory;
	export default {
		name:"vc-upload",
		data() {
			return {
				photos: [],
				imgList: [],
				photoUrl: conf.commonBaseUrl + '/callComponent/download/getFile/file',
			};
		},
		props: {
			communityId: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '图片上传'
			},
			maxPhotoNum: {
				type: Number,
				default: 1
			},
			sendImgList: {
				type: Array,
				default () {
					return []
				}
			},
			count: {
				type: Number,
				default: 1
			},
			sizeType: {
				type: Array,
				default () {
					return ['original', 'compressed']
				}
			},
			sourceType: {
				type: Array,
				default () {
					return ['album', 'camera']
				}
			},
			canEdit: {
				type: Boolean,
				default: true
			}
		},
		watch:{
			photos:function(val){
				this.sendData();
			},
			deep: true
		},
		mounted() {
			if(this.sendImgList.length > 0){
				uni.showLoading({
					title: "图片加载中...",
					mask: true
				})
			}
			this.sendImgList.forEach((item, index) => {
				if (item.indexOf('base64,') > -1) {
					this.imgList.push(_photo);
				}
				if (item.indexOf("https") > -1 || item.indexOf("http") > -1 || item.indexOf(this.photoUrl) > -1) {
					this.imgList.push(item);
					let urlParams = this._getUrlParams(item);
					if(urlParams['fileId']){
						this.photos.push({fileId:urlParams['fileId'], url:item});
					}
				}else{
					let url = this.photoUrl + "?fileId=" + item + "&communityId=-1&time=" + new Date();
					this.imgList.push(url);
					this.photos.push({fileId:item, url:url});
				}
			})
			uni.hideLoading();
			console.log(this.imgList);
		},
		methods:{
			// 向父组件传递base64数据
			sendData() {
				this.$emit('sendImagesData', this.photos)
			},
			// 删除
			deleteImage: function(index) {
				this.imgList.splice(index, 1);
				this.photos.splice(index, 1);
			},
			// 添加
			ChooseImage: function() {
				let that = this;
				wx.chooseImage({
					count: this.count, // 选择数量
					sizeType: this.sizeType, //原图或压缩图
					sourceType: this.sourceType, // 相册或拍摄
					success: (upImgRes) => {
						var tempFilePaths = upImgRes.tempFilePaths[0]
						that.imgList.push(tempFilePaths);
						that.$forceUpdate();
						//#ifdef H5
						TanslateImage.translate(tempFilePaths, (base64) => {
							let _objData = {
								uploadFile: base64,
								communityId: that.communityId
							}
							uploadImageAsync(_objData, that).then((res) => {
								that.photos.push(res);
							})
						})
						//#endif

						//#ifndef H5
						factory.base64.urlTobase64(tempFilePaths).then(function(base64) {
							let _objData = {
								uploadFile: base64,
								communityId: that.communityId
							}
							uploadImageAsync(_objData, that).then((res) => {
								that.photos.push(res);
							})
						});
						//#endif
					}
				});
			},
			// 预览
			preview: function(index){
				let urls = this.imgList;
				// 空集合 return
				if(urls.length < 1){
					return;
				}
				// domain拼接
				urls.forEach((item, index) => {
					let start = item.indexOf("/callComponent");
					if(start == 0){
						urls[index] = conf.commonBaseUrl + item;
					}
				})
				uni.previewImage({
					current: index,
					urls: urls
				})
			},
		}
	}
</script>

<style>
</style>
