<template>
	<view class="page">
		<z-nav-bar :title="pageName+pageType"></z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module ></public-module>
		<!-- <view class="title">{{pageName+pageType}}</view> -->
		<uni-forms :modelValue="form" :rules="rules" ref="form">	
			<!-- <view class="input_box" v-if="!form.id && form.type != 2">
				<uni-forms-item label="" name="type" label-width="0">
					<text class="input_tit"><i>*</i>类型:</text>					
					<view class="in" style="flex: 1; border: none;">
												
						<uni-data-select placeholder="请选择类型"
						class="addType"
						      v-model="form.type"
						      :localdata="range"
						    @change="chageType"
							  placement="top"
						    ></uni-data-select>
					
					</view>
				</uni-forms-item>
			</view> -->
			<view class="input_box">
				<uni-forms-item label="" name="title" label-width="0">
					<text class="input_tit"><i>*</i>标题:</text>
					<view class="in">
						<input placeholder-style="font-size:26rpx" type="text" v-model="form.title"
							placeholder="请输入标题" />
					</view>
				</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>
							<!-- <input type="password" maxlength="8" v-model="confirmPassword" placeholder="请确认密码" /> -->
						</view>
			<view class="input_box">
				<uni-forms-item label="" name="content" label-width="0">
					<text class="input_tit"><i>*</i>说明:<span style="font-weight: normal; color: #999; font-size: 26rpx;">(600字以内)</span></text>
					<view class="in">
						<view class="uni-textarea">
							<textarea placeholder-style="font-size:26rpx" v-model="form.content" maxlength="600" auto-height
								placeholder="请输入内容" />
						</view>
					</view>
				</uni-forms-item>
			</view>
			<view class="input_box" v-if="false">				
					<radio-group @change="radioChange" class="flex_box">
						<view class="" style="margin-right:20rpx ;">
							<radio value="0" :checked="0 == form.display" />他人不可见</label>
						</view>
						<view class="">
							<radio  value="1"  :checked="1 == form.display" />他人可见</label>
						</view>						
					</radio-group>
						<span style="color: #999; font-size: 28rpx;">（不勾选时，班级管理员以外的人看不见提交的数据）</span>
					
			</view>
		</uni-forms>
		<view class="btn_box"><button @click="onSubmit">提 交</button></view>
	</view>
