<template>
	<view>
		<!-- 悬浮按钮 -->
		<view class="movableArea">
			<view class="movableView" @click="show = true">
				<u-icon name="kefu-ermai" size="56" :color="textColor"></u-icon>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="modal-content">
				<form @submit="submit">
					<view class="dc-form">
						<u-divider bgColor="#ffffff00" half-width="240" fontSize="40" color="#424242" borderColor="#578ce4">问题反馈</u-divider>
						<view class="blocks">
							<view class="block_input">
								<view><text>*</text>联系方式：</view>
								<input type="tel" name="phone" v-model="form.phone" placeholder="请输入您的联系方式"/>
								<view class="tip" v-show="tip.phone">请输入正确的联系方式</view>
							</view>
							
							<view class="block_input">
								<view><text>*</text>留言：</view>
								<view class="message-textarea">
									<textarea name="message" v-model="form.message" placeholder="请输入留言内容"  :maxlength="messageMaxlength"></textarea>
									<view class="mt-tip">
										{{ form.message.length }} / {{ messageMaxlength }}
									</view>
								</view>
								<view class="tip" v-show="tip.message">请输入留言内容</view>
							</view>
						</view>
						<view class="dcf-btn">
							<u-button ripple :disabled="loading" :loading="loading" :hairLine="false" 
							:class="loading?'submit-disabled':''" class="messageSubmit" form-type="submit">提交</u-button>
						</view>
					</view>
				</form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form:{
					phone: '',// 联系方式
					message: ''// 留言
				},
				tip: {
					phone: false,
					message: false
				},
				messageMaxlength: 300,// 留言最长字数
				loading: true, // 加载
			};
		},
		props: {
			textColor: {
				type: String,
				default: '#333'
			}
		},
		mounted() {
			this.loading = false;
			this.form.phone = JSON.parse(this.$store.state.user_message)?.username;
		},
		methods: {
			// 提交申请
			async submit(e){
				try{
					this.loading = true;
					const { phone, message } = this.form;
					this.tip = {
						phone: (phone==='') || (!(/^1[345789]\d{9}$/.test(phone))),
						message:message===''
					}
					
					if(!(/^1[345789]\d{9}$/.test(phone))){
						this.$emit('toast',{type:'warning',title: "联系方式不正确!"});
						return;
					}else if(message===''){
						this.$emit('toast',{type:'warning',title: "请输入留言内容!"});
						return;
					}
					let res = await this.$api.addMessage(this.form);
					if(res.success){
						this.$emit('toast',{type:'success',title: "提交成功!"});
						this.clear();
					}else{
						this.$emit('toast',{type:'error',title: "提交失败!"});
					}
				}catch(e){
					this.$emit('toast',{type:'error',title: "处理失败!"});
				}finally{
					this.loading = false;
				}
			},
			// 清空
			clear(){
				this.form= {
					phone: '',// 联系方式
					message: ''// 留言
				};
				this.tip={
					phone: false,
					message: false
				};
			},
		}
	}
</script>

<style scoped lang="scss">
.movableArea {
	position: fixed;
	top: 120rpx;
	left: 0;
	width: 100%;
	height: calc(100% - 120rpx);
	pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
	z-index: 80;
	
	.movableView {
		position: fixed;
		right: -96rpx;
		bottom: 400rpx;
		pointer-events: auto; //可以点击
		cursor: pointer;
		width: 120rpx;
		height: 120rpx;
		// border-radius: 78rpx;
		opacity: 0.8;
		border-top-left-radius: 14rpx;
		border-bottom-left-radius: 14rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
		background: rgba(255,255,255,0.99);
		transition: 0.3s;
		.iconImage {
			width: 80rpx;
			height: 70rpx;
			display: block;
		}
		&:hover{
			right: 0;
			border-radius: 78rpx;
			opacity: 1;
		}
		&:active{
			opacity: 0.7;
		}
	}
}
.modal-content{
	width: 1000rpx;
	// height: 500rpx;
	padding: 40rpx 70rpx 0rpx;
	color: #f9f9f9;
	.dc-form{
		display: flex;
		flex-direction: column;
		.blocks{
			display: flex;
			flex-direction: column;
			.block_title{
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #000000;
				line-height: 40rpx;
			}
			.block_input{
				margin-top: 30rpx;
				margin-bottom: 32rpx;
				.tip{
					color: #FE020E;
					margin-top: 4rpx;
					font-size: small;
					margin-bottom: 0rpx !important;
				}
				view{
					font-family: PingFang SC, PingFang SC;
					font-size: 32rpx;
					color: #000000;
					line-height: 40rpx;
					margin-bottom: 16rpx;
					text{
						vertical-align: middle;
						color: #FE020E;
						font-weight: bold;
						margin-right: 8rpx;
					}
				}
				input{
					height: 92rpx;
					background: #F8F9FB;
					border-radius: 4rpx;
					color: rgba(0,0,0,0.8);
					padding:0 32rpx;
					font-size: 32rpx;
					border-radius: 15rpx;
				}
				.message-textarea{
					width: 100%;
					position: relative;
					textarea{
						padding: 32rpx;
						width: 100%;
						height: 400rpx;
						background: #F8F9FB;
						border-radius: 4rpx;
						color: rgba(0,0,0,0.8);
						font-size: 32rpx;
						border-radius: 15rpx;
					}
					.mt-tip{
						position: absolute;
						font-size: 28rpx;
						right: 32rpx;
						bottom: 10rpx;
						z-index: 2;
						background-color: #f8f9fb;
						padding: 5rpx;
						border-radius: 8rpx;
					}
				}
			}
		}
		.dcf-btn{
			flex: 1;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: flex-end;
		}
	}
}
.messageSubmit{
	width: 100%;
	background-size: 200% auto;
	transition: 0.5s;
	animation-duration: 1s;
	animation-fill-mode: both;
	border: none;
	background-image: -webkit-linear-gradient( to right, #36D1DC 0%, #5B86E5  51%, #36D1DC  100%);
	background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5  51%, #36D1DC  100%);
	height: 100rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #fff;
	border-radius: 56rpx;
	margin-top: 20rpx;
	margin-bottom: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 35rpx;
	&::after{
		display: none;
	}
	&:hover {
	    background-position: right center;
	    color: #f8f9fb;
	    text-decoration: none;
	}
	&:active{
		opacity: 0.6;
	}
}
.submit-disabled{
	cursor: default;
	opacity: 0.5;
	&:hover {
	    background-position: inherit !important;
	    color: rgba(0, 0, 0, 0.3) !important;
	}
	&:active{
		opacity: 0.5;
	}
}
</style>