<template>
	<div class="bank-container" ref="bankContainer">
		<div class="back-to-top flex-col-center" :title="$t('evaluation.backToTop')" @click="onBackToTop">
			<Icon type="ios-arrow-up" />
		</div>
		<Tabs :value="tabName" name="listTab" @on-click="onTabClick">
			<TabPane :label="$t('evaluation.index.item')" name="exercise" tab="listTab">
				<ExerciseList ref="exList" @toggleChange="onToggleChange"></ExerciseList>
			</TabPane>
			<TabPane :label="$t('evaluation.index.paper')" name="paper" tab="listTab">
				<PaperList ref="paperList" @onPaperClick="isShowBackList = true" @onBackToTop="onBackToTop"></PaperList>
			</TabPane>
		</Tabs>
		<div class="ev-list-operation">
			<div class="import-exercise common-save-btn">
				<div class="ev-list-paper-tools" style="display: flex;"  v-show="currentTab === 'paper' ">
					<span @click="onShowPaperList" class="bank-tools-btn" v-if="isShowBackList">
						<Icon type="md-arrow-back" size="16"/>
						<span>{{ $t('evaluation.index.backList') }}</span>
					</span>
					<div style="display: flex;" v-show="($access.can('admin.*||exercise-upd') || !isSchool)">
						<span @click="goCreatePaper('auto')" class="bank-tools-btn">
							<Icon type="md-cube" size="16"/>
							<span>{{ $t('evaluation.index.autoCreate') }}</span>
						</span>
						<span @click="goCreatePaper('manual')" class="bank-tools-btn">
							<Icon type="md-hand" size="16"/>
							<span>{{ $t('evaluation.index.manualCreate') }}</span>
						</span>
						<span @click="goCreatePaper('import')" class="bank-tools-btn">
							<Icon type="md-folder" size="16"/>
							<span>{{ $t('evaluation.index.importCreate') }}</span>
						</span>
					</div>
					
				</div>
				
				<span @click="goCreateExercise" v-show="currentTab === 'exercise' && ($access.can('admin.*||exercise-upd') || !isSchool)" class="bank-tools-btn">
					<Icon type="md-add" size="16"/>
					<span>{{ $t('evaluation.index.addExercise') }}</span>
				</span>
				<span @click="onHandleToggle" v-show="currentTab === 'exercise'" class="bank-tools-btn">
					<Icon :type="isAllOpen ? 'ios-arrow-down' : 'ios-arrow-up'" size="16"/>
					<span>{{ isAllOpen ? $t('evaluation.index.collapseAll') : $t('evaluation.index.openAll')}}</span>
				</span>
			</div>
		</div>
	</div>
</template>
<script>
	import BaseImport from '../components/BaseImport'
	import PaperList from './TestPaperList'
	import ExerciseList from './ExerciseList'
	export default {
		components: {
			PaperList,
			ExerciseList,
			BaseImport
		},
		data() {
			return {
				isLoading:true,
				tabName: 'exercise',
				currentTab: 'exercise',
				isAllOpen: false,
				isShowBackList:false,
			}
		},
		created() {
		},
		methods: {
			onBackToTop(){
				this.$refs.bankContainer.scrollIntoView()
			},
			onTabClick(val) {
				this.currentTab = val
				this.onBackToTop()
			},
			
			onShowPaperList(){
				this.$refs.paperList.isPreview = false
				this.$refs.paperList.isShowSheet = false
				this.isShowBackList = false
			},

			/** 切换全部展开与折叠 */
			onHandleToggle() {
				this.$refs.exList.onHandleToggle(this.isAllOpen)
				this.isAllOpen = !this.isAllOpen
			},

			/**
			 * exList的collapseList变化
			 * @param list
			 */
			onToggleChange(list) {
				this.isAllOpen = list.length !== 0
			},

			/** 返回创建试题页面 */
			goCreateExercise() {
				this.$router.push({
					name: this.$route.name === 'personalBank' ? 'newPrivateExercise' : 'newSchoolExercise',
					params:{
						scope : this.$route.name === 'personalBank' ? 'private' : 'school'
					}
				})
			},

			/** 前往组卷页面 */
			goCreatePaper(type) {
				this.$router.push({
					name: this.$route.name === 'personalBank' ? 'newPrivatePaper' : 'newSchoolPaper',
					params:{
						scope : this.$route.name === 'personalBank' ? 'private' : 'school',
						type: type
					}
				})
			},

		},
		mounted() {
			let parentVm = this.$parent.$parent.$parent
			parentVm.$refs['evScroll'].scrollTo({
					y: 0
				},
				500, 'easeInQuad'
			)

			if (this.$route.params.tabName) {
				this.currentTab = this.$route.params.tabName
				this.tabName = this.$route.params.tabName
			}
			
			if(this.$route.name === 'schoolBank'){
				this.$EventBus.$emit('showSchoolBank',true)
			}else{
				this.$EventBus.$emit('showSchoolBank',false)
			}
		},
		computed:{
			isSchool(){
				return this.$route.name === "schoolBank";
			},
			paperScrollTop() {
				return this.$store.state.totalAnalysis.paperScrollTop
			},
		},
		watch: {
			paperScrollTop: {
				handler(n) {
					console.log(n)
				}
			}
		}
	}
</script>
<style src="./index.less" lang="less" scoped></style>
<style>
	.bank-container .ivu-tabs{
		overflow: unset;
	}
	.bank-container .ivu-tabs-bar {
		position: sticky;
		top: 0;
		border-bottom: 1px solid #424242;
		padding: 6px 20px;
		z-index: 99;
		background-color: #2b2b2e;
	}

	.bank-container .ivu-tabs-nav .ivu-tabs-tab:active,
	.bank-container .ivu-tabs-nav .ivu-tabs-tab:hover,
	.bank-container .ivu-tabs-nav .ivu-tabs-tab-active,
	.bank-container .ivu-tabs-nav .ivu-tabs-tab {
		color: #fffcfc;
		font-weight: bold;
		font-size: 16px;
	}

	.bank-container .ivu-tabs-ink-bar {
		height: 2px;
		background: #1CC0F3;
		/*margin-left:20px;*/
	}
</style>
