<template>
	<view class="add_praise">
		<view class="add_praiseV2">
			<view class="add_praiseV2-c">
				<view class="add_praiseV2-c-1">
					<textarea class="add_praiseV2-c-t" maxlength="-1" v-model="content" placeholder="请输入文字内容"></textarea>
				</view>
				<view class="add_praiseV2-c-2">
					<view class="oneLeaveV2-2-3-i" v-for="(item,index) in fileList" :key="index">
						<view class="oneLeaveV2-2-3-i-c">
							<image class="oneLeaveV2-2-3-i-c-i" :src="$service.getimg(item)" mode="aspectFit"></image>
							<view class="oneLeaveV2-2-3-i-c-close"  @click="imgdel" :data-idx="index">
								<u-icon name="close-circle-fill" size="25" color="#000"></u-icon>
							</view>
						</view>
					</view>
					<view class="oneLeaveV2-2-3-i" @click="scpic">
						<u-icon name="plus" color="#DEDEDE" size="30"></u-icon>
					</view>
				</view>
			</view>
			<view class="operation" @click="submit">
				提交表扬
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
				content: ''
			};
		},
		methods: {
			imgdel(e){
				var that =this
				console.log(e.currentTarget.dataset.idx)
				wx.showModal({
					title: '提示',
					content: '确定要删除这张图片吗',
					success (res) {
						if (res.confirm) {
							console.log('用户点击确定')
							that.fileList.splice(e.currentTarget.dataset.idx,1)
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
				
			},
			scpic() {
			  var that = this
				// var z_count = 9 - that.imgb.length
				var z_count = 9
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						var sourceType = ['camera', 'album']
						if (res.tapIndex == 0) {
							sourceType = ['camera']
						} else {
							sourceType = ['album']
						}
						uni.chooseImage({
							count: z_count,
							sizeType: ['original', 'compressed'],
							sourceType: sourceType,
							success: function(res) {
								console.log(res)
								const tempFilePaths = res.tempFilePaths
								
								// const imglen = that.imgb.length
								that.upimg(tempFilePaths, 0)
								
							},
							fail(err) {
								uni.showModal({
									content: err
								})
							}
						});
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			 
			},
			upimg(imgs, i) {
				var that = this
				that.$service.wx_upload(imgs[i]).then(res => {
							
					that.btn_kg = 0
					console.log(res)
					if (res.code == 1) {
						var datas = res.data
						console.log(i)
						var newdata = that.fileList
						newdata.push(datas)
						that.fileList= newdata
						if (i<imgs.length-1) {
						  i++
						  that.upimg(imgs, i)
						}
					} else {
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: "none",
								title: "上传失败"
							})
						}
					}
				}).catch(e => {
					that.btn_kg = 0
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '操作失败'
					})
				})
			  
			},
			submit() {
				var datas = {
					content: this.content,
					imgs: this.fileList
				}
				var jkurl = '/praise/add'
				this.$service.P_post(jkurl, datas).then(res => {
					uni.showToast({
						icon:'none',
						title: '上传成功'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
			},
			async afterRead(event) {
				let lists = [].concat(event.file)
				for (let i = 0; i < lists.length; i++) {
					let res = await this.uploadFilePromise(lists[i].url)
					this.fileList.push({
						name: res.data,
						url: res.name
					})
				}
				this.$emit('change', this.fileList)
			},
			uploadFilePromise(url) {
				let baseurl = this.$service.baseurl
				
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '上传中'
					})
					uni.uploadFile({
						url: baseurl + 'api/login/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'Authorization': uni.getStorageSync('token')
						},
						formData: {},
						success: (res) => {
							console.log('res=====>', JSON.parse(res.data))
							resolve(JSON.parse(res.data))
							uni.hideLoading()
						}
					});
					
				})
			},
			deletePic(e) {
				console.log(e.index)
				this.fileList.splice(0, 1)
			}
		}
	}
</script>

<style lang="scss">
.add_praise{
	.add_praiseV2{
		padding: 20rpx 25rpx;
		.add_praiseV2-c{
			background: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			.add_praiseV2-c-1{
				background-color: #F5F6F8;
				padding: 35rpx 30rpx;
				border-radius: 20rpx;
				.add_praiseV2-c-t{
					height: 300rpx;
				}
			}
			.add_praiseV2-c-2{
				display: grid;
				grid-row-gap: 20rpx;
				grid-column-gap: 20rpx;
				grid-template-columns: repeat(4, 140rpx);
				margin-top: 30rpx;
				.oneLeaveV2-2-3-i{
					width: 140rpx;
					height: 140rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1rpx dashed #DEDEDE;
					border-radius: 15rpx;
					.oneLeaveV2-2-3-i-c{
						height: 100%;
						width: 100%;
						position: relative;
						.oneLeaveV2-2-3-i-c-i{
							height: 100%;
							width: 100%;
						}
						.oneLeaveV2-2-3-i-c-close{
							position: absolute;
							top: 0;
							right: 0;
							transform: translate(50%, -50%);
						}
					}
				}
			}
		}
		.operation{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			color: #FFFFFF;
			background: #2D81FF;
			border-radius: 200rpx;
			margin-top: 50rpx;
		}
	}
	.tel_index_bg{
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		min-height: 220rpx;
		background: linear-gradient(0deg, #f8f8f8 0%, #ffffff 25%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
	}
	.add_praise-main{
		position: relative;
		z-index: 1;
		padding: 15rpx 25rpx;
		.add_praise-main-1{
			border-radius: 15rpx;
			background: #fff;
			overflow: hidden;
			.add_praise-main-1-l{
				line-height: 60rpx;
				padding: 0 30rpx;
				background: #fff9eb;
				color: #F5AC1A;
				font-size: 24rpx;
			}
			.add_praise-main-1-b{
				padding: 0rpx 30rpx;
				.add_praise-main-1-b-u{
					padding: 40rpx 0rpx;
					border-bottom: #EEEEEE solid 1rpx;
				}
			}
		}
		.operation{
			border-radius: 15rpx;
			background-color: #2C82FD;
			line-height: 90rpx;
			text-align: center;
			width: 700rpx;
			color: #fff;
			z-index: 1;
			margin-top: 40rpx;
		}
	}
}
</style>