<template>
	<view class="contact_service">
		<!-- 留言 -->
		<view class="leaving_message">
			<view class="">
				留言：
			</view>
			<textarea @input="getMsg()" v-model="msg" maxlength="200" placeholder="请输入您的留言" />
			<view class="word_num">({{number}}/200)</view>
		</view>
		<!-- 客服热线 -->
		<view class="service_single">
			<view class="service_number" @click="callPhone()">客服热线：<text>{{phoneNum}}</text></view>
		</view>
		<!-- 发送留言 -->
		<view class="send_btn" @click="sendMsg()">
			发送留言
		</view>
	</view>
</template>

<script>
	import App from "../../App.vue"
	export default {
		data() {
			return {
				// 文本框
				msg:"",
				// 字数
				number:0,
				// 客服电话
				phoneNum:"",
				// 防连点
				isClick:false
			}
		},
		methods: {
			// 输入字数
			getMsg(){
				this.number = this.msg.length
			},
			// 拨打电话
			callPhone(){
				uni.makePhoneCall({
				    phoneNumber: this.phoneNum,
				});
			},
			// 获取客服热线
			getPhone(){
				let url = "/api/member/service";
				App.post(url)
				.then(res=>{
					this.phoneNum = res.content
				})
			},
			// 发送留言
			sendMsg(){
				if(!this.isClick){
					this.isClick = true
					let url = "/api/member/comment";
					let params = {
						content:this.msg
					};
					App.post(url,params)
					.then(res=>{
						uni.showToast({
							title:"反馈成功",
							icon:'success',
							duration:1500
						})
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},1500)
					})
					.catch(err=>{
						this.isClick = false
					})
				}
				
			},
		},
		onLoad() {
			this.getPhone();
		}
	}
</script>

<style>
	page{
		background-color: #f9f9f9;
	}
	/* 留言 */
	.leaving_message{
		padding: 28upx 20upx;
		background-color: #fff;
		margin-top: 20upx;
		position: relative;
		font-size: 28upx;
	}
	textarea{
		width: 100%;
		padding: 20upx 0;
		box-sizing: border-box;
	}
	.word_num{
		position: absolute;
		bottom: 20upx;
		right: 28upx;
		color: #999;
		font-size: 24upx;
	}
	/* 客服热线 */
	.service_single{
		padding: 34upx 24upx;
		background-color: #fff;
		margin-top: 20upx;
	}
	.service_number{
		color: #06121E;
		font-size: 28upx;
	}
	.service_number text{
		color: #3D444D;
	}
	/* 发送留言 */
	.send_btn{
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #fff;
		background-color: #0083FB;
		font-size: 30upx;
		position: absolute;
		bottom: 0;
		left: 0;
	}
</style>