<template>
	<view>
		<view class="upload">
			<!-- 對(duì)視頻或者圖片進(jìn)行循環(huán) -->
			<block v-for="(upload,index) in uploads" :key="index">
				<view class="uplode-file">
					<!--  判斷是圖片還是視頻 如果是視頻通過(guò) image 進(jìn)行展示 -->
					<image v-if="types == 'image'" class="uploade-img" :src="upload" :data-src="upload" @tap="previewImage"></image>
					<!-- 用于取消的圖片 -->
					<image v-if="types == 'image'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></image>
					<!-- 如果是視頻通過(guò) video進(jìn)行展示   在視頻標(biāo)簽上面添加個(gè)圖片（刪除圖片用于取消視頻） -->
					<video v-if="types == 'video'" class="uploade-img" :src="upload" controls>
						<cover-image v-if="types == 'video'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></cover-image>
					</video>
				</view>
			</block>
			<!-- 這里是對(duì)于沒(méi)有圖片上傳之前的樣式的展示    如果圖片視頻的上傳的數(shù)量大于等于 設(shè)定的圖片上傳的數(shù)量 就對(duì)不在展示 該樣式 這樣的話 就不能繼續(xù)在 上傳圖片了-->
			<view v-if="uploads.length < uploadCount" :class="uploadIcon ? 'uploader-icon' : 'uploader-input-box'">
				<view v-if="!uploadIcon" class="uploader-input" @tap="chooseUploads"></view>
				<image v-else class="image-cion" :src="uploadIcon" @tap="chooseUploads"></image>
				<view style="height: 40upx; height: 25upx;">
				</view>
				<!-- 這里是對(duì)于上傳圖片的提示 -->
				<p class="ziliao" v-for="(item,index) in text" :key="index"> {{item}}</p>
			</view>
		</view>	
		<!--  提交上傳 -->
		<button type="primary" v-if="types == 'image'" @tap="upload" >上傳</button>
	</view>
