<template>
	<view class="pages">
		<u-navbar title="意见反馈" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='40' id="navbar"></u-navbar>
			<image class="bjimg" src="https://api.ccttiot.com/smartmeter/img/static/uvnKFCPlFY5ZO3wUosTw" mode=""></image>
		<view class="leix">
			<view class="title">
				反馈类型 <text style="font-size: 36rpx; color: red; vertical-align: top;margin-left: 32rpx;">✲</text>
			</view>
			<view class="lxxz">
				<view class="" :class="cutidx==1?'active':''" @click="cutidx=1">
					功能异常
					<text v-if="cutidx==1">✔</text>
				</view>
				<view class="" :class="cutidx==2?'active':''" @click="cutidx=2">
					意见与建议
                    <text v-if="cutidx==2">✔</text>
				</view>
				<view class="" :class="cutidx==3?'active':''" @click="cutidx=3">
					其他
					<text v-if="cutidx==3">✔</text>
				</view>
			</view>
		</view>

		<view class="problem">
			<view class="title">
				问题描述 <text style="font-size: 36rpx; color: red; vertical-align: top;margin-left: 32rpx;">✲</text>
			</view>
			<view class="input-container">
				<view class="placeholder" v-if="!textValue">请详细描述您的问题或建议</view>
				<textarea class="custom-textarea" v-model="textValue" @focus="hidePlaceholder" :maxlength="500" style="border: none;"
					@input="updateWordCount" @blur="showPlaceholder"></textarea>
				<text class="word-count">{{ currentCount }}/500</text>
			</view>
		</view>

		<view class="scpic">
			<view class="title">
				上传图片
			</view>
			<view class="icon">
				<view class="imgbox" v-for="(item,index) in imglist " :key="index">
					<image :src="item" mode="aspectFill"></image>
				</view>
				<view class="imgbox" @click="btn">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uY8CPw9YE6JxPzcHUaqf" mode=""></image>
				</view>
			</view>
			<text>上传问题图片可以让问题快速解决哦!</text>
		</view>
		
		<view class="problem">
			<view class="title">
				联系方式 
			</view>
			<input type="text" v-model="contact" placeholder="请留下手机号/邮箱/微信号，以便我们回复您"/>
		</view>

		<view class="btn" @click="sub()">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
				textValue: '',
				currentCount: 0,
				cutidx: -1,
				imglist: [],
				token: '',
				contact: '',
				picdomain:''
			}
		},
		computed: {

		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '共享时间屋',
				path: '/pages/nearbystores/index'
			}
		},
		
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '共享时间屋',
				query: '',
				path: '/pages/nearbystores/index'
			}
		},
		onLoad() {
            this.getQiniuToken()
		},
		methods: {
			hidePlaceholder() {
				this.placeholderVisible = false
			},
			showPlaceholder() {
				if (!this.textValue) {
					this.placeholderVisible = true
				}
			},
			updateWordCount() {
				this.currentCount = this.textValue.trim().replace(/\s+/g, '').length
			},
			sub() {
				if (this.cutidx == -1) {
					uni.showToast({
						title: '请选择反馈类型',
						icon: 'none',
						duration: 2000
					})
				} else if (this.textValue == '') {
					uni.showToast({
						title: '请输入问题描述',
						icon: 'none',
						duration: 2000
					})
				} else if (this.contact == '') {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none',
						duration: 2000
					})
				}  else {
					var imgString = this.imglist.join(',')
					let data = {
						type: this.cutidx,
						issueDescription: this.textValue,
						uploadedImage: imgString,
						contactInfo: this.contact
					}
					this.$u.post("/appVerify/feedback", data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}
					})
				}
			},
			btn() {
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				uni.chooseImage({
					count: 9,
					type: 'image',
					success(res) {
						const tempFilePaths = res.tempFiles
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths[0].path,
							formData: {
								token: _this.token, //后端返回的token
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								console.log(res, 'resres')
								let str = JSON.parse(res.data)
								_this.userImgs = _this.picdomain + '/' +  str.key 
								console.log(_this.userImgs)
								_this.imglist.push(_this.userImgs)
							}
						})
					}
				})
			},
			// 获取上传七牛云token
			getQiniuToken() {
				this.$u.get("/common/qiniu/uploadInfo").then((res) => {
					if (res.code == 200) {
						this.token = res.token
						this.picdomain = res.domain
					}else if(res.code == 401){
						uni.showModal({
							title: '温馨提示',  
							content: '您该操作需登录，请前去登录',  
							success: function (res) {  
							    if (res.confirm) {
									uni.navigateTo({
										url:'/pages/login/index'
									})
							    } else if (res.cancel) {
							        uni.navigateBack()
							}  
						}  
					  })
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.btn {
		width: 590rpx;
		height: 84rpx;
		background: #48893B;
		filter: blur(0px);
		color: #fff;
		font-size: 36rpx;
		line-height: 84rpx;
		text-align: center;
		border-radius: 50rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 80rpx;
	}
    .bjimg{
    	width: 100%;
    	height: 100vh;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: -1;
    }
	page {
		background-color: #F7FAFE !important;
	}
	.pages {
		padding: 0 66rpx;
		box-sizing: border-box;
	}
	.leix {
		margin-top: 50rpx;
		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}
		.lxxz {
			display: flex;
			view {
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 2rpx solid #C4C4C4;
				padding: 14rpx 34rpx 14rpx 34rpx;
				box-sizing: border-box;
				margin-right: 28rpx;
				margin-top: 40rpx;
				position: relative;
				overflow: hidden;
				text {
					position: absolute;
					bottom: 0;
					right: 0;
					display: inline-block;
					width: 31rpx;
					height: 19rpx;
					background: #7FAD76;
					color: #fff;
					border-radius: 5rpx;
					font-size: 18rpx;
					text-align: center;
					line-height: 19rpx;
				}
			}
		}
	}
	.active {
		border: 2rpx solid #7FAD76 !important;
	}
	.problem {
		margin-top: 40rpx;
		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}
		input{
			width: 612rpx;
			height: 80rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(61,61,61,0.1);
			line-height: 80rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			margin-top: 32rpx;
			border-radius: 20rpx;
		}
	}
	.lxfs {
		margin-top: 40rpx;
		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}
		input {
			margin-top: 32rpx;
			width: 612rpx;
			height: 80rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			border-radius: 20rpx;
			padding-left: 20rpx;
		}
	}
	.scpic {
		margin-top: 40rpx;
		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}
		text {
			display: block;
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #95989D;
			line-height: 38rpx;
		}
		.icon {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 40rpx;
			.imgbox {
				width: 33%;
				image {
					width: 142rpx;
					height: 142rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.input-container {
		position: relative;
		width: 612rpx;
		height: 248rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		border-radius: 20rpx;
		margin-top: 40rpx;
		overflow: hidden;
		padding-right: 38rpx;
		box-sizing: border-box;
	}
	.placeholder {
		position: absolute;
		top: 18rpx;
		left: 38rpx;
		color: #999;
		pointer-events: none;
	}
	.custom-textarea {
		width: 100%;
		height: 100%;
		padding-top: 18rpx;
		padding-left: 38rpx;
		padding-bottom: 54rpx;
		overflow: hidden;
		box-sizing: border-box;
		border: 1px solid #ccc;
	}
	.word-count {
		position: absolute;
		right: 10px;
		bottom: 10px;
		font-size: 12px;
		color: #999;
	}
</style>