<template>
	<view class="wrap_box">
		<!-- <uParse v-if="datas" :content="datas"></uParse> -->
		<view class="tel_index_bg"></view>
		
		
		<view class="vio_list">
			<scroll-view scroll-x="" class="top_tabs scroll_x">
				<view class="vip_tab_list">
					<view v-if="options.type==0" v-for="(item,index) in tabs" class="vip_tab_li" :class="{active:active==index}" @click="setac_fuc(index)">
						{{item.title}}
					</view>	
					<view v-if="options.type==1" v-for="(item,index) in tabs1" class="vip_tab_li" :class="{active:active==index}" @click="setac_fuc(index)">
						{{item.title}}
					</view>	
					<view v-if="options.type==2" v-for="(item,index) in tabs2" class="vip_tab_li" :class="{active:active==index}" @click="setac_fuc(index)">
						{{item.title}}
					</view>	
				</view>
				
			</scroll-view>
			<view class="main_list">
				<view class="vio_sx dis_flex aic ju_b">
					<picker mode="date" :value="vio_time" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="vio_time">
							{{vio_time?vio_time:'选择时间'}}<text class="icon icon-xiala"></text>
						</view>
					</picker>
					<!-- 公务员 -->
					<picker v-if="tabs[active].list && options.type==0" @change="bindpickerChange" :value="index" :range="tabs[active].list" range-key="title">
						<view class="vio_time">
							{{tabs[active].list?tabs[active].list[index].title:'选择时间'}}<text class="icon icon-xiala"></text>
						</view>
					</picker>
					<!-- 事业单位 -->
					<picker v-if="tabs1[active].list && options.type==1" @change="bindpickerChange" :value="index" :range="tabs1[active].list" range-key="title">
						<view class="vio_time">
							{{tabs1[active].list?tabs1[active].list[index].title:'选择时间'}}<text class="icon icon-xiala"></text>
						</view>
					</picker>
				</view>	
				<view class="result_li" v-for="(item,index) in datas">
					<view class="flex_1">
						<view class="result_name">
							{{item.title}}
						</view>
						<view class="result_time">
							{{item.add_time}}
						</view>
					</view>
					<view class="result_num">
						<!-- {{item.num}}分 -->
						{{item.num}}%
					</view>
				</view>	
				<u-empty v-if="datas.length==0"
				        mode="data"
								text="暂无数据"
				        icon="/static/images/tch/img_blank.png"
				>
				</u-empty>
			</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:{},
				//分类1、行测 2、申论 3、职业能力 4、综合运用 5、专业课’, 6行测模考 7申论模考
				tabs:[
					{
						title:'行测模考成绩',
						id:1
					},
					{
						title:'申论模考成绩',
						id:2
					},
					{
						title:'行测模块成绩',
						id:1,
						list:[
							{
								title:'常识判断',
								id:4
							},
							{
								title:'逻辑填空',
								id:5,
								ids: 18
							},
							{
								title:'片段阅读',
								id:5,
								ids: 19
							},
							{
								title:'图形推理',
								id:6,
								ids: 20
							},
							{
								title:'类比推理',
								id:6,
								ids: 21
							},
							{
								title:'定义判断',
								id:6,
								ids: 22
							},
							{
								title:'逻辑判断',
								id:6,
								ids: 23
							},
							{
								title:'数量关系',
								id:7,
								ids: undefined
							},
							{
								title:'资料分析',
								id:8,
								ids: undefined
							},
						]
					},
					{
						title:'申论模块成绩',
						id:2,
						list:[
							{
								title:'申论概括',
								id:10
							},
							{
								title:'申论分析',
								id:11
							},
							{
								title:'申论公文',
								id:12
							},
							{
								title:'申论大作文',
								id:13
							},
						]
					},
					{
						title:'三支一扶',
						id:40
					}
				],
				tabs1:[
					{
						title:'职业能力测试模考成绩',
						id:24,
						ids: 30
					},
					{
						title:'职业能力测试模块成绩',
						id:24,
						list:[
							{
								title:'常识判断',
								id:25
							},
							{
								title:'逻辑填空',
								id:26,
								ids: 31
							},
							{
								title:'片段阅读',
								id:26,
								ids: 32
							},
							{
								title:'图形推理',
								id:27,
								ids: 33
							},
							{
								title:'类比推理',
								id:27,
								ids: 34
							},
							{
								title:'定义判断',
								id:27,
								ids: 35
							},
							{
								title:'逻辑判断',
								id:27,
								ids: 36
							},
							{
								title:'数量关系',
								id:28
							},
							{
								title:'资料分析',
								id:29
							},
							{
								title:'综合分析',
								id:37
							},
							{
								title:'策略选择',
								id:38
							}
						]
					},
					{
						title:'综合运用能力模考成绩',
						id:15
					},
				],
				tabs2:[
					{
						title:'专业课成绩',
						id:3,
						ids: 16
					},
					{
						title:'两学成绩',
						id:3,
						ids:17
					},
					{
						title:'特岗模考',
						id:3,
						ids:39
					}
				],
				active:0,
				index:0,
				vio_time:'',
				datas:[]
			}
		},
		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)
			if(e.type==0){
				uni.setNavigationBarTitle({
					title:'公务员成绩查看'
				})
			}
			if(e.type==1){
				uni.setNavigationBarTitle({
					title:'事业单位成绩查看'
				})
			}
			if(e.type==2){
				uni.setNavigationBarTitle({
					title:'特岗教师成绩查看'
				})
			}
			// that.getdata()
			that.onRetry()
		},
		onShow() {
			
		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			test(){},
			onRetry(){
				that.page=1
				that.getdata()
			},
			getdata(){
				
				var mytype=1
				var mytype_s=-1
				let mytype_t=undefined
				console.log(mytype)
				if(that.options.type==0){
					mytype=that.tabs[that.active].id
					if(that.active === 2 || that.active === 3){
						let selectItem = that.tabs[that.active].list[that.index]
						mytype_s=selectItem.id
						if(selectItem.ids){
							mytype_t = selectItem.ids
						}
					}
				}
				if(that.options.type==1){
					mytype=that.tabs1[that.active].id
					mytype_s=that.tabs1[that.active].ids || that.tabs1[that.active].id
					if(that.active === 1) {
						let selectItem = that.tabs1[that.active].list[that.index]
						mytype_s=selectItem.id
						if(selectItem.ids){
							mytype_t = selectItem.ids
						}
					}
				}
				if(that.options.type==2){
					mytype=that.tabs2[that.active].id
					mytype_s=that.tabs2[that.active].ids
				}
				
				var datas={
					type: mytype,
					page:that.page,
					time:that.vio_time,
					limit:20
				}
				if(mytype_s>0){
					datas={
						type: mytype,
						type_s:mytype_s,
						type_t: mytype_t,
						page:that.page,
						time:that.vio_time,
						limit:20
					}
				}
				if(mytype == 1 && that.active !== 2) {
					datas.type_s = 9
				}
				if(mytype == 15) {
					delete datas.type_s
				}
				if(that.btnkg==1){
					return
				}
				that.btnkg=1
				var nowpage=that.page
				var jkurl='/result/see'
				
				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)
						if(nowpage==1){
							that.datas = datas.data
						}else{
							if (datas.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.htmlReset = 1
					that.btnkg = 0
					// that.$refs.htmlLoading.htmlReset_fuc(1)
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
			},
			
			setac_fuc(index){
				if(that.active==index){
					return
				}
				that.active=index
				this.index=0
				that.onRetry()
			},
			bindDateChange(e){
				this.vio_time = e.detail.value
				this.onRetry()
			},
			bindpickerChange(e){
				this.index = e.detail.value
				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}`;
			},
			
			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%);
}
.top_tabs{
	width: 100%;
}
.vip_tab_list{
	// padding: 0 30rpx;
}
.vip_tab_li{
	height: 90rpx;
	display: inline-flex;
	align-items: center;
	font-size: 30rpx;
	color: #FFFFFF;
	opacity: 0.6;
	
	position: relative;
	&+.vip_tab_li{
		margin-left: 50rpx;
	}
	&.active{
		opacity: 1;
		
		&:after{
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -18rpx;
			width: 36rpx;
			height: 6rpx;
			background: #FFFFFF;
			border-radius: 3rpx;
		}
	}
}
.vio_sx{
	
	padding:0 30rpx;
	justify-content: space-between;
}
.vio_time{
	
	// padding: 0 24rpx;
	font-size: 30rpx;
	color: #7D8087;
	letter-spacing: 0;
	display: flex;
	align-items: center;
	.icon{
		font-size: 20rpx;
		margin-left: 5rpx;
		color: #999999;
		opacity: .5;
	}
}

.vio_list{
	width: 100%;
	padding: 0 30rpx 30rpx;
	position: relative;
	z-index: 2;
	.main_list{
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-top: 30rpx;
	}
	.result_li{
		width: 100%;
		min-height: 136rpx;
		display: flex;
		align-items: center;
		padding:25rpx 30rpx;
		&+.result_li{
			
			border-top: 1rpx solid #eee;
		}
		.result_name{
			font-size: 30rpx;
			color: #545D71;
			margin-bottom: 12rpx;
		}
		.result_time{
			font-size: 28rpx;
			font-family: Arial;
			font-weight: 400;
			color: #B2B5BB;
		}
		.result_num{
			font-size: 32rpx;
			color: #2D81FF;
		}
	}
}
</style>