<template>
	<view>
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="问题咨询" :autoBack="true">
			<!-- <view slot="right" @click="applyWork"><u-icon name="plus-circle" color="#2979ff" size="26"></u-icon></view> -->
			<view slot="right" style="display: flex;" @click="gotoHistory">
				<svgImage name="history" width="50rpx" height="50rpx"></svgImage>
			</view>
		</u-navbar>
		<uni-forms :model="questionForm" ref="questionForm" :rules="rules">
			<uni-forms-item class="texteara" name="suggestionContent">
				<uni-easyinput type="textarea" :inputBorder="false" :border="true"
					v-model="questionForm.suggestionContent" placeholder="    请详细描述您的问题(140字以内)"
					style="height: 261.3rpx;" />
			</uni-forms-item>
			<!-- <view class="pic">
				<view class="title">请提供建议的截图或图片(选填)</view>
				<uni-forms-item>
					<u-upload :fileList="fileList" auto-upload @delete="deletePic" @afterRead="getImage"></u-upload>
				</uni-forms-item>
			</view> -->
			<!-- <view class="phone">
				<uni-forms-item label="手机号">
					<uni-easyinput v-model="questionForm.phone" :inputBorder="false" :border="true"
						placeholder="请输入手机号" />
				</uni-forms-item>
			</view> -->
		</uni-forms>
		<view class="contentinfo">
			<view>问题提交后，我们会尽快处理~</view>
			<view>工作人员会在工作日9:30~18:00集中进行处理</view>
			<view>最晚会在24小时内回复您，感谢您的理解</view>
		</view>
		<view class="submit" @click="addQuestion">
			提交
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	import {
		getToken
	} from '@/utils/auth.js';
	import {
		addSuggestion,
		listSuggestion,
		getSuggestion
	} from '@/api/indexpage/question/index.js'
	export default {
		data() {
			return {
				questionForm: {
					suggestionContent: ''
				},
				fileList: [],
				rules: {
					// 对name字段进行必填验证
					suggestionContent: {
						rules: [{
							required: true,
							errorMessage: '请输入问题内容'
						}]
					}
				}
			};
		},
		methods: {
			// 跳转历史
			gotoHistory() {
				this.$tab.navigateTo('/pages/mine/question/historyQuestion/historyQuestion')
			},
			// 提交
			addQuestion() {
				this.$refs.questionForm
					.validate().then(res => {
						this.questionForm.isAnonymous = "N"
						addSuggestion(this.questionForm).then(res => {
							this.$modal.msg('提交成功,请耐心等待回复结果');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						})
					}).catch(err => {
						this.$modal.msg('请输入问题内容');
					})

			},
			// 删除图片
			deletePic(event) {
				console.log(11);
				//删除本地
				this[`fileList${event.name}`].splice(event.index, 1);
				//删除远程
				// this.formData.pz.split(',')[event.index]
				// this.fromData.pz.splice(event.index, 1)
				// console.log(this.formData.pz, "this.fromData.pz");
			},
			// 图片上传结果
			async getImage(event) {
				console.log('event', event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map(item => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							ossId: result
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${config.baseUrlUpdata}prod-api/system/oss/upload`, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							Authorization: 'Bearer ' + getToken()
						},
						success: res => {
							let result = JSON.parse(res.data);
							console.log('result', result);
							setTimeout(() => {
								resolve(result.data.ossId);
							}, 1000);
						}
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;

		// 优化建议
		.texteara {
			/deep/.uni-forms-item__content {
				background: #F5F6FA;
				border-radius: 20rpx;
				overflow: hidden;
				height: 261rpx;
			}

			/deep/.uni-textarea-textarea {
				padding-left: 20rpx !important;
			}

			/deep/.uni-easyinput__content-textarea {
				position: relative;
				overflow: hidden;
				flex: 1;
				line-height: 1.5;
				font-size: 14px;
				padding-top: 6px;
				padding-bottom: 10px;
				height: 261rpx;
				min-height: 261rpx;
				width: auto;
			}

			/deep/.uni-easyinput__placeholder-class {
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
			}
		}

		// 图片
		.pic {
			width: 690rpx;
			height: 280rpx;
			background: #F5F6FA;
			border-radius: 20rpx;
			padding: 28rpx;

			.title {
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				border-bottom: 2rpx solid #E6E6E6;
				padding-bottom: 28rpx;
				margin-bottom: 20rpx;
			}

			/deep/.u-upload__button {
				background: #DADDE6;
				border-radius: 10rpx;
			}

			/deep/.u-icon__icon {
				color: #c2bdbd !important;
			}
		}

		.phone {
			margin-top: 40rpx;
			height: 90rpx;
			background: #F5F6FA;
			border-radius: 20rpx;
			padding: 19rpx 28rpx;
		}

		.contentinfo {
			// width: 503rpx;
			margin-top: 40rpx;
			height: 105rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			font-size: 26rpx;
			color: #B3B3B3;
			line-height: 40rpx;
		}

		.submit {
			position: relative;
			height: 109rpx;
			background: linear-gradient(0deg, #2A86FF, #8FBCFF);
			line-height: 109rpx;
			top: 200rpx;
			// bottom: 80rpx;
			width: 80%;
			text-align: center;
			margin: 0 auto;
			border-radius: 50rpx;
			color: #fff;
			font-size: 30rpx;
		}
	}
</style>