<template>
	<view class="wrap_box">
		<u-sticky>
			<view class="search">
				<picker @change="bindPickerChange" :value="index" :range="tabs" range-key="create_time">
					<view class="search-item">
						<view class="search-item_label">
							核对时间：
						</view>
						<view class="search-item_content">
							<template v-if="sxtitle">
								{{sxtitle}}
							</template>
							<text class="msg" v-else>请选择时间</text>
						</view>
						<u-icon name="arrow-down-fill" color="#646464" size="10px"></u-icon>
					</view>
				</picker>
			</view>
		</u-sticky>
		
		<view class="list">
			<view class="item" v-for="(item,index) in datas" :key="index">
				<view class="info">
					<view class="name">
						{{item.name}}
					</view>
					<image class="gender" v-if="item.sex!=1" src="/static/imagesV2/stu_selection/icon_female.png" mode="aspectFit"></image>
					<image class="gender" v-else src="/static/imagesV2/stu_selection/icon_male.png" mode="aspectFit"></image>
				</view>
				<view class="operate">
					<text class="operate-label">是否到课:</text>
					<view class="operate-content">
						{{item.dk==1 ? '是' : '否'}}
					</view>
				</view>
			</view>
			<u-empty v-if="datas.length==0"
				mode="data"
				text="暂无记录"
				icon="/static/images/tch/img_blank.png"
			>
			</u-empty>
		</view>
		
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var that
	export default {
		data() {
			return {
				options: '',
				tabs: [],
				datas: [],
				sx_time: '2022-02-15',
				index: 0,
				sxtitle:'',
				sxid:''
			}
		},
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo', 'nowtime']),
			startDate() {
					return this.getDate('start');
			},
			endDate() {
					return this.getDate('end');
			}
		},
		onLoad(e) {
			that = this
			that.options = e || {}
			console.log(e)

			// that.getdata()
			///teacher/sign_history
		},
		onShow() {
			that.onRetry()
		},
		onReachBottom() {
			that.getdata()
		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			test(){},
			onRetry(){
				that.page=1
				that.datas = []
				that.getdata()
			},
			getdata() {
			
				var jkurl="/teacher/sign_history"
				
				var datas={
					id:that.sxid,
				}
				if (that.btnkg == 1) {
					return
				} else {
					that.btnkg = 1
				}
				
				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)
						}
					
						that.datas = datas.list
						that.tabs=datas.select
				
					} 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: '操作失败'
					})
				})
			},
			set_fuc(item, num) {
				that.$set(item, 'dk', num)
			},
			save_fuc() {
				uni.showToast({
					icon: 'none',
					title: '保存成功'
				})
				setTimeout(function() {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
			},
			bindDateChange(e) {
				this.sx_time = e.detail.value
			},
			bindPickerChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.detail.value)
					this.index = e.detail.value
					that.sxtitle=that.tabs[that.index].create_time
					that.sxid=that.tabs[that.index].id
					that.onRetry()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			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('用户点击取消');
						}
					}
				});
			},
			
			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%;
		min-height: 100vh;
		// #ifdef H5
		min-height: calc(100vh - 44px);
		// #endif
		background: #F8F8F8;
		position: relative;
		padding-bottom: 30rpx;
	}

	.search {
		padding: 30rpx;
		background: #F8F8F8;
		&-item {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #323232;
			&_label {
				width: 140rpx;
			}
			&_content {
				margin-right: 5rpx;
				.msg {
					color: #646464;
				}
			}
		}
	}
	.list {
		padding: 0 30rpx;
		.item {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			display: flex;
			align-items: center;
			& + .item {
				margin-top: 20rpx;
			}
			.info {
				flex: 1;
				display: flex;
				align-items: center;
			}
			.gender {
				width: 29rpx !important;
				height: 24rpx !important;
				margin-left: 20rpx;
			}
			.operate {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #646464;
				&-content {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #323232;
					margin-left: 5px;
				}
			}
		}
	}
</style>