<template>
	<view class="wrap_box">
		<!-- <uParse v-if="datas" :content="datas"></uParse> -->
		<!-- stu_bz_index -->
		<view class="tel_index_bg"></view>
		<view class="bz_box">
			<view class="bz_tab">
				<view v-for="(item,index) in tabs" class="tab_li" :class="{active:active==item.id}" @click="setac_fuc(item.id)">
					{{item.title}}
				</view>
			</view>
			<view class="bz_list">
				<view class="bz_li" v-for="(item,index) in datas">
					<view class="li_msg">
						<view class="li_time">
							<text></text>{{item.create_time}}
						</view>
						<view class="li_inr">
							{{item.content}}
						</view>
					</view>
					<view class="li_b">
						<view class="li_btn" @click="del_fuc(item)">
							删除
						</view>
						<view class="li_btn" @click="$service.jump" :data-url="'/pagesA/stu_bz_edit/stu_bz_edit?id='+item.id+'&time='+item.create_time+'&content='+item.content">
							修改
						</view>
					</view>
				</view>
				<view class="bz_li"  v-if="datas.length==0">
					<u-empty
									mode="data"
									text="暂无记录"
									icon="/static/images/tch/img_blank.png"
					>
					</u-empty>
				</view>
			</view>
			<view class="bz_add" >
				<view class="" @click="$service.jump" :data-url="'/pagesA/stu_bz_edit/stu_bz_edit?stu_id='+options.id">
					添加
				</view>
			</view>
		</view>
		<!-- 阻止滑动 -->
		<!-- <view @touchmove.stop.prevent='test'></view> -->
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var that 
	export default {
		data() {
			return {
				options:'',
				datas:[
					1,1,1,1,1,1,1,1,1,1
				],
				tabs:[
					{
						title:'成绩变化',
						id:1
					},
					{
						title:'思想动态',
						id:2
					},
					{
						title:'生活',
						id:3
					},
				],
				active:1
			}
		},
		computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']),
		},
		onLoad(e) {
			that=this
			that.options=e||{}
			console.log(e)
			
			
		},
		onShow() {
			that.onRetry()
		},
		onReachBottom() {
			that.getdata()
		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			test(){},
			setac_fuc(index){
				that.active=index
				that.onRetry()
			},
			del_fuc(item){
				uni.showModal({
					title: '提示',
					content: '是否删除该备注',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							var datas={
								id: item.id
							}
							var jkurl='/teacher/remark_del'
							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(){
										that.onRetry()
									},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: '获取数据失败，请检查您的网络连接'
								})
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onRetry(){
				that.page=1
				that.datas = []
				that.getdata()
			},
			getdata() {
			
				var jkurl="/teacher/remark"
				//类型1、成绩变化 2、思想动态 3、生活
				var datas={
					id:that.options.id,
					page:that.page,
					type:that.active
				}
				// if(that.data_last == true){
				// 	return
				// }
				if (that.btnkg == 1) {
					return
				} else {
					that.btnkg = 1
				}
				var page_now=that.page
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						var datas = res.data
						console.log(typeof datas)
				
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
					
						if (page_now == 1) {
						
							that.datas = datas.data
						
						} else {
							if (datas.data.length == 0) {
								that.data_last = true
								return
							}
							that.data_last = false
							that.datas = that.datas.concat(datas.data)
						}
						that.page++
				
					} else {
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '操作失败'
							})
						}
					}
				}).catch(e => {
					that.btnkg = 0
					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;
}
.tel_index_bg{
	position: absolute;
	top: 0;
	z-index: 1;
	width: 100%;
	min-height: 220rpx;
	background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
}
.bz_box{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: 0 30rpx 30rpx;
}
.bz_tab{
	width: 100%;
	height: 90rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.tab_li{
	color: rgba(255, 255, 255, .6);
	font-size: 32rpx;
	position: relative;
	padding: 10rpx 0rpx;
	&.active{
		color: #fff;
		&:after{
			content:'';
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -19rpx;
			width: 38rpx;
			height: 5rpx;
			background: #FFFFFF;
			border-radius: 3rpx;
		}
	}
}
.bz_list{
	width: 100%;
	padding-top: 10rpx;
	padding-bottom: 130rpx;
	.bz_li{
		width: 100%;
		// height: 285rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		&+.bz_li{
			margin-top: 20rpx;
		}
		.li_msg{
			width: 100%;
			padding: 30rpx;
			.li_time{
				font-size: 28rpx;
				color: #A9B1C0;
				display: flex;
				align-items: center;
				text{
					width: 14rpx;
					height: 14rpx;
					background: #2D81FF;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}
			.li_inr{
				padding-top: 15rpx;
				font-size: 30rpx;
				color: #545D71;
				line-height: 48rpx;
			}
		}
		.li_b{
			width: 100%;
			height: 90rpx;
			padding: 0 30rpx;
			border-top: 1px solid #eee;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			.li_btn{
				font-size: 28rpx;
				color: #A9B1C0;
				margin-left: 30rpx;
			}
		}
	}
}
.bz_add{
	width: 100%;
	position: fixed;
	bottom: 0;
	background: #f8f8f8;
	z-index: 800;
	left: 0;
	padding: 0 30rpx 30rpx;
	view{
		font-size: 32rpx;
		color: #FFFFFF;
		width: 100%;
		height: 90rpx;
		background: #2D81FF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>