<template>
	<view class="pages">
			<u-navbar title="故障设备" :border-bottom="false" :background="bgc" title-color='#3D3D3D' back-icon-color="#3D3D3D"
				title-size='36' 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="inp">
					<input type="text" placeholder="请输入设备编号" style="padding-left: 20rpx;" v-model="deviceNo"/>
				</view>
				<view class="sm" @click="scanQRCode">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uutVpWMLXLQNqv52U8to" mode=""></image>
				</view>
				<!-- <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">
				<view class="imgbox" v-for="(item,index) in imglist " :key="index">
					<image style="border-radius: 10rpx;" :src="item" mode="aspectFit"></image>
				</view>
				<view class="imgbox" style="width: 17%;" @click="getImage">
					<!-- <button style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;"  > -->
	                      <image src="https://api.ccttiot.com/smartmeter/img/static/uY8CPw9YE6JxPzcHUaqf" mode="aspectFit"></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 class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
			<image style="width: 100%;height: 100vh;" src="https://api.ccttiot.com/smartmeter/img/static/u5AWkMT3khOhGPKrUPMH" mode=""></image>
		</view>
		<view v-if="btnmsk" style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 999;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnmsk:false,
				bgc: {
					// backgroundColor: "#8883f0",
				},
				textValue: '',
				currentCount: 0,
				cutidx: -1,
				imglist: [],
				token: '',
				contact: '',
				stause:false,
				deviceNo:''
			}
		},
		computed: {

		},
		onLoad() {
            this.getuserinfo()
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创亿康',  
		      path: '/pages/index/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创亿康',  
		      query: '',  
		      path: '/pages/index/index'  
		    }  
		  },
		methods: {
			getuserinfo() {
				this.$u.get("/app/user/userInfo").then((res) => {
					if (res.code == 200) {
						this.getQiniuToken()
						this.getstause()
					} else {
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}
				})
			},
			scanQRCode() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						function getQueryParam(url, paramName) {
							let regex = new RegExp(`[?&]${paramName}=([^&]*)`);
							let results = regex.exec(url);
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
						}
						let sceneValue = res.result
						let decodedValue = decodeURIComponent(sceneValue);
						this.deviceNo = getQueryParam(decodedValue, 's')
						// this.deviceNo = res.result;
					},
					fail: err => {
						console.error('扫描失败：', err);
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						});
					}
				});
			},
			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.textValue == '') {
					uni.showToast({
						title: '请输入问题描述',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.btnmsk = true
					var imgString = this.imglist.join(',')
					let data = {
						// type: this.cutidx,
						content: this.textValue,
						picture: imgString,
						contact: this.contact,
						deviceNo:this.deviceNo
					}
					// console.log(data, 'dadada');
					this.$u.post("app/abnormal/submit", data).then((res) => {
						if (res.code == 200) {
							// this.token=res.token
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(()=>{
								this.btnmsk = false
								uni.navigateBack()
							},1000)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
							this.btnmsk = false
						}
					})
				}
			},
			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">
	/deep/ .u-title {
		padding-bottom: 15rpx;
	}
	
	/deep/ .u-icon__icon {
		padding-bottom: 15rpx;
	}
	.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;
			align-items: center;
			justify-content: space-between;
			margin-top: 44rpx;
            input{
				width: 520rpx;
				height: 66rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 2rpx solid #C4C4C4;
				padding-left: 36rpx;
				box-sizing: border-box;
				line-height: 66rpx;
			}
			.sm{
				width: 64rpx;
				height: 64rpx;
			}
			// 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>