<template>
	<view class="pages">
		<u-navbar title="故障申报" :border-bottom="false" :background="bgc" title-color='#262B37' 
			height='44'></u-navbar>

		<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="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:'',
				userId:'',
				orderobj:{}
			}
		},
		computed: {

		},
		onLoad(option) {
			this.orderobj = JSON.parse(option.obj)
		},
		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.textValue == '') {
					uni.showToast({
						title: '请输入问题描述',
						icon: 'none',
						duration: 2000
					})
				} else if (this.contact == '') {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none',
						duration: 2000
					})
				}  else {
					let data = {
						content: this.textValue,
						mobile: this.contact,
						deviceNo:this.orderobj.deviceNo,
						orderNo:this.orderobj.billNo,
						orderId:this.orderobj.billId
					}
					this.$u.post("/app/abnormal/submit", data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
		}
	}
</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: 80rpx;
	}
	page {
		background: linear-gradient( 180deg, #8883F0 0%, rgba(204,229,255,0) 100%);
	}
	.pages {
		padding: 0 66rpx;
		box-sizing: border-box;
	}
	.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;
		}
	}
	.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>