<template>
	<view class="wrap_box">
		<view class="bz-box">
			<view class="edit-box">
				<view class="edit-tit" v-if="options.id" >
					<text class="edit-tit_icon"></text>
					<view class="edit-tit_content">
						{{time}}
					</view>
				</view>
				<picker @change="bindPickerChange" :value="index" :range="tabs" range-key="title" v-else>
					<view class="cell">
						<view class="cell-label">
							选择分类
						</view>
						<view class="cell-content">
							{{tabs[index].title}}
							<view class="icon">
								<u-icon size="24rpx" name="arrow-down"/>
							</view>
						</view>
					</view>
				</picker>
				<view class="cell ">
					<view class="remarks">
						<textarea v-model="content" placeholder="请输入备注的内容" placeholder-class="textarea-placeholder" ></textarea>
					</view>
				</view>
			</view>
			
			<view class="bz-btn" >
				<view class="" @click="save_fuc" data-url="/pagesA/stu_bz_edit/stu_bz_edit">
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var that 
	export default {
		data() {
			return {
				options:'',
				datas:'',
				tabs:[
					{
						title:'成绩变化',
						id:1
					},
					{
						title:'思想动态',
						id:2
					},
					{
						title:'生活',
						id:3
					},
				],
				index:0,
				time:'',
				content:''
			}
		},
		computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']),
		},
		onLoad(e) {
			that=this
			that.options=e||{}
			console.log(e)
			if(e.id){
				that.time=e.time
				that.content=e.content
			}
			
		},
		onShow() {
			
		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			test(){},
			save_fuc(){
				var datas={
					type:that.tabs[that.index].id,
					id:that.options.stu_id,
					content: that.content
				}
				var jkurl='/teacher/remark_add'
				if(that.options.id){
					///teacher/remark_edit
					jkurl='/teacher/remark_edit'
					datas={
						id:that.options.id,
						content: that.content
					}
				}
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						that.htmlReset = 0
						var datas = res.data
						console.log(typeof datas)
				
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
						console.log(res)
						uni.showToast({
							icon:'none',
							title:'保存成功'
						})
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},1000)
					} else {
					
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
				}).catch(e => {
					that.htmlReset = 1
					that.btnkg = 0
					// that.$refs.htmlLoading.htmlReset_fuc(1)
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
				
				
				
				
			},
			bindPickerChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.detail.value)
					this.index = e.detail.value
			},
			del_fuc(item){
				uni.showModal({
					title: '提示',
					content: '是否删除该备注',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								icon:'none',
								title:'删除成功'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getdata(){
				
				var datas={
					key: that.options.type
				}
				var jkurl='/info'
				
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						that.htmlReset = 0
						var datas = res.data
						console.log(typeof datas)
				
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
						console.log(res)
						that.datas=datas.info.content
						if(datas.info.title){
							uni.setNavigationBarTitle({
								title:datas.info.title
							})
						}
					} else {
					
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
				}).catch(e => {
					that.htmlReset = 1
					that.btnkg = 0
					// that.$refs.htmlLoading.htmlReset_fuc(1)
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
			},
			getimg(img){
				return service.getimg(img)
			},
			jump(e) {
				var that = this
				if (that.btnkg == 1) {
					return
				} else {
					that.btnkg = 1
					setTimeout(function() {
						that.btnkg = 0
					}, 2000)
				}
				console.log(e.currentTarget.dataset.type)
				service.jump(e)
			},
			goback(){
			  uni.navigateBack()
			},
			func(){
				// that.$store.commit('setSystem',datas.system)
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap_box{
	width: 100%;
	// padding: 30rpx;
	min-height: 100vh;
	// #ifdef H5
	min-height: calc(100vh - 44px);
	// #endif
	background: #F8F8F8;
	position: relative;
}
.bz-box {
	padding: 30rpx;
	
	.edit-box {
		padding: 0 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.edit-tit {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			&_icon {
				width: 14rpx;
				height: 14rpx;
				background: #2D81FF;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			&_content {
				flex: 1;
			}
		}
		.cell {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			.cell-label {
				width: 150rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
			.cell-content {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				.icon {
					margin-left: 10rpx;
				}
			}
		}
		.remarks {
			width: 100%;
			height: 350rpx;
			font-size: 28rpx;
			
			textarea {
				width: 100%;
				height: 100%;
				background: #F5F6F8;
				padding: 20rpx;
				box-sizing: border-box;
			}
			:deep(.textarea-placeholder) {
				color: #979797;
			}
		}
	}
}

.bz-btn {
	margin: 30rpx;
	view {
		height: 88rpx;
		line-height: 88rpx;
		background: #2D81FF;
		border-radius: 44rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}
}
</style>