<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-discount"></i> Suggestion
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="form-box">
				<el-form ref="probleform" :model="proForm" :rules="rules" label-width="175px">
					<el-form-item label="Problem classification :" prop="problem_id">
						<el-select v-model="proForm.problem_id" filterable>
							<el-option v-for="item in dysfuncte" :key="item.problem_id" :label="item.problem_title" :value="item.problem_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Problem description :" prop="suggest_desc">
						<el-input v-model="proForm.suggest_desc" type="textarea" :rows="6"></el-input>
					</el-form-item>
					<el-form-item label="Description picture :" label-width="175px">
						<el-upload class="avatar-uploader" :action="baseUrl+'api/Suggest/upImg'" :show-file-list="false" name="img"
						 :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">Submit</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				proForm: {
					user_id: localStorage.getItem('U_id'),
					suggest_url: ''
				},
				imageUrl: '',
				dysfuncte: [],
				rules: {
					problem_id: [{
						required: true,
						message: 'Please select the question type',
						trigger: 'blur'
					}],
					suggest_desc: [{
						required: true,
						message: 'Please enter a description of the problem',
						trigger: 'blur'
					}]
				}
			};
		},
		mounted() {

		},
		created() {
			this.getDate()
		},
		methods: {
			// 获取数据
			getDate() {
				this.$api
					.post('api/Suggest/getProblem', this.proForm)
					.then(res => {
						if (res.code == 0) {
							this.dysfuncte = res.data
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},

			onSubmit() {
				this.$refs.probleform.validate(valid => {
					if (valid) {
						this.$api
							.post('api/Suggest/addSuggest', this.proForm)
							.then(res => {
								if (res.code == 0) {
									this.$refs.probleform.resetFields();
									this.$message.success('Comments submitted successfully!');
									this.$router.push('/comOpinionSuccess');
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('Failed to submit. Please ensure the integrity of the information!');
						return false;
					}
				});
			},

			//上传图片
			handleAvatarSuccess(res, file) {
				if (res.code == 0) {
					this.proForm.suggest_url = res.data.icon;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleAvatarError(res, file) {
				// this.$message.error(res);
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('The picture size cannot exceed 1M!');
				}
				return isLt2M;
			},

		},
		computed: {

		},
		watch: {

		}
	};
</script>

<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 140px;
		height: 140px;
	}

	.avatar-uploader_small {
		height: 140px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 140px;
		height: 140px;
		line-height: 140px;
		text-align: center;
	}

	.avatar-uploader_small .el-upload {
		width: 80px;
		height: 80px;
	}

	.avatar-uploader_small .avatar-uploader-icon {
		line-height: 80px;
		margin-left: -30px;
	}

	.avatar {
		width: 140px;
		height: 140px;
		display: block;
	}
</style>