</template>
<script>
	export default{
		//  props 接受傳遞過(guò)來(lái)的值
		props: {
			// 上傳的圖片的提示
			text: {
				type: Array,
				default: function() {
					return []
				}
			},
			//  用于判斷上傳的是圖片還是視頻
			types: {
				type: String,
				default: 'image'
			},
			// 圖片上傳的路徑
			dataList: {
				type: Array,
				default: function() {
					return []
				}
			},
			//  圖標(biāo) 用于去除已經(jīng)選中的圖片
			clearIcon: {
				type: String,
				default: 'http://img1.imgtn.bdimg.com/it/u=451604666,2295832001&fm=26&gp=0.jpg'
			},
			//  上傳的圖片的樣式  比如說(shuō)是個(gè)相機(jī) 還是加號(hào)
			uploadIcon: {
				type: String,
				default: ''
			},
			//  需要將圖片上傳到服務(wù)器的 地址
			uploadUrl: {
				type: String,
				default: ''
			},
			//  刪除圖片的地址
			deleteUrl: {
				type: String,
				default: ''
			},
			//  設(shè)置上傳圖片或視頻的數(shù)量
			uploadCount: {
				type: Number,
				default: 1
			},
			//上傳圖片大小 默認(rèn)3M
			upload_max: {
				type: Number,
				default: 3
			},
			disable:{
				type: Boolean,
				default: true,
			}
		},
		data(){
			return {
				//上傳的圖片地址
				uploadImages: [],
				//展示的圖片地址
				uploads: [],
				// 超出限制數(shù)組
				exceeded_list: [],
			}
		},
		mounted(){
			// 對(duì)上傳圖片做個(gè)判斷
			this.uploads = this.dataList
		},
		methods:{
			previewImage (e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.dataList
				})
			},
			chooseUploads(){
				switch (this.types){
					case 'image': 
						uni.chooseImage({
							count: this.uploadCount - this.uploads.length, //默認(rèn)9
							sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
							sourceType: ['album', 'camera'], //從相冊(cè)選擇
							success: (res) => {
								for(let i = 0; i< res.tempFiles.length; i++){
									if(Math.ceil(res.tempFiles[i].size / 1024) < this.upload_max * 1024){
										this.uploads.push(res.tempFiles[i].path)
										this.uploadImages.push(res.tempFiles[i].path)
									}else {
										this.exceeded_list.push(i === 0 ? 1 : i + 1);
										uni.showModal({
											title: '提示',
											content: `第${[...new Set(this.exceeded_list)].join(',')}張圖片超出限制${this.upload_max}MB,已過(guò)濾`
										});
									}
								}
							},
							fail: (err) => {
								uni.showModal({
									// content: JSON.stringify(err)
									content: '選擇被取消'
								});
							}
						});
					break;
					case 'video' :
						uni.chooseVideo({
							sourceType: ['camera', 'album'],
							success: (res) => {
								if(Math.ceil(res.size / 1024) < this.upload_max * 1024){
									this.uploads.push(res.tempFilePath)
									uni.uploadFile({
										url: this.uploadUrl, //僅為示例，非真實(shí)的接口地址
										filePath: res.tempFilePath,
										name: 'file',
										//請(qǐng)求參數(shù)
										formData: {
											'user': 'test'
										},
										success: (uploadFileRes) => {
											this.$emit('successVideo',uploadFileRes)
										}
									});
								}else {
									uni.showModal({
										title: '提示',
										content: `第${[...new Set(this.exceeded_list)].join(',')}張視頻超出限制${this.upload_max}MB,已過(guò)濾`
									});
								}
							},
							fail: (err) => {
								uni.showModal({
									// content: JSON.stringify(err)
									content: '確認(rèn)取消？'
								});
							}
						});
					break;
				}
			},
			delImage(index){
				//第一個(gè)是判斷app或者h(yuǎn)5的 第二個(gè)是判斷小程序的
				if(this.uploads[index].substring(0,4) !== 'http' || this.uploads[index].substring(0,11) == 'http://tmp/'){
					this.uploads.splice(index,1)
					return;
				};
				if(!this.deleteUrl) {
					uni.showModal({
						content: '請(qǐng)?zhí)顚?xiě)刪除接口'
					});
					return;
				};
				uni.request({
					url: this.deleteUrl,
					method: 'DELETE',
					data: {
						image: this.dataList[index]
					},
					success: res => {
						console.log(123456);
						if(res.data.status == 1) {
							uni.showToast({
								title: '刪除成功'
							})
							this.uploads.splice(index,1)
						}
					},
				});
			},
			upload(){
				var _this = this 
				var j = 0 
				if(!this.disable){
					uni.showModal({
						content: '請(qǐng)先上傳上面的喲'
					});
					return;
				}
				if(!this.uploadUrl) {
					uni.showModal({
						content: '請(qǐng)?zhí)顚?xiě)上傳接口'
					});
					return;
				};
				if(this.uploadImages.length < 1){
					uni.showModal({
						content: '請(qǐng)選擇圖片'
					});
					return;
				}
				if(this.uploadImages.length < this.uploadCount){
					uni.showModal({
						content: '請(qǐng)確認(rèn)上傳的數(shù)量為' + this.uploadCount + '張'
					});
					return;
				}
				for (let i of this.uploadImages) {
					uni.uploadFile({
						url: this.uploadUrl, //僅為示例，非真實(shí)的接口地址
						filePath: i,
						name: 'images[]',
						//請(qǐng)求參數(shù)
						formData: {
							'user': 'test'
						},
						success: (uploadFileRes) => {
							this.$emit('successImage',uploadFileRes)
								j++
							console.log(j)
							if( j == _this.uploadCount){
								this.$emit('successImages',true)
							}
						}
					});
				}
			}
		}
	}
