<template>
	<view>
		<picker :range="typeList" range-key="label" @change="changeType">
			<view class="d-b-c top-tltle">
				<view>{{ typeIndex == -1 ? $t('S_L_16'): typeList[typeIndex].label }}</view>
				<text class="icon iconfont icon-jiantou"></text>
			</view>
		</picker>
		<view class="mt20 bg-white p30 mb50">
			<view class="textarea-box">
				<textarea :maxlength="-1" class="flex-1 lh150" name="detail"  style="height: 400rpx;" v-model="content" placeholder-class="grary9" :placeholder="$t('S_C_70')+'~'"></textarea>
			</view>
		</view>
		<button class="normal-sub-btn " @click="subFunc">{{$t('S_L_17')}}</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			typeList: [],
			typeIndex: -1,
			content: ''
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		getData() {
			let self = this;
			self._get('system/pub/enums/feedback-type', {}, res => {
				self.typeList = res.data;
			});
		},
		changeType(e) {
			this.typeIndex = e.detail.value;
		},
		subFunc() {
			let self = this;
			if (self.typeIndex == -1) {
				uni.showToast({
					title: self.$t('w_0291'),
					icon: 'none'
				});
				return;
			}
			if (self.content == '') {
				uni.showToast({
					title: self.$t('w_0292'),
					icon: 'none'
				});
				return;
			}
			uni.showModal({
				content: self.$t('w_0293'),
				success(e) {
					if (e.confirm) {
						uni.showLoading({
							title: 'Loading...'
						});
						self._post(
							'system/api/feedback/save',
							{
								idea: self.content,
								type: self.typeList[self.typeIndex].value
							},
							res => {
								uni.showModal({
									title: self.$t('w_0034'),
									content: res.msg
								});
								uni.hideLoading();
								self.content = '';
								self.typeIndex = -1;
							},
							err => {
								uni.hideLoading();
								self.content = '';
								self.typeIndex = -1;
							}
						);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.top-tltle {
	margin-top: 20rpx;
	height: 98rpx;
	background-color: #fff;
	font-size: 28rpx;
	color: #666;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 24rpx;
	.icon.icon-jiantou {
		font-size: 28rpx;
		color: #999;
	}
}
.textarea-box {
	border-radius: 20rpx;
	border: 1rpx solid #eee;
	padding: 24rpx;
	textarea {
		font-size: 24rpx;
		color: #333;
	}
}
</style>
