<template>
	<view class="page">
		<z-nav-bar title="问题反馈/申诉"></z-nav-bar>
		<uni-forms :modelValue="form" :rules="rules" ref="form" style="margin-top: 10rpx;">
			<view class="input_box">
				<uni-forms-item label="" name="type" label-width="0">
					<view class="">
						<text class="input_tit"><i>*</i>问题类型：</text>
					</view>
					<view class="in" style="flex: 1; border: none;">
						<uni-data-select style="width: 100%;" v-model="form.type"
							:localdata="typeLIst"></uni-data-select>
					</view>
				</uni-forms-item>
			</view>
			<view class="input_box">
				<uni-forms-item label="" name="account" label-width="0">
					<text class="input_tit"><i>*</i>心灵空间账号:</text>
					<view class="in">
						<input placeholder-style="font-size:26rpx" type="text" v-model="form.account"
							placeholder="请输入手机号/邮箱" />
					</view>
				</uni-forms-item>
			</view>
			<view class="input_box" v-if="form.type == 3">
				<uni-forms-item label="" name="relation" label-width="0">
					<text class="input_tit"><i>*</i>订单编号:</text>
					<view class="in">
						<input type="number" @input="relationInput" placeholder-style="font-size:26rpx"
							v-model="form.relation" placeholder="请输入订单编号" />
					</view>
					<text v-show="relationError" style="font-size: 24rpx; color: red; margin-top: 10rpx;">请填写订单编号</text>
					<text v-show="relationErrorPattern"
						style="font-size: 24rpx; color: red; margin-top: 10rpx;">订单编号格式错误</text>
				</uni-forms-item>
			</view>
			<view class="input_box">
				<uni-forms-item label="" name="content" label-width="0">
					<text class="input_tit"><i>*</i>问题描述:</text>
					<view class="in">
						<view class="uni-textarea">
							<textarea placeholder-style="font-size:26rpx" v-model="form.content" maxlength="200"
								placeholder="请输入您要反馈的问题" />
						</view>
					</view>
				</uni-forms-item>
			</view>
			<view class="input_box">
				<uni-forms-item label="" name="contactInformation" label-width="0">
					<text class="input_tit"><i>*</i>联系电话:</text>
					{{reversedMessage}}
					<view class="in">
						<input type="number" placeholder-style="font-size:26rpx" @input="telInput"
							v-model="form.contactInformation" placeholder="请输入与您联系的手机号" />
					</view>
					<text v-show="telError" style="font-size: 24rpx; color: red; margin-top: 10rpx;">手机号格式错误</text>
				</uni-forms-item>
			</view>

			<view class="input_box">
				<text class="input_tit">问题截图:</text>
				<view class="in" style="border: none;" @click="checkPermision">
					<u-upload :fileList="fileList1" @afterRead="addPic" @delete="deletePic" multiple :maxCount="4"
						width="40" height="40" :previewFullImage="true">
					</u-upload>
					<text style="font-size: 24rpx; color: #999;">可上传4张问题截图</text>
				</view>
			</view>
		</uni-forms>
		<view class="btn_box"><button @click="onSubmit">提 交</button></view>
	</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import permission from "@/js_sdk/wa-permission/permission.js"
