<template>
	<view class="subscribe">
		<u-navbar :title="title" title-width="400" :title-bold="true" class="navBar">
			<view class="right active" slot="right" v-if="isSubmit" @click="submit">
				提交
			</view>
			<view class="right" slot="right" v-else>
				提交
			</view>
		</u-navbar>

		<view class="content">

			<u-input v-model="form.leave" type="textarea" :clearable="false"
				placeholder="请留下您宝贵的意见或建议，我们将努力改进 (不少于10个字)" class="textarea" />

			<u-input v-model="form.phone" type="textarea" :clearable="false" placeholder="请留下您的手机号，以便我们联系您。"
				class="phone" />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '意见反馈',
				form: {
					leave: '',
					phone: '',
				},
				show: false,
				mode: 'date',
			}
		},
		methods: {
			async submit() {
				if (!this.$u.test.mobile(this.form.phone)) {
					this.$u.toast('手机号有误');
					return;
				}
				let res = await this.$u.api.addFeedBack({
						feedbackContent: this.form.leave,
						contactCetails: this.form.phone
				})
				uni.showToast({
					title: '意见反馈已成功提交',
					duration: 2000,
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		},
		computed: {
			isSubmit() {
				let {
					phone,
					leave,
				} = this.form

				return phone !== '' && leave !== '' && leave.length > 9
			}
		},
	}
</script>

<style lang="scss" scoped>
	.navBar {
		.right {
			width: 144rpx;
			height: 60rpx;
			border-radius: 12rpx;
			background-color: #dfe0e5;
			color: #FFFFFF;
			font-size: 24rpx;
			text-align: center;
			line-height: 60rpx;
			margin-right: 36rpx;
		}

		.active {
			background-color: #e67d29;
		}
	}

	.content {
		padding: 0 36rpx;
		margin-top: 48rpx;

		.textarea {
			background-color: #f5f7fa;
			width: 100%;
			height: 300rpx;
			border-radius: 12rpx;
			padding: 24rpx !important;

			/deep/ .uni-textarea-textarea {
				height: 240rpx;
			}
			
			/deep/ .uni-textarea-placeholder {
				height: 100rpx;
			}
		}

		.phone {
			margin-top: 40rpx;
			height: 100rpx;
			border-radius: 12rpx;
			background-color: #f5f7fa;
			padding: 24rpx !important;
		}
	}
</style>
