<template>
	<view class="feedback">
		<view class="feedback-block">
			<view class="feedback-title">您有任何意见与建议</view>
			<view class="feedback-radiobox">
				<view class="feedback-radiobox-item" @click="changeRadio('页面闪退')" :class="{'show': radioValue === '页面闪退'}">页面闪退</view>
				<view class="feedback-radiobox-item" @click="changeRadio('操作体验')" :class="{'show': radioValue === '操作体验'}">操作体验</view>
				<view class="feedback-radiobox-item" @click="changeRadio('账号问题')" :class="{'show': radioValue === '账号问题'}">账号问题</view>
				<view class="feedback-radiobox-item" @click="changeRadio('功能异常')" :class="{'show': radioValue === '功能异常'}">功能异常</view>
				<view class="feedback-radiobox-item" @click="changeRadio('产品建议')" :class="{'show': radioValue === '产品建议'}">产品建议</view>
				<view class="feedback-radiobox-item" @click="changeRadio('其他问题')" :class="{'show': radioValue === '其他问题'}">其他问题</view>
			</view>
		</view>
		<view class="feedback-block">
			<view class="feedback-title">上传应用截图({{feedbackImg.length}}/8)</view>
			<view class="feedback-sbutitle">上传出现问题的应用图片；长按图片可删除</view>
			<view class="feedback-imgs">
				<view class="feedback-imgs-item" v-for="(item, index) in feedbackImg" :key="index" @longpress="removeImg(index)">
					<image :src="item.showPath" mode="aspectFill"></image>
				</view>
				<view class="feedback-imgs-item" @click="onFeedbackUpd" v-if="feedbackImg.length < 8">
					<image :src="require('@/static/user/feedback-upd.png')" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="feedback-block">
			<view class="feedback-title">问题说明</view>
			<view class="feedback-sbutitle">请对您所遇到的问题进行尽可能详细的描述</view>
			<view class="feedback-textarea">
				<textarea maxlength="200" v-model="description" />
				<view class="feedback-textarea-size">{{description.length}}/200</view>
			</view>
		</view>
		<view class="feedback-block">
			<view class="feedback-title">联系方式</view>
			<input class="feedback-input" type="number" v-model="mobile" maxlength="11" placeholder="输入手机号码" />
		</view>
		<!-- 提交按钮 -->
		<view class="btn">
			<button type="default" @click="subFeedback">提交</button>
		</view>
		<!-- 微信客服 -->
		<u-modal
			:show="wechatCode"
			title="微信客服"
			confirmColor="#34CE98"
			:showCancelButton="true"
			cancelText="关闭"
			confirmText="保存二维码"
			@cancel="wechatCode = false"
			@confirm="dowQrCode"
			>
			<slot>
				<view class="wechat-content">
					<image class="wechat-qrcode" :src="require('@/static/user/qrCode.jpeg')" mode="widthFix"></image>
					<view class="wechat-text">扫描企业微信二维码，添加微信客服</view>
				</view>
			</slot>
		</u-modal>
	</view>
</template>