</script>
<style scoped>
	.ziliao{
		margin-top: 15upx;
		text-align: center;
		font-family: MicrosoftYaHei;
			font-size: 20upx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 32upx;
			letter-spacing: 0upx;
			color: #c8c8c8;
	}
	button{
		background-color: #f05a23;
		width: 95%;
	}
	.upload {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.uplode-file {
		margin: 10upx;
		width: 210upx;
		height: 210upx;
		position: relative;
	}
	.uploade-img {
		display: block;
		width: 210upx;
		height: 210upx;
	}
	.clear-one{
		position: absolute;
		top: -10rpx;
		right: 0;
	}
	.clear-one-icon{
		position: absolute;
		width: 20px;
		height: 20px;
		top: 0;
		right: 0;
		z-index: 9;
	}
	.uploader-input-box {
		position: relative;
		margin:10upx;
		width: 208upx;
		height: 208upx;
		border: 2upx solid #D9D9D9;
	}
	.uploader-input-box:before,
	.uploader-input-box:after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #D9D9D9;
	}
	.uploader-input-box:before {
		width: 4upx;
		height: 79upx;
	}
	.uploader-input-box:after {
		width: 79upx;
		height: 4upx;
	}
	.uploader-input-box:active {
		border-color: #999999;
	}
	.uploader-input-box:active:before,
	.uploader-input-box:active:after {
		background-color: #999999;
	}
	.uploader-input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.uploader-icon{
		position: relative;
		margin:10upx;
		width: 208upx;
		height: 208upx;
	}
	.uploader-icon .image-cion{
		width: 100%;
		height: 100%;
	}
</style>

<easyupload
:text="text"   :dataList="imageList" 
uploadUrl="http://sunshine.createnetwork.cn/api/uploadimage" 
:types="category"
deleteUrl='http://sunshine.createnetwork.cn/api/uploadimage' 
:uploadCount="2" 
disable = true
@successImage="successImage" 
@successVideo="successvideo" 
@successImages="successImages"
class="sxzl"
></easyupload>
<easyupload
:text="text1"
:dataList="imageList" 
uploadUrl="http://sunshine.createnetwork.cn/api/uploadimage" 
:types="category"
deleteUrl='http://sunshine.createnetwork.cn/api/uploadimage' 
:uploadCount="2" 
:disable= 'Drivinglicense'
@successImage="successImage" 
@successVideo="successvideo" 
@successImages="successImages"
class="sxzl"
></easyupload>
<script>
// 導(dǎo)入注冊(cè)組件 
	import easyupload from "@/common/easy-upload.vue"
	export default {
		components:{
			easyupload
		},
		data() {
			return {
				tx_details:'',
				Drivinglicense: false,
				data:{
					phone:'',
					plate_number:'',
					type_id:'',
					id_card:[],
					driving_card:[],
					name:''
				},
				news:'',
				right_select_num:0,
				text:["身份證正面","身份證反面"],
				text1:["行駛證正頁(yè)","行駛證副頁(yè)"],
				imageList: [],
				category: 'image',
				car1:"請(qǐng)選擇車品牌",
			};
		},
		watch:{
		// 對(duì)數(shù)據(jù)進(jìn)行深度監(jiān)聽(tīng) 用于設(shè)置使用組件的順序 （多次使用組件并且需要考慮順序的情況下使用）
			'data.id_card':{
				handler(newName, oldName) {
				      // console.log('data.id_card', chnsg.length,oldName);            
					  ( oldName.length >= 2) ? (this.Drivinglicense = true) : (this.Drivinglicense = false)
					 console.log(this.Drivinglicense);
				    },
				    immediate: true,
				    deep: true,
			}
		},
		methods:{
			successImages(e){
				if(e){
					uni.showModal({
						content : '圖片上傳成功'
					})
				}
			},
			successImage(e){
				console.log(JSON.parse(e.data).data)
				this.Drivinglicense ?this.data.driving_card.push(JSON.parse(e.data).data[0]) : this.data.id_card.push(JSON.parse(e.data).data[0])
				console.log(this.data.id_card,this.data.driving_card);
			},
			successvideo(e){
				console.log(e)
			},
		}
	}
</script>