<!-- 意见反馈 -->
<template>
	<view class="feedback-page">
		<NavCom title="意见反馈"></NavCom>
		<scroll-view scroll-y="true" class="scroll-main">
			<view class="header-title">
				问题与建议<text class="header-xing">*</text>
			</view>
			<textarea class="main-content" placeholder="请输入内容，我们将不断改进~" maxlength="200" placeholder-class="place-class" v-model="from.content"></textarea>
			<view class="textarea-num">
				{{from.content.length}}/200字
			</view>
			
			<view class="header-title">
				图片上传(限3张)<text class="header-xing">*</text>
			</view>
			<view class="photo">
				<view class="upload-img" v-for="(item,index) in imgList" :key="index" :style="{'backgroundImage':`url(${item})`}">
					<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/mine/del.png" mode="" class="del-img" @click="del(index)"></image>
				</view>
				<view class="upload" @click="upLoadImg" v-if="imgList.length < 3">
					<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/mine/img.png" mode="" class="upload-up"></image>
				</view>
			</view>
			<view class="header-title" style="margin-bottom: 32rpx;">
				联系信息<text class="header-xing">*</text>
			</view>
			<view class="info">
				<input type="text" placeholder="请填写您的姓名" class="info-name" v-model="from.contact" maxlength="32" placeholder-class="place-class">
				<input type="text" placeholder="请填写您的电话或者邮箱" class="info-name" v-model="from.phone" maxlength="32" placeholder-class="place-class">
				<input type="text" placeholder="请填写您的订单编号" class="info-name" v-model="from.orderNo" maxlength="32" placeholder-class="place-class">
			</view>
			<!-- <input type="text" placeholder="请填写您的订单编号" class="order-sn" v-model="from.orderNo" maxlength="32"> -->
			<view class="main-tip">您的信息遵循隐藏保护协议，仅官方客服人员可见！</view>
			<view class="main-btn" @click="submit">提交</view>
		</scroll-view>
		
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/feedback"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import {
		uploadToken,feedback
	} from '@/API/user.js'
	import NavCom from '@/pages/components/nav.vue'
	export default {
	mixins: [myMixins],
		data() {
			return {
				from: {
					contact: "",
					phone: "",
					orderNo: "",
					images: "",
					content: "",
					images:""
				},
				imgList:[]
			}
		},
		components:{NavCom},
		mounted() {

		},
		methods: {
			// 上传图片
			upLoadImg() {
				console.log("aaa")
				uni.chooseImage({
					count: 3,
					sourceType:['album'],
					sizeType:['compressed'],
					success: (chooseImageRes) => {
						console.log("chooseImageRes:",chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// if (res.tempFiles[i].size > 2097152) return this.$main.showToast('您上传的图片过大，请重新上传')
						chooseImageRes.tempFiles.forEach((item, index) => {
							return new Promise((resolve, reject) => {
								if (item.size > 2097152) return this.$api.msg('您上传的图片过大，请重新上传')
								const filename = new Date().getTime() + item.name
								uni.showLoading()
								uploadToken({
										filename: filename,
										dir: 'feedback'
									}).then(res => {
										
										console.log(res)
										console.log(tempFilePaths[index])
										if (res.code === 200) {
											uni.uploadFile({
												url: res.data.host,
												filePath: tempFilePaths[index],
												name: filename,
												formData: {
													policy: res.data.policy,
													signature: res.data.signature,
													key: res.data.key,
													OSSAccessKeyId: res.data
														.accessId,
													dir: res.data.key,
													host: res.data.host,
													file: chooseImageRes.tempFiles[
														index],
												},
												success: (uploadFileRes) => {
													if(this.imgList.length < 3){
														this.imgList.push(res.data.host+'/'+res.data.key)
													}
													
													uni.hideLoading()
													console.log(this.imgList)
												}
											});
										} else {
											// uni.hideLoading()
											this.$api.msg(res.message)
										}
										resolve(true);
									})
									.catch((err) => {
										// uni.hideLoading()
										reject(false);
									});
							});
						})

						// this.getToken()

					}
				});
			},
			del(index){
				this.imgList.splice(index,1)
			},
			submit(){
				uni.showLoading()
				if(this.imgList.length > 0){
					this.from.images = this.imgList.join(',')
				}else{
					this.$api.msg('请选择图片');
					return
				}
				if(!this.from.content){
					this.$api.msg('请输入内容');
					return
				}
				if(!this.from.contact){
					this.$api.msg('请输入姓名');
					return
				}
				if(!this.from.phone){
					this.$api.msg('请输入电话或邮箱');
					return
				}
				// if(!this.from.orderNo){
				// 	this.$api.msg('请输入订单编号');
				// 	return
				// }
				feedback(this.from).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						this.$api.msg('提交成功')
						uni.navigateBack()
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.feedback-page {
		.scroll-main{
			padding-top: 130rpx;
			height: 100vh;
			.header-title {
				// padding: 40rpx 32rpx;
				padding-left: 22rpx;
				display: flex;
				align-content: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			
				.header-xing {
					font-weight: 500;
					font-size: 30rpx;
					color: #EF4234;
				}
			}
			
			.main-content {
				margin-top: 33rpx;
				margin-left: 22rpx;
				width: 706rpx;
				height: 295rpx;
				background: #EDEDED;
				border-radius: 20rpx;
				padding: 31rpx;
				color: #333;
				font-size: 26rpx;
			}
			.place-class{
				color: #C8C8C8;
			}
			
			.textarea-num {
				width: 100%;
				height: 64rpx;
				text-align: right;
				font-size: 28rpx;
				color: #999999;
				padding-right: 32rpx;
				margin-top: 20rpx;
				// background-color: #fff;
			}
			
			.photo {
				// background-color: #fff;
				padding: 22rpx 0 0rpx 32rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			
				.upload {
					width: 176rpx;
					height: 170rpx;
					background-color: #F6F7FB;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
			
					.upload-up {
						width: 64rpx;
						height: 60rpx;
					}
				}
			
				.upload-img {
					width: 176rpx;
					height: 170rpx;
					background-size: 100%;
					background-position: 50%;
					background-repeat: no-repeat;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					margin-right: 30rpx;
					position: relative;
					.del-img{
						position: absolute;
						top: -16rpx;
						right: -16rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
			
			.info {
				padding: 0 23rpx;
				// background-color: #fff;
			
				.info-name {
					width: 704rpx;
					height: 84rpx;
					background: #EDEDED;
					border-radius: 42rpx;
					padding: 0 27rpx;
					font-size: 26rpx;
					margin-bottom: 17rpx;
				}
			
				.border-bottom {
					// border-bottom: 2rpx solid #F2F2F2;
				}
			
				.info-phone {
					height: 104rpx;
					font-size: 28rpx;
				}
			}
			
			.order-sn {
				background-color: #fff;
				height: 100rpx;
				margin-top: 50rpx;
				padding: 0 32rpx;
				font-size: 28rpx;
			}
			
			.main-tip {
				margin-top: 70rpx;
				color: #D93E60;
				font-size: 24rpx;
				text-align: center;
			}
			
			.main-btn {
				margin-top: 20rpx;
				width: 706rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 23rpx;
			}
		}
		
	}
</style>
