<template>
	<view class="faceback-container">
		<!-- 面包屑 -->
		<custom-breadcrumb separator=">">
			<custom-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to" :switch="true">
				{{route.name}}
			</custom-breadcrumb-item>
		</custom-breadcrumb>
		<!-- 面包屑 -->
		<view class="content">
			<view class="title">意见反馈</view>
			<!-- 选项 -->
			<u-radio-group v-model="selectValue" iconPlacement="right" placement="column" class="selected-content" activeColor='var(--phone-theme-color)'>
				<u-radio class="selected-item" label="产品建议" name="0"></u-radio>
				<u-radio class="selected-item" label="BUG反馈" name="1"></u-radio>
				<u-radio class="selected-item" label="想增加的功能" name="2"></u-radio>
			</u-radio-group>
			<!-- 选项 -->
			<textarea class="desc" v-model="desc" maxlength="300" placeholder="您的宝贵意见帮助我们更快的成长，谢谢"></textarea>
			<u-button type="primary" class="sub_btn" color="var(--phone-theme-color)" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {addFeedback} from '@/api/my/my.js'
	export default {
		data() {
			return {
				routes: [{
					to: "/pages/phone/mine/index",
					name: "个人中心",
				}, {
					to: "/pages/phone/mine/faceback/index",
					name: "意见反馈",
				}, ],
				selectValue: '0', //选中项
				desc:''
			}
		},
		methods: {
			submit(){
				let that = this
				let userId = that.$store.state.user.userId
				that.addData(userId)
			},
			checkName(val){
				let judge = true
				let str = '^[\a-zA-Z\u4E00-\u9FA5]+$'
			    var reg = new RegExp(str);
				judge = reg.test(val)
				if(val.length > 300){
					judge = false
				}
			    return judge
			},
			addData(userId){
				let that = this
				let judge = that.checkName(that.desc)
				if(!judge){
					uni.$u.toast('内容为长度不超过300的中英文,不可包含数字和特殊字符')
					return
				}
				let params = {
					"userId": userId, //意见反馈用户ID
					"feedbackType": that.selectValue, //意见反馈分类 0产品建议 1bug反馈 2想增加的功能
					"feedback": that.desc //意见反馈
				}
				that.$modal.loading("保存中，请耐心等待...")
				addFeedback(params).then(res => {
					that.$modal.closeLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 500);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.faceback-container {
		box-sizing: border-box;
		// padding: 0px 32rpx;
		.content{
			padding: 0px 32rpx;
		}
		.title {
			font-size: 40rpx;
			font-weight: 600;
			margin-top: 40rpx;

		}

		.selected-content {
			margin-top: 8rpx;

			.selected-item {
				width: 100%;
				height: 96rpx;
			}
		}
		
		.desc{
			box-sizing: border-box;
			border-radius: 20rpx;
			padding: 32rpx;
			height: 584rpx;
			background: #F7F8FA;
			width: 100%;
			margin-top: 32rpx;
		}
		
		.sub_btn{
			position: absolute;
			bottom: 72rpx;
			left: 32rpx;
			right: 32rpx;
			border-radius: 8rpx;	
			width: 686rpx;
		}

	}
</style>