<template>
	<view class="learning_report">
		<view class="tel_index_bg"></view>
		<view class="tel_index_bg-list">
			<public-switching :option="option" :current="current" @change="changeSwitching"></public-switching>
			<view class="tel_index_bg-list-1">
				<view class="public_selector" @click="toStudentSearch">
					<input type="text" :value="from.search.name" class="public_selector-input" disabled placeholder="请选择学员" placeholder-class="placeholderClass" />
					<u-icon name="arrow-down-fill" size="12" ></u-icon>
				</view>
				<!-- <public-selector keyName="name"  placeholder="请选择学员" :value="from.search" :columns="columns" @change="changeSelector"></public-selector> -->
			</view>
				<scroll-view :scroll-y="true" class="tel_index_bg-list-2" :scroll-top="scrollTop" @scroll="scroll">
					<view v-if="from.search.name">
						<view class="tel_index_bg-list-2-i">
							<basic-information :info="info.info"></basic-information>
						</view>
						<view class="tel_index_bg-list-2-i">
							<measurement :info="info.result.xc"></measurement>
						</view>
						<view class="tel_index_bg-list-2-i">
							<job-testing :info="info.result.zc"></job-testing>
						</view>
						<view class="tel_index_bg-list-2-i" v-if="current === LEARNINGREPORTTYPE.STUDY">
							<commentary :info="info.result"></commentary>
						</view>
						<view class="tel_index_bg-list-2-i" v-if="current === LEARNINGREPORTTYPE.EVALUATING">
							<comment :info="info.result.comment"></comment>
						</view>
					</view>
					<u-empty v-else text="暂无学习报告" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				</scroll-view>
		</view>
	</view> 
</template>

<script>
	import public_switching from "@/components/public_switching/public_switching.vue"
	import public_selector from "@/components/public_selector/public_selector.vue"
	import BasicInformation from "./components/BasicInformation/index.vue"
	import Measurement from "./components/Measurement/index.vue"
	import Comment from  "./components/Comment/index.vue"
	import Commentary from "./components/Commentary/index.vue"
	import JobTesting from "./components/JobTesting/index.vue"
	import { LEARNINGREPORTTYPE } from "./emit.js"
	export default { 
		components: {
			PublicSwitching: public_switching,
			publicSelector: public_selector,
			Commentary,
			BasicInformation,
			Measurement,
			Comment,
			JobTesting
		},
		data() { 
			return {
				LEARNINGREPORTTYPE,
				scrollTop: 0,
				columns: [
					[]
				],
				option: [
					{
						lable: '学习报告',
						value: LEARNINGREPORTTYPE.STUDY
					},
					{
						lable: '入学测评报告',
						value: LEARNINGREPORTTYPE.EVALUATING
					}
				],
				current: LEARNINGREPORTTYPE.STUDY,
				from: {
					search: {}
				},
				info: {
					info: {},
					result: {
						xc: [],
						zc: []
					}
				},
				page: 1
			};
		},
		onLoad() {
			this.getStudent()
			uni.$on('selected_student', (e) => {
				this.from.search = e
				console.log('!!!!!!!!!!!,', e)
				this.getData()
			})
		},
		methods: {
			toStudentSearch() {
				uni.navigateTo({
					url: '/page_admin/student_search/student_search'
				})
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			changeSelector(e) {
				this.from.search = e.value[0]
				this.getData()
			},
			changeSwitching(e) {
				this.current = e
				this.scrollTop = 0
				this.getData()
			},
			getData() {
				if(!this.from.search.id) {
					return
				}
				var datas = {
					id: this.from.search.id,
					page: this.page,
					limit: 10
				}
				var jkurl = '/admin/report'
				if(this.current === LEARNINGREPORTTYPE.EVALUATING) {
					jkurl = '/admin/ruxue_report'
				}
				
				this.$service.P_post(jkurl, datas).then(res => {
					console.log("res========>", res)
					this.info = res.data
				})
			},
			getStudent() {
				var datas = {}
				var jkurl = '/admin/user_list'
				this.$service.P_post(jkurl, datas).then(res => {
					let result = res.data
					this.columns = [result]
				})
			}
		}
	}
</script>

<style lang="scss">
.learning_report{
	.public_selector{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 30rpx;
		height: 76rpx;
		box-shadow: 7rpx 0rpx 24rpx 0rpx rgba(153,153,153,0.22);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.public_selector-input{
			font-size: 28rpx;
		}
		.placeholderClass{
			color: #505050;
		}
	}
	.tel_index_bg{
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		min-height: 220rpx;
		background: linear-gradient(0deg, #f8f8f8 0%, #ffffff 25%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
	}
	.tel_index_bg-list{
		position: relative;
		z-index: 1;
		padding: 0rpx 25rpx;
		.tel_index_bg-list-1{
			margin-top: 30rpx;
		}
		.tel_index_bg-list-2{
			height: calc(100vh - 302rpx);
			margin-top: 20rpx;
			.tel_index_bg-list-2-i{
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>