import {
	mapState,
	mapMutations
} from 'vuex';
export default {
	data() {
		return {
			fileList1: [],
			playData: {},
			//手机号账号
			form: {
				account: '', // 账号
				content: '', // 描述
				image: '', //图片
				contactInformation: '', // 联系电话
				relation: '', // 订单号
				type: null, // 反馈类型
			},
			telError: false,
			relationError: false,
			relationErrorPattern: false,
			rules: {
				account: {
					rules: [{
							required: true,
							errorMessage: '请输入账号',
						}

					]
				},
				content: {
					rules: [{
							required: true,
							errorMessage: '请输入问题描述',
						}

					]
				},
				contactInformation: {
					rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						}

					]
				},
				type: {
					rules: [{
							required: true,
							errorMessage: '请选择反馈类型',
						}

					]
				}
			},
			pageType: '',
			typeLIst: [
				{
					value: "1",
					text: "登录相关问题"
				},
				{
					value: "2",
					text: "账号相关问题"
				},
				{
					value: "3",
					text: "订单相关问题"
				},
				{
					value: "4",
					text: "购买相关问题"
				},
				{
					value: "5",
					text: "VIP相关问题"
				},
				{
					value: "6",
					text: "充值相关问题"
				},
				{
					value: "7",
					text: "网络暴力举报"
				},
				{
					value: "8",
					text: "其他"
				},
			],
		};
	},
	//第一次加载
	onLoad(e) {
		this.pageType = e.name
		switch (this.pageType) {
			case "login":
				this.form.type = '1'
				break;
			case "order":
				this.form.type = '3'
				break;
		}
	},
	//页面显示
	onShow() {

	},
	computed: {
		...mapState(['userInfo']),
		reversedMessage: function() {
			this.form.account = this.userInfo.tel
		}
	},
	//方法
	methods: {
		relationInput(e) {
			this.relationError = false
			this.relationErrorPattern = false
		},
		telInput(e) {
			this.telError = false
		},
		async checkPermision() {
			var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE")
			if (result != 1) {
				return false
			}
		},
		async addPic(e) {
			let that = this;
			for (var i = 0; i < e.file.length; i++) {
				uni.uploadFile({
					url: this.$baseUrl + "oss/fileoss",
					filePath: e.file[i].url,
					name: "file",
					formData: {},
					success: (res) => {
						that.fileList1.push({
							url: JSON.parse(res.data).url,
						});
					},
					fail: (error) => {
						
					},
				});
			}
		},
		deletePic(event) {
			this.fileList1.splice(event.index, 1)
		},
		onSubmit() {
			this.$refs.form.validate().then(res => {
				if (this.form.type == 3) {
					if (this.form.relation == '') {
						this.relationError = true
						return
					} else {
						if (!this.$base.orderRegular.test(this.form.relation)) {
							this.relationErrorPattern = true
							return
						}
					}
				}
				if (this.fileList1.length > 0) {
					let _list = this.fileList1
					_list = _list.map(item => item.url)
					this.form.image = _list.join(',')
				}
				if (!this.$base.phoneRegular.test(this.form.contactInformation)) {
					this.telError = true
					uni.showToast({
						title: '手机格式不正确',
						icon: 'none'
					});
					return;
				}
					
				$http.request({
					url: "common/sysFeedback/addSysFeedback",
					method: "POST",
					data: {
						...this.form
					},
					header: {
						'Content-Type': 'application/json'
					},
				})
				.then(res => {
					uni.showModal({
						title: "提示",
						content: "提交成功！",
						showCancel: false,
						success: (res) => {
							this.fileList1 = []
							uni.navigateBack({
								delta: 1
							});
						}
					});
				}).catch(e => {
					uni.showToast({
						title: '提交失败',
						icon: 'error'
					})
				});
			}).catch(err => {
				uni.showToast({
					title: '页面有未填写的内容哦',
					icon: 'none'
				})
			})
		}
	}
};
</script>
<style lang="scss" scoped>
@import '@/static/mixin.scss';

::v-deep .uni-forms-item {
	margin-bottom: 26rpx !important;
}

.input_tit {
	font-weight: bold;
}

.page {
	background-color: #ffffff;
	padding: 0 20rpx;
	min-height: 100vh;

	.title {
		padding: 30rpx 0 40rpx 0;
		font-size: 40rpx;
		color: #333333;
	}

	.input_box {
		display: block;
		padding-top: 10rpx;
		align-items: center;

		i {
			font-size: 24rpx;
			color: red;
			padding-right: 10rpx;
		}

		.in {
			border: 1rpx solid #eeeeee;
			border-radius: 8rpx;
			padding: 8rpx;
			margin-top: 10rpx;
		}

		text {
			font-size: 30rpx;
			width: 180rpx;
		}

		input {

			flex: 1;
			height: 50rpx;
			font-size: 30rpx;
		}

		button {
			height: 78rpx;
			line-height: 78rpx;
			font-size: 30rpx;
			color: $themeColor;

			&:active {
				background-color: transparent;
			}
		}
	}

	.btn_box {
		margin-top: 70rpx;
		padding-bottom: 20rpx;

		button {
			font-size: 30rpx;
			background: linear-gradient(90deg, #294a97 0%, #7dc1f0 80%);
			color: #fff;
			line-height: 85rpx;
			border-radius: 50rpx;
		}
	}

	.protocol {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		margin-top: 20rpx;

		text {
			color: $themeColor;
		}
	}
}
</style>