<script>
	import { feedbacks } from '@/apis/interfaces/versions'
	import { uploads } from '@/apis/interfaces/uploading.js'
	export default {
		data() {
			return {
				radioValue : "页面闪退",
				description: "",
				mobile	   : "",
				systemInfo : {},
				feedbackImg: [],
				wechatCode : false
			}
		},
		onLoad(){
			uni.getSystemInfo({
				success: systemRes => {
					this.systemInfo = {
						brand	 : systemRes.brand,
						models	 : systemRes.model,
						pixel	 : systemRes.pixelRatio,
						width	 : systemRes.windowWidth,
						height	 : systemRes.windowHeight,
						version	 : systemRes.system,
						platform : systemRes.platform,
						font_size: systemRes.fontSizeSetting,
						client_id: systemRes.deviceId,
					}
				}
			})
		},
		onNavigationBarButtonTap() {
			this.wechatCode = true
		},
		methods: {
			dowQrCode(){
				uni.saveImageToPhotosAlbum({
					filePath: require('@/static/user/qrCode.jpeg'),
					success(res) {
						uni.showToast({
							title: '二维码已保存到系统相册',
							icon : 'none'
						})
					},
					fail(err) {
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					}
				})
			},
			changeRadio(e){
				if(this.radioValue === e) return
				this.radioValue = e
			},
			subFeedback(){
				let pictures = this.feedbackImg.map(val => {
					return val.path
				})
				feedbacks({
					type    	: this.radioValue,
					description	: this.description,
					mobile		: this.mobile,
					...this.systemInfo,
					pictures
				}).then(res => {
					uni.showModal({
						title	   : '提示',
						content	   : '我们已收到您的反馈，感谢您对平台建议反馈与支持~',
						showCancel : false,
						cancelColor: '#34CE98',
						success	   : ()=> {
							uni.navigateBack()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 上传图片
			onFeedbackUpd(){
				uni.chooseImage({
					count		: 8 - this.feedbackImg.length,
					sizeType	: ['compressed'],
					sourceType	: ['album'],
					success		: chooseRes => {
						let { tempFiles } = chooseRes
						let paths = tempFiles.map(val => {
							return {
								uri	: val.path,
								name: 'file' + val.size
							}
						})
						uni.showLoading({
							title: '上传中...'
						})
						uploads(paths).then(res => {
							uni.hideLoading()
							let feedbackImg = res.path.map((val, index) => {
								return {
									path	: val,
									showPath: res.url[index]
								}
							})
							this.feedbackImg = this.feedbackImg.concat(feedbackImg)
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none',
							})
						})
					},
					fail		: err => {
						if(err.errCode === -2) return
						uni.showToast({
							title: err.errMsg,
							icon : 'none'
						})
					}
				})
			},
			// 删除图片
			removeImg(index){
				this.feedbackImg.splice(index, 1)
			}
		}
	}
</script>

<style scoped>
	.feedback-block{
		padding: 30rpx;
		border-top: solid 20rpx #F8F8F8;
	}
	.feedback-title{
		font-size: 34rpx;
		font-weight: bold;
		line-height: 40rpx;
	}
	.feedback-title text{
		color: #e6576b;
		padding-left: 5rpx;
	}
	.feedback-radiobox{
		display: flex;
		flex-wrap: wrap;
		margin: 20rpx -10rpx 0;
	}
	.feedback-radiobox-item{
		position: relative;
		width: calc(33.33% - 20rpx);
		display: inline-block;
		margin: 10rpx;
		background: #F8F8F8;
		text-align: center;
		line-height: 70rpx;
		border-radius: 30rpx;
		font-size: 30rpx;
	}
	.feedback-radiobox-item.show{
		background: #34CE98;
		color: white;
	}
	.feedback-imgs{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 10rpx -10rpx 0;
	}
	.feedback-imgs-item{
		position: relative;
		width: calc(25% - 20rpx);
		padding-top: calc(25% - 20rpx);
		margin: 20rpx 10rpx 0 10rpx;
	}
	.feedback-imgs-item image{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border:solid 1rpx #f8f8f8;
	}
	.feedback-sbutitle{
		font-size: 28rpx;
		padding-top: 10rpx;
		color: gray;
	}
	.feedback-textarea{
		background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}
	.feedback-textarea textarea{
		width: 100%;
		height: 200rpx;
		font-size: 32rpx;
	}
	.feedback-textarea-size{
		text-align: right;
		font-size: 28rpx;
		color: gray;
	}
	.feedback-input{
		background: #F8F8F8;
		border-radius: 20rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		padding: 0 20rpx;
	}
	.btn{
		padding: 30rpx;
	}
	.btn button{
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		background: #34CE98;
		font-size: 34rpx;
		font-weight: bold;
		color: white;
		border: none;
		padding: 0;
	}
	.btn button:after{
		display: none;
	}
	
	/* 弹出层 */
	.wechat-content{
		text-align: center;
		padding: 30rpx 0;
	}
	.wechat-qrcode{
		width: 248rpx;
		height: 248rpx;
	}
	.wechat-text{
		text-align: center;
		font-size: 28rpx;
		color: gray;
		padding-top: 30rpx;
	}
</style>