</template>
<script>
	import { parse } from 'qs';
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: {
					id: undefined, // 作业或者医案id
					classId: undefined,
					display:'1',
					content: '', // 描述
					img: '', //图片
					type: undefined, // 反馈类型
					sort:undefined
				},
				range:[
					{ value: '0', text: "班内作业",name:"班内作业"},
					{ value: '1', text: "班内医案" ,name:"班内医案"},					
				],
				telError: false,
				relationError: false,
				relationErrorPattern:false,
				rules: {
					type: {
						rules: [{
								required: true,
								errorMessage: '请选择类型',
							}
					
						]
					},
					title: {
						rules: [{
								required: true,
								errorMessage: '请输入标题',
							}

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

						]
					},	
					
				},
				pageType: '',
				pageName:''			
			};
		},
		//第一次加载
		onLoad(e) {
			console.log('收到的值', e);
			if(e.sort != 'undefined' && e.sort){
				this.form.sort = e.sort 
			}	
			if(e.type = 2){
				this.form.display = '0'
			}
			this.pageType = e.type
			this.form.classId = e.classId
			this.form.type = e.type
			if(e.type){
				this.form.type = e.type
			}else{
				this.form.type = '0'
			}
			if(e.id){				
				// this.form.renwuId = e.renwuId
				this.form.id = e.id
				this.pageName = '编辑'	
				this.getTaskInfo()
			}else{
				this.pageName = '添加'
			}
			if(e.type == 0){
				// this.form.renwuId = e.renwuId
				this.pageType = '作业'
			}else if(e.type == 1){
				this.pageType = '医案'
			}else if( e.type == 2){
				this.pageType = '心得'
			}else{
				this.pageType = '作业'
			}
			console.log('收到的值', e);
		},
		//页面显示
		onShow() {
			
		},
		computed: {
			...mapState(['userInfo']),
			reversedMessage: function() {
				// `this` 指向 vm 实例
				this.form.account = this.userInfo.tel
			}
		},
		//方法
		methods: {
			chageType(e){
				// console.log('e',e);
				if(e == 0){
					this.pageType = '作业'
				}else if(e == 1){
					this.pageType = '医案'
				}
			},
			// 获取医案任务详情
			getTaskInfo(){
				$http.request({
						url: "common/class/getClassTaskInfoStudent",
						method: "POST",
						data: {
							"taskId": this.form.id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							// that.isHave = true
							console.log(res)
							this.form = res.classTask
							this.fileList1 = []
							if(this.form.img != ''){
								var List = this.form.img.split(',')
								List.forEach(item => {
									this.fileList1.push({url:item})
								})
							}
						}
					}).catch(e => {
						console.log(e, '数据报错')
						// this.status = 3
						uni.showToast({
							title: e.msg,
							icon: 'error'
						})
					});
			},
			radioChange(e){
				// console.log('点了', e);
				
				this.form.display = e.detail.value
				console.log('点了',this.form.show, e);

			},
			relationInput(e) {
				this.relationError = false
				this.relationErrorPattern = false
			},
			telInput(e) {
				// console.log('键盘输入',e);
				this.telError = false
			},
			async checkPermision(){
					  var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE")
					  if (result != 1) {			 
					  	return false
					  }		  
			},
			async 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.fileList1.push({
								url: JSON.parse(res.data).url,
							});							
							console.log(that.fileList1, "that.uploadPicLIst");
						},
						fail: (error) => {
							console.log("上传失败", error);
						},
					});
				}
			},
			deletePic(event) {
				this.fileList1.splice(event.index, 1)
			},
			onSubmit() {
				this.$refs.form.validate().then(res => {					
					if (this.fileList1.length > 0) {
						let _list = this.fileList1
						_list = _list.map(item => item.url)
						// console.log('this.fileList1',_list);
						this.form.img = _list.join(',')
					}else{
						this.form.img = ''
					}
					// var newSort = undefined						
					// if(this.form.sort)	{						
					// 	console.log('this.sort',this.form.sort);
					// 	// var oldsort = this.form.sort.split('')
					// 	if(oldsort[oldsort.length-1] == '9'){
					// 		oldsort.push('0')
					// 	}else{
					// 		console.log('符合');
					// 		oldsort[oldsort.length-1] = ( parseInt(oldsort[oldsort.length-1]) + 1) + '' 
					// 	}
					// 	newSort = oldsort.join('')
					// }
					console.log('this.form',this.form);					
					var _url = ""
					this.form.id ? _url = "common/class/editClassTask" :  _url = "common/class/addClassTask"
						$http.request({
								url: _url,
								method: "POST",
								data: {
									"id": this.form.id,
									"classId": this.form.id ? undefined : this.form.classId,
									    "type": this.form.type, //类型 0班内任务1医案2心得
									    "display":  this.form.display, //0不展示1展示
									    "title": this.form.title,
									    "content": this.form.content,
									    "img": this.form.img,
										"sort": this.form.sort && !this.form.id ? parseInt(this.form.sort)+1 : undefined
								},
								header: { //默认 无 说明：请求头
									'Content-Type': 'application/json'
								},
							})
						.then(res => {
							uni.showToast({
								title:'操作成功！',
								icon:'success'
							})
							setTimeout(()=>{
								uni.$emit('refreshData');
								uni.navigateBack({
									delta: 1
								})								
							},1000)								
						}).catch(e => {
					// console.log('表单错误信息：', err);
					uni.showToast({
						title: '操作失败',
						icon: 'error'
					})
				});
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						title: '页面有未填写的内容哦',
						icon: 'none'
					})
				})
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	::v-deep .uni-forms-item{
		margin-bottom: 26rpx !important;
	}
	.input_tit{
		font-weight: bold;
	}
	.page {
		background-color: #ffffff;
		padding: 0 65rpx;
		min-height: 100vh;

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

		.input_box {
			display: block;
			// justify-content: space-between;
			// overflow: hidden;
			// height: 100rpx;
			padding-top: 10rpx;
			margin-bottom: 20rpx;
			// border-bottom: 1rpx solid #eeeeee;
			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;
				// 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;
			padding-bottom: 20rpx;

			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>