<template>
	<view class="center">
		<view class="login_name"><input class="uni-input" v-model="title" focus placeholder="标题" /></view>
		<view class="text">
			<textarea @input="number" v-model="content" maxlength="300" focus placeholder="详细描述您的问题，老师会根据您的反馈及时解答哦"></textarea>
			<view class="js">{{num}}/300</view>
		</view>
		<view class="buttom" @click="nav('/pages/course/success')">
			提交
		</view>
	</view>
</template>

<script>
import { setProblem } from '@/api/problem.js'
export default {
	data(){
		return{
			title:'',
			content:'',
			num: 0
		}
	},
	methods: {
		nav(url){
			setProblem({
				title: this.title,
				content: this.content
			}).then(e =>{
				uni.navigateTo({
					url:url
				})
			})
		},
		number() {
			this.num = this.content.length;
		}
	}
}
</script>

<style lang="scss">
	.login_name {
		width: 90%;
		margin: 30rpx auto;
		.uni-input{
			padding:20rpx;
			background: #fff;
			height: 80rpx;
		}
	}
	.text{
		position: relative;
		width: 90%;
		margin: 30rpx auto;
		height: 430rpx;
		font-size: 30rpx;
		font-weight: 500;
		background: #fff;
		color: #999999;
		padding: 30rpx;
		.js{
			position: absolute;
			right: 50rpx;
			bottom: 24rpx;
			
		}
		textarea {
			height: 100%;
			width: 100%;
		}
	}
	.buttom{
		margin: 114rpx auto 0;
		width: 560rpx;
		height: 90rpx;
		background: #1CC7C7;
		border-radius: 45px;
		text-align: center;
		line-height: 90rpx;
		color: #FFFFFF;
	}
</style>
