<template>
	<view class="con_middle">
		<view class="con_middle_my myCon">
			<!-- 头部信息 -->
			<view class="myCon_top">
				<view class="myCon_top_title" @click="navTo('main')">个人中心</view>
				<image mode="heightFix" v-if="subTitle" src="@/static/images/right.png"></image>
				<view class="myCon_top_name" v-if="subTitle">{{subTitle}}</view>
			</view>
			<!-- 头部信息 -->
			
			<view class="myCon_advice">
				<!-- 表单内容 -->
				<view class="myCon_advice_radio">
					<view class="myCon_advice_radio_item" v-for="(item,index) in typeArr" :key="index" @click="select(index)">
						<view class="myCon_advice_radio_item_text">{{item.text}}</view>
						<view class="myCon_advice_radio_item_icon">
							<u-icon v-if="item.select" name="checkmark-circle-fill" color="var(--phone-theme-color)" size="20"></u-icon>
							<image mode="heightFix" v-else src="@/static/images/status/uncheck-circle.png"></image>
						</view>
					</view>
				</view>
				<view class="myCon_advice_input">
					<uni-easyinput type="textarea" style="height: 100%;" v-model="form.content" :maxlength="300" placeholder="您的宝贵意见帮助我们更快的成长，谢谢"></uni-easyinput>
				</view>
				<!-- 表单内容 -->
				
				<view class="myCon_advice_bottom">
					<view class="myCon_advice_bottom_btn bg-custom" @click="submit">提交</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {addFeedback} from '@/api/my/my'
	export default {
		props:{
			dataSource:{
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				form:{
					type: '0',
					content: '',
				}, // 意见反馈form
				subTitle: '意见反馈',
				info:{}, // 我的信息
				//意见反馈分类 0产品建议 1bug反馈 2想增加的功能
				typeArr: [{text: '产品建议',select: true,value:'0'},{text: 'BUG反馈',select: false,value:'1'},{text: '想增加的功能',select: false,value:'2'}],
			};
		},
		methods:{
			getDictValue(data,value){
				let str = data.filter(item => item.key == value)[0].text
				return str
			},
			// 路由跳转
			navTo(type){
				this.$emit('navTo',type)
			},
			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
			},
			// 选择类型
			select(idx){
				let list = this.typeArr
				list.forEach(item => {item.select = false})
				list[idx].select = true
				this.form.type = list[idx].value
				this.typeArr = list
			},
			submit(){
				let that = this
				let userId = that.$store.state.user.userId
				that.addData(userId)
			},
			addData(userId){
				let that = this
				let judge = that.checkName(that.form.content)
				if(!judge){
					uni.$u.toast('内容为长度不超过300的中英文,不可包含数字和特殊字符')
					return
				}
				let params = {
					"userId": userId, //意见反馈用户ID
					"feedbackType": that.form.type, //意见反馈分类 0产品建议 1bug反馈 2想增加的功能
					"feedback": that.form.content //意见反馈
				}
				that.$modal.loading("保存中，请耐心等待...")
				addFeedback(params).then(res => {
					that.$modal.closeLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 500);
				})
			}
		},
		watch: {
		    dataSource: {
		      handler(newVal, oldVal) {
				this.info = this.dataSource
			  },
		      immediate: true,
		      deep: true
		    },
		},
	}
</script>

<style lang="scss" scoped>
.con{
	position: relative;
	background-color: #F2F3F5;
	width: 100%;
	&_middle{
		background-color: #fff;
		width: 100%;
		height: calc(100vh - 35.42rpx);
		overflow: auto;
		.myCon{
			width: 74%;
			margin-left: 13%;
			padding-top: 11.46rpx;
			padding-bottom: 21.88rpx;
			&_top{
				display: flex;
				align-items: center;
				&_title{
					color: #86909C;
					font-size: 12.5rpx;
					font-weight: 500;
					line-height: 16.67rpx; /* 133.333% */
					cursor: pointer;
				}
				uni-image{
					width: 7.29rpx;
					height: 7.29rpx;
				}
				&_name{
					color: #1D2129;
					font-size: 12.5rpx;
					font-weight: 500;
					line-height: 16.67rpx; /* 133.333% */
				}
			}
			&_advice{
				&_radio{
					display: flex;
					flex-direction: column;
					align-items: center;
					&_item{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 25rpx;
						line-height: 25rpx;
						&_text{
							color: #4E5969;
							font-size: 7.29rpx;
							font-weight: 400;
							line-height: 11.98rpx;
						}
						&_icon{
							cursor: pointer;
							width: 10.42rpx;
							height: 10.42rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							uni-image{
								width: 20px;
								height: 20px;
							}
						}
					}
				}
				&_input{
					height: 100rpx;
					padding: 8.33rpx;
					border-radius: 5.21rpx;
					background: #F7F8FA;
					
					color: #C9CDD4;
					font-size: 7.29rpx;
					font-weight: 400;
					line-height: 11.46rpx; /* 22.4px */
				}
				&_bottom{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					&_btn{
						width: 93.75rpx;
						height: 22.92rpx;
						line-height: 22.92rpx;
						text-align: center;
						color: #FFF;
						border-radius: 4px;
						text-align: center;
						font-size: 7.29rpx;
						font-weight: 400;
						margin-top: 5.21rpx;
						cursor: pointer;
					}
				}
			}
		}
	}
}
/deep/ .is-textarea,/deep/ .uni-easyinput__content-textarea{
	height: 100%!important;
}
/deep/ .uni-easyinput__content-textarea{
	margin: 0;
	padding: 0;
}
</style>
