<template>
	<view class="page">
		<z-nav-bar></z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="title">问题反馈</view>
		<uni-forms :modelValue="form" :rules="rules" ref="form">
			<view class="input_box " style="display: flex !important; align-items: center; ">
				<uni-forms-item label="" name="type" label-width="0">
					<view class="">
						<text class="input_tit">反馈类型：</text>
					</view>
					<view class="in" style="flex: 1;">						
							<!-- <input type="text" v-model="form.type" placeholder="请输入手机号/邮箱" />
													 -->
						<uni-data-select
						      v-model="form.type"
						      :localdata="questionTypeList"						     
						    ></uni-data-select>
					</view>
				</uni-forms-item>
			</view>
			<view class="input_box">
				<uni-forms-item label="" name="count" label-width="0">
				<text class="input_tit">吴门医述账号:</text>
				<view class="in">					
						<input type="text" v-model="form.count" placeholder="请输入手机号/邮箱" />					
				</view>
				</uni-forms-item>
			</view>
			<view class="input_box">
				<uni-forms-item label="" name="orderNum" label-width="0">
				<text class="input_tit">订单编号:</text>
				<view class="in">					
					<input type="password" maxlength="8" v-model="form.orderNum" placeholder="请输入订单编号" />
				</view>
				</uni-forms-item>
			</view>
			<view class="input_box">
				<uni-forms-item label="" name="note" label-width="0">
				<text class="input_tit">问题描述:</text>
				<view class="in">
					<view class="uni-textarea">
						
						<textarea v-model="form.note" maxlength="200" placeholder="请输入您要反馈的问题" />
						
					</view>
				</view>
				</uni-forms-item>
			</view>
			<view class="input_box">
				<text class="input_tit">问题截图:</text>
				<view class="in">
					<u-upload :fileList="fileList1" @afterRead="addPic" @delete="deletePic" multiple :maxCount="4"
						width="40" height="40" :previewFullImage="true">
					</u-upload>
				</view>
				<!-- <input type="password" maxlength="8" v-model="confirmPassword" placeholder="请确认密码" /> -->
			</view>
			<view class="input_box">
				<uni-forms-item label="" name="tel" label-width="0">
				<text class="input_tit">联系电话:</text>
				<view class="in">
					
					<input type="text" v-model="form.tel" placeholder="请输入与您联系的手机号" />
					
				</view>
				</uni-forms-item>
			</view>
		</uni-forms>
		<view class="btn_box"><button @click="onSubmit">提 交</button></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				fileList1: [],
				playData: {},
				questionTypeList:[
					{}
				],
				//手机号账号
				form: {
					count: '', // 账号
					note: '', // 描述
					images: '', //图片
					tel: '', // 联系电话
					orderNum: '', // 订单号
					type: null, // 反馈类型
				},
				rules: {
					count: {
						rules: [{
								required: true,
								errorMessage: '请输入账户名',
							}

						]
					},
					note: {
						rules: [{
								required: true,
								errorMessage: '请输入问题描述',
							}
					
						]
					},
					tel: {
						rules: [{
								required: true,
								errorMessage: '请输入联系电话',
							}
					
						]
					},
					type: {
						rules: [{
								required: true,
								errorMessage: '请选择反馈类型',
							}
					
						]
					}
				},
			};
		},
		//第一次加载
		onLoad(e) {},
		//页面显示
		onShow() {},

		//方法
		methods: {
			addPic(e) {
				console.log("添加图片");
				let that = this;
				for (var i = 0; i < e.file.length; i++) {
					//console.log(i,e.file[i].url)
					uni.uploadFile({
						url: this.$baseUrl + "oss/fileoss",
						filePath: e.file[i].url,
						//files:e.file,
						name: "file",
						formData: {},
						success: (res) => {
							that.uploadPicLIst.push({
								url: JSON.parse(res.data).url,
							});
							// this.showPicsList = true
							console.log(that.uploadPicLIst, "that.uploadPicLIst");
						},
						fail: (error) => {
							console.log("上传失败", error);
						},
					});
				}
			},
			deletePic(val, i) {
				console.log("删除图片");
				this.uploadPicLIst.splice(i, 1);
			},
			onSubmit() {
			this.$refs.form.validate().then(res=>{
							console.log('表单数据信息：', res);
						}).catch(err =>{
							console.log('表单错误信息：', err);
						})
						return
				this.$http
					// .post('api/common/v1/forget_password', {
					.post('book/user/setPassword', {
						phone: this.phone,
						code: this.code,
						// password: md5(this.password),
						password: this.password
					})
					.then(res => {
						uni.showModal({
							title: "提示",
							content: "密码修改成功！",
							showCancel: false,
							success: (res) => {
								uni.navigateBack();
							}
						});
					});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

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

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

		.input_box {
			display: block;
			// justify-content: space-between;
			overflow: hidden;
			// height: 100rpx;
			padding-top: 10rpx;

			// border-bottom: 1rpx solid #eeeeee;
			align-items: center;

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

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

			input {
				flex: 1;
				// height: 70rpx;
				// line-height: 70rpx;
				font-size: 30rpx;
			}

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

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

		.btn_box {
			margin-top: 70rpx;

			button {
				font-size: 32rpx;
				@include theme('btn_bg') color: #fff;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
			}
		}

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

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