<template>
	<view class="">
		<view class="mainBox">
			<view class="title">
				建议&意见
			</view>
			<u--textarea :autoHeight="true" maxlength="300" v-model="content" border="none" placeholder="请输入内容">
			</u--textarea>
			<view class="title" style="margin-top: 24rpx;">
				上传图片（选填）
			</view>
			<view class="botImage">
				<view class="box" v-for="(item,idx) in imgList" :key="idx">
					<image @click="delImage(idx)" class="close" src="/static/closeImage.png" mode=""></image>
					<image  class="image" :src="item.fullurl" mode=""></image>
				</view>
				<view class="box" v-if="imgList.length<9" @click="upload">
					<image src="/static/addPhoto.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="botBtn flexC">
			<view class="flexC" @click="submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	var that 
	import {
		doFeedback
	} from '@/api/mine.js'
	import { toa } from '@/utils/toast.js'
	import {
		uploadFile
	} from '@/utils/upload.js'
	export default {
		data() {
			return {
				content: '',
				image:'',
				imgList: []
			}
		},
		onLoad() {
			 that = this
		},
		methods: {
			// 删除图片
			delImage(idx){
				this.imgList.splice(idx,1)
			},

			upload() {
				uni.chooseImage({
					count: 9 - that.imgList.length, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有 , 'original','compressed'
					sourceType: ['album'], //从相册选择
					success: async function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						const tempFilePaths = res.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							const result = await uploadFile(tempFilePaths[i])
							console.log(result);
							that.imgList.push(result)
						}
					}
				});
			},
			submit(){
				if(!this.content) return toa.toast('请输入意见或反馈内容')
				// if(!this.imgList.length) return toa.toast('请上传图片')
				this.image = this.imgList.map(it=>it.url)
				this.Feedback()
			},
			async Feedback() {
				try {
					const res = await doFeedback(this.content,this.image)
					console.log('doFeedback', res)
					setTimeout(()=>{
						toa.success('反馈成功')
					},200)
					// uni.navigateBack({})
					uni.reLaunch({
						url:'/pages/mine/mine'
					})
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('doFeedback', err)
				}
			},
		},
	}
</script>

<style lang="less">
	page {
		background: #f6f6f6;
	}

	.mainBox {
		padding: 54rpx 30rpx;

		.title {
			margin-bottom: 24rpx;
			color: rgba(0, 0, 0, 0.9);
			font-size: 36rpx;
			font-weight: 700;
		}
	}

	.u-textarea {
		min-height: 292rpx;
	}

	.botImage {
		display: flex;
		flex-wrap: wrap;
		.box {
			position: relative;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
		}
		.box:nth-child(3n) {
			margin-right: 0;
		}
		image {
			width: 200rpx;
			height: 200rpx;
		}
		.close {
			z-index: 1;
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.botBtn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 128rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);

		view {
			width: 686rpx;
			height: 96rpx;
			color: rgba(0, 0, 0, 0.9);
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 28rpx;
			opacity: 1;
			background: linear-gradient(134.8deg, rgba(255, 232, 100, 1) 0%, rgba(255, 216, 0, 1) 100%);
		}
	}
	/deep/ .uni-textarea-wrapper {
		height: 100% !important;
	}
</style>