<template>
	<view>
		<view class="dz-from-fj">
			<view class="dz-from-fj-edit" @tap="uploadBtn()">
				<view class="iconfont icon-jia"></view>
				<view>上传图片</view>
			</view>
			<view class="dz-from-fj-edit"   v-for="(item,index) in setArr" :key="index">
				<block  v-if="item[0] == 'image'">
					<image :src='item[1]' class="dz-from-fj-img-img"></image>
					<view class="dz-from-jian">
						<view class="iconfont icon-jia" @tap="deleteImg(index)"></view>
					</view>
				</block>
			</view>
		</view>

		<uni-popup ref="popup" type="center">图片大小不能超过{{size}}M</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
    import { mapState } from 'vuex';
	import $ from 'jquery'
	export default {
		components: {
			uniPopup
		},
		props: ["limitsize","formData"],
		data() {
			return {
				Arr:[],
				imgArr:[],
			};
		},
		onShow(){
		},
		// 计算属性
		computed: {
			size: function() {
				return this.limitsize / 1024;
			},
            ...mapState([
                "userInfo",
            ]),
			setArr(){
				this.imgArr=[];
				for (let i = 0, leng = this.Arr.length; i < leng; i++) {
					this.imgArr.push(this.Arr[i][1])
				}
				this.$emit('get-img',this.imgArr)
				return this.Arr
			}
		},
		methods: {
			deleteImg(index){
				this.Arr.splice(index,1)
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			// 上传附件按钮 绑定file的点击事件
			uploadBtn() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						let size = res.tempFiles[0].size;
						let tempFilePaths = res.tempFilePaths;
						console.log(size)
						if (size > that.limitsize*1024) {
							that.openPopup();
							return
						}
						const uploadTask = uni.uploadFile({
							url:that.$lib.$config.api + that.$lib.$urlMap.upload, // 
							filePath: tempFilePaths[0],
							name: "file",
							fileType:'image',
							formData: {
								"token": that.userInfo.token
							},
							success: function(res) {
								let data = JSON.parse(res.data);
								if (data.code == "1") {
									that.Arr.push(['image',data.data.fullurl]);
								}
							},
							fail: function (err) {
								console.log(err)
							}
						});
					}
				});
				
			},
		}
	}
</script>

<style>
	.dz-from-fj{
		display: flex;
		flex-wrap: wrap;
	}
	.dz-from-fj-edit{
		width: 80px;
		border: solid 1px #efefef;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 80px;
		color: #adadad;
		font-size: 14px;
		margin-right: 10px;
		justify-content: center;
		position: relative;
		margin-bottom:10px
	}
	.dz-from-fj-edit .iconfont{
		font-size:24px;
		margin-bottom:1px
	}
	.dz-from-fj-img-img{
		width: 80px;
		height: 80px;
	}
	.dz-from-wj{
		color: #448aff;
	}
	.dz-from-jian{
		position: absolute;
		right: 2px;
		top: 2px;
	}
	.dz-from-jian .iconfont{
		color:rgb(255, 255, 255);
		font-size:11px;
		transform:rotate(45deg);
		border-radius:50%;
		padding:3px;
		background:rgb(68, 138, 255);
	}
	.file {
		font-size: 32upx;
	}

	.filename {
		color: #808080;
	}

	.del {
		color: #0E90CE;
		float: right;
	}

	.btn {
		width: 100%;
		margin: 20upx 0;
		color: #007AFF;
		background-color: #FFFFFF;
		border: #007AFF 2upx solid;
	}
</style>