<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">
					功能异常
				</view>
				<view class="" :class="cutidx==2?'active':''" @click="cutidx=2">
					意见与建议

				</view>
				<view class="" :class="cutidx==3?'active':''" @click="cutidx=3">
					其他
				</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 :src="item" mode=""></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="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()
		},
		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;
				// if (this.currentCount > 500) {
				// 	this.textValue = this.textValue.slice(0, this.textValue.lastIndexOf(' ', 500)).trim();
				// 	uni.showToast({
				// 		title: '字数已超过500字限制',
				// 		icon: 'none'
				// 	});
				// }

			},
			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
							});
						}
					});
				}
			},
			btn() {
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				uni.chooseMessageFile({
					count: 9,
					type: 'all',
					success(res) {
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFiles
						// let tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log(tempFilePaths)
						// tempFilePaths.forEach(item=>{
						// 	// 上传图片到七牛云

						// })
						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)
								console.log(str.key)
								_this.userImgs = 'https://api.ccttiot.com/' + 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.$u.get('https://v2.ielts.langsi.online/file/getToken').then(res => {
				// 	console.log(res.data);
				// 	this.token = res.data.token
				// }).catch(err => {
				// 	console.log(err)
				// })

			},
		}
	}
</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;
		margin-top: 164rpx;
		border-radius: 50rpx;
	}

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

	.active {
		border: 2rpx solid #8883F0 !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>