<template>
	<view class="pages">
		<u-navbar title="意见反馈" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='48'
			height='44'></u-navbar>
		<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">
					功能异常
					<image style="width: 31rpx;height: 19rpx; position: absolute; right: 0;bottom: 0;display: none;" src="https://api.ccttiot.com/smartmeter/img/static/uvHUjXUhUwA0OvSA0O9K" mode=""></image>
				</view>
				<view class="" :class="cutidx==2?'active':''" @click="cutidx=2">
					意见与建议
                    <image style="width: 31rpx;height: 19rpx; position: absolute; right: 0;bottom: 0;display: none;" src="https://api.ccttiot.com/smartmeter/img/static/uvHUjXUhUwA0OvSA0O9K" mode=""></image>
				</view>
				<view class="" :class="cutidx==3?'active':''" @click="cutidx=3">
					其他
					<image style="width: 31rpx;height: 19rpx; position: absolute; right: 0;bottom: 0;display: none;" src="https://api.ccttiot.com/smartmeter/img/static/uvHUjXUhUwA0OvSA0O9K" mode=""></image>
				</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" style="border: none;"
					@input="updateWordCount" @blur="showPlaceholder" maxlength="500"></textarea>
				<text class="word-count">{{ currentCount }}/500</text>
			</view>
		</view>

		<view class="scpic">
			<view class="title">
				上传图片
			</view>
			<!-- 	<view class="icon">
				<image :src="item" mode=""></image>
			</view> -->
			<view class="icon">
				<view class="imgbox" v-for="(item,index) in imglist " :key="index">
					<image style="border-radius: 10rpx;" :src="item" mode=""></image>
				</view>
				<view class="imgbox" style="width: 17%;">
					<button style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;"  @click="getImage">
	                      <image src="https://api.ccttiot.com/smartmeter/img/static/uY8CPw9YE6JxPzcHUaqf" mode=""></image>
					</button>
				</view>
			</view>
			<text>上传问题图片可以让问题快速解决哦!</text>
		</view>

		<view class="lxfs" v-if="stause">
			<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: "#F7FAFE",
				},
				textValue: '',
				currentCount: 0,
				cutidx: -1,
				imglist: [],
				token: '',
				contact: '',
				stause:false
			}
		},
		computed: {

		},
		onLoad() {

			this.getQiniuToken()
			this.getstause()
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		methods: {
			getstause() {

				this.$u.get('/app/config/wa').then((res) => {
					if (res.code == 200) {
						console.log(res)
						this.stause = res.data
						if (this.stause == true) {

						}
					}
				})
			},
			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 {
					var imgString = this.imglist.join(',');
					let data = {
						type: this.cutidx,
						content: this.textValue,
						picture: imgString,
						contact: this.contact
					}
					console.log(data, 'dadada');
					this.$u.post("/app/complaint", data).then((res) => {
						if (res.code == 200) {
							// this.token=res.token
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 2000
							});
						}
					});
				}
			},
			getImage(e) {
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				uni.chooseImage({
					count: 9,
					type: 'all',
					success(res) {
						console.log(res);
						const tempFilePaths = res.tempFilePaths[0]
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths,
							formData: {
								token: _this.token, //后端返回的token
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								console.log(res, 'resres');
								let str = JSON.parse(res.data)
								_this.userImgs = 'https://api.ccttiot.com/' + str.key
								_this.imglist.push(_this.userImgs)
							}
						})
					}
				})
			},
			// 获取上传七牛云token
			getQiniuToken() {
				this.$u.get("/common/qiniu/uploadInfo").then((res) => {
					if (res.code == 200) {
						this.token = res.token
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.btn {
		width: 590rpx;
		height: 84rpx;
		background: #8883F0;
		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: 96rpx;
	}

	page {
		background-color: #F7FAFE !important;
	}

	.pages {
		padding: 0 66rpx;
		box-sizing: border-box;
	}

	.leix {
		margin-top: 34rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}

		.lxxz {
			display: flex;

			view {
				border-radius: 15rpx;
				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: #8883F0;
					color: #fff;
					border-radius: 5rpx;
					font-size: 18rpx;
					text-align: center;
					line-height: 19rpx;
				}
			}
		}
	}

	.active {
		border: 2rpx solid #8883F0 !important;
        image{
			display: block !important;
		}
 	}

	.problem {
		margin-top: 40rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}
	}

	.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;
				}
			}

		}
	}


	.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;
		/* placeholder颜色 */
		pointer-events: none;
		/* 确保点击事件可以穿透到textarea上 */
	}

	.custom-textarea {
		width: 100%;
		height: 100%;
		/* 设置一个合适高度 */
		padding-top: 18rpx;
		/* 为placeholder留出空间 */
		padding-left: 38rpx;
		box-sizing: border-box;
		border: 1px solid #ccc;
		padding-bottom: 50rpx;
	}

	.word-count {
		position: absolute;
		right: 10px;
		bottom: 10px;
		font-size: 12px;
		color: #999;
	}
</style>