<template>
	<div class="syllabus-container">
		<Loading v-if="isLoading" hideMask></Loading>
		<div class="syllabus-header">
			<div class="period-select" v-if="isSchool">
				<Select ref="periodSelect" v-model="currentPeriodIndex" @on-change="onPeriodChange">
					<Option v-for="(item, index) in periodList" :value="index" :key="index">{{ item.name }}</Option>
				</Select>
			</div>
			<div class="subject-select" v-if="isSchool">
				<span v-for="(subject,subjectIndex) in subjectList" :key="subjectIndex" :class="[
				  'subject-select-item',
				  subjectIndex == activeSubjectIndex ? 'item-active' : '',
				]" @click="onSubjectChange(subject,subjectIndex)">{{ subject.name }}</span>
			</div>
			<div v-if="!isSchool">
				<span style="color: #F0F0F0;font-size: 18px;font-weight: bolder;">个人课纲</span>
			</div>
			<Button @click="onSaveSyllabus" class="btn-save-modify" icon="md-folder"
				v-if="$access.can('admin.*|Syllabus_Edit') && hasModify">存储变更</Button>
		</div>
		<div class="syllabus-content">
			<div class="syllabus-left">
				<div class="syllabus-content-header">
					<div v-if="!isSearchVolume">
						<span>册别清单</span>
						<span class="syllabus-content-header-tools">
							<Icon type="md-search" @click="doSearchVolume" />
							<Icon type="md-create" @click="doEditVolume" />
							<Icon type="md-trash" @click="doDeleteVolume" />
							<Icon type="md-add" @click="doAddVolume" />
						</span>
					</div>
					<div style="width: 90%;" v-else>
						<Input v-model="searchVolumeVal"  placeholder="输入册别名称..." 
						icon="ios-close-circle-outline" @on-click="onCloseSearch" @on-change="onSearchChange"/>
					</div>
				</div>
				<vuescroll>
					<EmptyData :top="100" v-if="!volumeList.length"></EmptyData>
					<div class="volume-list" v-else>
						<div v-for="(volume,volumeIndex) in volumeList" :key="volumeIndex"
							:class="['volume-item',activeVolumeIndex === volumeIndex ? 'volume-active' : '']"
							@click="onVolumeClick(volume,volumeIndex)">
							<p class="volume-item-name">{{ volume.name }}</p>
							<p class="volume-item-info" v-if="isSchool">
								<span>{{ getGradeName(volume.gradeId) }}</span>
								<span>|</span>
								<span>{{ getSemesterName(volume.semesterId) }}</span>
							</p>
						</div>
					</div>
				</vuescroll>
			</div>
			<div class="syllabus-mid">
				<div class="syllabus-content-header">
					<span>课纲目录</span>
					<span class="syllabus-content-header-tools">
						<Icon type="md-add" @click="isAddTreeModal = true" />
					</span>
				</div>
				<div class="syllabus-tree-box">
					<EmptyData :top="-240" v-if="!treeOrigin.length"></EmptyData>
					<Tree ref="treeRef" :treeData="treeOrigin" :volume="curVolume"
						:editable="$access.can('admin.*|Syllabus_Edit')" @onNodeClick="onNodeClick" @doShare="doShare" v-else></Tree>
				</div>
			</div>
			<div class="syllabus-right">
				<div class="syllabus-content-header">
					<span>关联资源</span>
					<span class="syllabus-content-header-tools">
						<!-- <Icon type="md-add" @click="onAddResource" v-if="curNode.id"/> -->
						<Dropdown @on-click="onAddResource" v-if="curNode.id">
							<a href="javascript:void(0)" style="color: #ddd;">
								添加资源
								<Icon type="ios-arrow-down"></Icon>
							</a>
							<DropdownMenu slot="list">
								<DropdownItem name="content">+内容资源</DropdownItem>
								<DropdownItem name="question">+试题资源</DropdownItem>
								<DropdownItem name="paper">+试卷资源</DropdownItem>
								<DropdownItem name="file">+本地文件</DropdownItem>
								<DropdownItem name="link">+超链接</DropdownItem>
							</DropdownMenu>
						</Dropdown>
					</span>
				</div>
				<div class="syllabus-tree-box">
					<EmptyData :top="-203" v-if="curNode.rnodes && !curNode.rnodes.length"></EmptyData>
					<div class="node-resource-box" v-else>
						<div class="node-resource-item" v-for="(item,index) in curNode.rnodes">
							<img src="../../assets/source/image.png" v-if="item.type === 'image'" />
							<img src="../../assets/source/word.png" v-else-if="item.type === 'doc' && docType.includes(getSuffix(item.title))" />
							<img src="../../assets/source/excel.png" v-else-if="item.type === 'doc' && excelType.includes(getSuffix(item.title))" />
							<img src="../../assets/source/ppt.png" v-else-if="item.type === 'doc' && pptType.includes(getSuffix(item.title))" />
							<img src="../../assets/source/pdf.png" v-else-if="item.type === 'doc' && getSuffix(item.title) === 'pdf'" />
							<img src="../../assets/source/video.png" v-else-if="item.type === 'video'" />
							<img src="../../assets/source/audio.png" v-else-if="item.type === 'audio'" />
							<img src="../../assets/source/item.png" v-else-if="item.type === 'item'" />
							<img src="../../assets/source/folder.png" v-else-if="item.type === 'paper'" />
							<img src="../../assets/source/link.png" v-else-if="item.type === 'link'" />
							<img src="../../assets/source/zip.png" v-else-if="item.type === 'res'" />
							<img src="../../assets/source/image.png" v-else-if="item.type === 'thum'" />
							<img src="../../assets/source/unknow.png" v-else="item.type === 'other'" />
							<span v-html="item.title"></span>
							<div class="node-resource-tools">
								<div class="node-resource-tool" @click="onPreview(item)">
									<Icon type="md-eye" />
									<span>查看</span>
								</div>
								<div class="node-resource-tool" @click="onDeleteResource(item,index)">
									<Icon type="md-trash" />
									<span>删除</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--上传文件-->
		<Modal v-model="isUploadModal" width="800" footer-hide class="tree-modal add-volume-modal tree-upload-modal">
			<div class="modal-header" slot="header">
				<span>上传本地文件</span>
			</div>
			<BaseUpload :auth="curSas" :scope="curScope" @uploadFinish="uploadFinish"></BaseUpload>
		</Modal>

		<!-- 新增册别弹窗 -->
		<Modal v-model="isAddVolumeModal" width="500" footer-hide class="add-volume-modal">
			<div class="modal-header" slot="header">
				{{ isEditVolume ? "编辑册别" : "新增册别" }}
			</div>
			<div class="modal-content">
				<div class="form-container">
					<Form :model="addVolumeForm" label-position="top">
						<FormItem label="年级" v-if="isSchool">
							<Select v-model="addVolumeForm.grade">
								<Option v-for="(item,index) in gradeList" :value="index" :key="index">{{item}}</Option>
							</Select>
						</FormItem>
						<FormItem label="学期" v-if="isSchool">
							<Select v-model="addVolumeForm.semester">
								<Option v-for="(item,index) in semesterList" :value="index" :key="index">{{item.name}}
								</Option>
							</Select>
						</FormItem>
						<FormItem label="名称">
							<Input v-if="isSchool" v-model="addVolumeForm.name"
								placeholder="非必填,默认由年级+科目+学期组成..."></Input>
							<Input v-else v-model="addVolumeForm.name" placeholder="填写册别名称"></Input>
						</FormItem>
						<FormItem>
							<Button @click="handleSubmit" :loading="isAddLoading">确认</Button>
						</FormItem>
					</Form>
				</div>
			</div>
		</Modal>

		<!-- 新增课纲节点弹窗 -->
		<Modal v-model="isAddTreeModal" width="500" footer-hide class="tree-modal add-volume-modal">
			<div class="modal-header" slot="header">新增节点</div>
			<div class="modal-content">
				<p class="node-title">父节点</p>
				<Input v-model="curVolume.name" style="width: 100%" disabled />
				<p class="node-title">节点名称</p>
				<Input v-model="nodeInfo.title" placeholder="请输入节点名称..." style="width: 100%" />
			</div>
			<Button @click="onAddTreeNode" style="width: 88%;margin-left: 6%;margin-bottom: 20px;"
				class="modal-btn">确认</Button>
		</Modal>

		<!-- 新增超链接资源弹窗 -->
		<Modal v-model="isShowLinkModal" width="500" footer-hide class="tree-modal add-volume-modal">
			<div class="modal-header" slot="header">添加超链接</div>
			<div class="modal-content">
				<p class="node-title">超链接标题</p>
				<Input v-model="curLink.name" style="width: 100%" />
				<p class="node-title">超链接地址</p>
				<Input v-model="curLink.url" placeholder="" style="width: 100%" />
			</div>
			<Button @click="onAddLink" style="width: 88%;margin-left: 6%;margin-bottom: 20px;"
				class="modal-btn">确认</Button>
		</Modal>

		<!-- 关联内容弹窗 -->
		<Modal v-model="isRelateContentModal" width="900" class="tree-modal add-volume-modal choose-content-modal">
			<ChooseContent v-if="isRelateContentModal" ref="chooseContentRef"
				 :showSyllabus="false" @previewPaper="onPreviewPaper"></ChooseContent>
			<Button slot="footer" @click="onRelateContent" style="margin-bottom: 20px;" class="modal-btn">确认</Button>
		</Modal>
		
		<!-- 关联内容弹窗 -->
		<Modal v-model="isInviteModal" width="900" class="tree-modal add-volume-modal choose-content-modal">
			<div class="modal-header" slot="header">
				选择共编教师
			</div>
			<InviteTeacher :node="curShareNode"></InviteTeacher>
			<Button slot="footer" @click="onRelateContent" style="margin-bottom: 20px;" class="modal-btn">确认</Button>
		</Modal>

		<!-- 预览试题试卷弹窗 -->
		<Modal v-model="isPreviewPaper" width="900" footer-hide class="tree-modal tree-paper-modal">
			<div class="paper-box" v-if="previewPaper">
				<p class="paper-title">{{ previewPaper.name }}</p>
				<p class="paper-info">
					<span>配分：{{ previewPaper.score }}</span>
					<span style="margin-left: 50px;">题数：{{ previewPaper.item.length  }}</span>
				</p>
			</div>
			<ExerciseList :propsList="questionList" ref="exList" isAnalysis></ExerciseList>
		</Modal>

		<!--文件预览-->
		<div v-if="previewStatus" class="image-viewer">
			<div style="width:fit-content;position:relative;margin:auto;">
				<Icon type="md-close" class="close-icon" @click="previewStatus = false" />
				<video v-if="previewFile.type == 'video'" id="previewVideo" :src="previewFile.link[0]" width="870"
					controls="controls" style="max-height: 800px;">
					{{$t('teachContent.tips8')}}
				</video>
				<audio v-else-if="previewFile.type == 'audio'" controls>
					<source :src="previewFile.link[0]">
					{{$t('teachContent.notAudio')}}
				</audio>
				<img v-else-if="previewFile.type == 'image'" :src="previewFile.link[0]"
					style="border-radius: 5px;max-height: 800px;max-width:870px;" />
				<!-- <embed v-else-if="previewFile.type == 'doc'" :src="previewFile.link[0]" width="870" height="720" /> -->
				<iframe v-else :src="'https://view.officeapps.live.com/op/view.aspx?src=' + previewFile.link[0]"
					width='870' height='700' frameborder='1'></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	import BlobTool from '@/utils/blobTool.js'
	import Tree from "@/components/syllabus/DragTree";
	import InviteTeacher from "@/components/syllabus/InviteTeacher";
	import ChooseContent from '@/components/selflearn/NewChooseContent'
	import ExerciseList from '@/components/evaluation/ExerciseList.vue'
	export default {
		components: {
			Tree,
			InviteTeacher,
			ChooseContent,
			ExerciseList
		},
		data() {
			return {
				containerClient:null,
				docType:['doc','docx'],
				excelType:['xls','csv','xlsx'],
				pptType:['ppt','pptx'],
				folder: '',
				searchVolumeVal:'',
				isPreviewPaper: false,
				previewStatus: false,
				hasModify: false,
				isLoading: false,
				isSearchVolume: false,
				isAddLoading: false,
				isShowLinkModal: false,
				isUploadModal: false,
				isAddTreeModal: false,
				isAddVolumeModal: false,
				isRelateContentModal: false,
				isInviteModal:false,
				isEditVolume: false,
				isSchool: false,
				currentPeriodIndex: 0,
				activeSubjectIndex: 0,
				activeVolumeIndex: null,
				periodList: [],
				gradeList: [],
				subjectList: [],
				semesterList: [],
				volumeList: [],
				originVolumeList:[],
				questionList: [],
				schoolInfo: null,
				previewFile: {},
				previewPaper: null,
				curShareNode:null,
				curLink: {
					name: '',
					link: ''
				},
				curSas: {
					sas: '',
					url: '',
					name: ''
				},
				curNode: {
					id: '',
					rnodes: []
				},
				treeOrigin: [],
				curVolume: {
					name: ''
				},
				addVolumeForm: {
					grade: 0,
					semester: 0,
					name: ''
				},
				nodeInfo: {
					"id": "",
					"pid": "",
					"title": "",
					"type": 1,
					"children": [],
					"rnodes": []
				},
			}
		},
		created() {
			this.isSchool = this.$route.name === 'syllabus'
			this.getSchoolInfo()
			this.initBlobTool()
		},
		methods: {
			/* 初始化BLOB对象 */
			async initBlobTool(){
				let n = this.$route.name === 'syllabus'  ? await this.$tools.getSchoolSas() : await this.$tools.getPrivateSas()
				this.containerClient = new BlobTool(n.url, n.name, n.sas, this.curScope)
			},
			/* 获取学校基础信息 */
			getSchoolInfo() {
				this.$store.dispatch("user/getSchoolProfile").then((res) => {
					let schoolBaseInfo = res.school_base;
					if (schoolBaseInfo) {
						this.schoolInfo = res;
						if (schoolBaseInfo.period.length) {
							this.periodList = schoolBaseInfo.period
							this.gradeList = schoolBaseInfo.period[0].grades;
							this.subjectList = schoolBaseInfo.period[0].subjects;
							this.semesterList = schoolBaseInfo.period[0].semesters;
							this.getVolumeList()
						}
					}
				});
			},
			/* 切换学段的操作 */
			onPeriodChange(val) {
				this.subjectList = this.periodList[val].subjects;
				this.gradeList = this.periodList[val].grades;
				this.semesterList = this.periodList[val].semesters;
				this.activeSubjectIndex = 0
				this.getVolumeList()
			},
			/* 切换科目的操作 */
			onSubjectChange(subject, index) {
				this.activeSubjectIndex = index
				this.getVolumeList()
			},
			/* 获取册别列表 */
			getVolumeList() {
				this.isLoading = true
				this.treeOrigin = []
				let findParams = {
					"periodId": this.isSchool ? this.periodList[this.currentPeriodIndex].id : '',
					"subjectId": this.isSchool ? this.subjectList[this.activeSubjectIndex].id : '',
					"status": 1,
					"code": this.curCode,
					"scope": this.curScope
				}
				// 查找列表
				this.$api.syllabus.FindVolumes(findParams).then(res => {
					if (!res.error) {
						this.isLoading = false
						this.volumeList = res.volumes.reverse()
						this.originVolumeList = JSON.parse(JSON.stringify(this.volumeList))
						let activeIndex = this.isEditVolume ? this.activeVolumeIndex : 0
						res.volumes.length && this.onVolumeClick(res.volumes[activeIndex], activeIndex)
					} else {
						this.$Message.warning(res.error);
					}
				}).catch(err => {
					this.$Message.error(err);
				})
			},
			/* 点击某个册别 */
			onVolumeClick(volume, volumeIndex) {
				if (volume.id === this.curVolume.id && !this.isEditVolume) return
				this.isLoading = true
				this.curVolume = volume
				this.activeVolumeIndex = volumeIndex
				this.getTreeByVolumeId(volume)
				this.hasModify = false
			},
			/* 添加册别 */
			doAddVolume() {
				this.addVolumeForm = {
					grade: 0,
					semester: 0,
					name: ''
				}
				this.isEditVolume = false
				this.isAddVolumeModal = true
			},
			/* 搜索册别 */
			doSearchVolume(){
				this.isSearchVolume = true
			},
			/* 搜索词汇发生变化 */
			onSearchChange(){
				this.volumeList = this.originVolumeList.filter(i => i.name.indexOf(this.searchVolumeVal) > -1)
				this.volumeList.length && this.onVolumeClick(this.volumeList[0], 0)
			},
			/* 关闭搜索 */
			onCloseSearch(){
				this.isSearchVolume = false
				this.searchVolumeVal = ''
				this.volumeList = JSON.parse(JSON.stringify(this.originVolumeList))
				this.volumeList.length && this.onVolumeClick(this.volumeList[0], 0)
			},
			/* 编辑当前册别 */
			doEditVolume() {
				this.addVolumeForm = {
					grade: this.curVolume.gradeId,
					semester: this.semesterList.map(i => i.id).indexOf(this.curVolume.semesterId),
					name: this.curVolume.name
				}
				this.isEditVolume = true
				this.isAddVolumeModal = true
			},
			/* 删除当前册别 */
			doDeleteVolume() {
				let curVolume = this.curVolume
				this.$Modal.confirm({
					title: "删除册别",
					content: "<p>确认删除该册别？</p>",
					okText: "确认",
					cancelText: "取消",
					onOk: () => {
						this.isLoading = true;
						this.$api.syllabus.DeleteVolume({
							id: curVolume.id,
							code: curVolume.code.replace('Volume-', ''),
							scope: curVolume.scope
						}).then((res) => {
							if (res) {
								this.volumeList.splice(this.activeVolumeIndex, 1);
								this.$Message.success("删除成功");
								this.onVolumeClick(this.volumeList.length ? this.volumeList[this
									.activeVolumeIndex] : null, this.activeVolumeIndex)
								this.isLoading = false;
							} else {
								this.$Message.success("删除失败");
							}
						});
					},
				});
			},
			/* 根据册别查询对应课纲树形结构 */
			getTreeByVolumeId(volume) {
				this.curNode.rnodes = []
				this.curNode.id = ''
				this.$api.syllabus.GetTreeByVolume({
					id: volume.id,
					code: volume.code.replace('Volume-', ''),
					scope: volume.scope
				}).then(res => {
					if (!res.error) {
						this.treeOrigin = res.tree.trees
					} else {
						this.$Message.warning(res.error);
						this.treeOrigin = []
					}
				}).catch(err => {
					this.treeOrigin = []
				}).finally(() => {
					this.isLoading = false
				})
			},
			/* 添加课纲的第一层节点 */
			onAddTreeNode() {
				this.nodeInfo.id = this.$tools.guid()
				this.nodeInfo.pid = this.curVolume.id
				this.treeOrigin.push(this.nodeInfo)
				this.hasModify = true;
				this.isAddTreeModal = false
				this.nodeInfo = {
					"id": "",
					"pid": "",
					"title": "",
					"type": 1,
					"children": []
				}
			},
			/* 存储变更保存最新课纲数据 */
			onSaveSyllabus() {
				console.log(this.$refs.treeRef)
				let latestTree = this.$refs.treeRef ? this.$refs.treeRef.treeDatas : [];
				this.$api.syllabus.UpsertTree({
					"id": this.curVolume.id,
					"code": this.curVolume.code.replace('Volume-', ''),
					"scope": this.curVolume.scope,
					"trees": latestTree
				}).then((res) => {
					if (!res.error && res) {
						this.treeOrigin = res;
						this.hasModify = false;
						this.$Message.success("保存成功");
						this.getTreeByVolumeId(this.curVolume)
					} else {
						this.$Message.warning("获取数据失败");
					}
				});
			},
			/* 点击某个节点 */
			onNodeClick(data) {
				this.curNode = data
			},
			/* 点击节点进行分享 */
			doShare(data){
				this.curShareNode = data
				this.isInviteModal = true
			},
			/* 添加超链接 */
			onAddLink() {
				this.$refs.treeRef.curNode.rnodes.push({
					code: this.curCode,
					scope: this.curScope,
					id: this.$tools.guid(),
					link: [this.curLink.url],
					title: this.curLink.name,
					type: 'link',
					ctnr: ''
				})
				this.hasModify = true
				this.isShowLinkModal = false
			},
			/* 点击添加关联内容 */
			async onAddResource(type) {
				console.log(type)
				if (type === 'file') {
					this.curSas = this.isSchool ? await this.$tools.getSchoolSas() : await this.$tools.getPrivateSas()
					this.isUploadModal = true
				} else if (type === 'link') {
					this.curLink.name = ''
					this.curLink.url = ''
					this.isShowLinkModal = true
				} else {
					this.isRelateContentModal = true
					this.$nextTick(() => {
						this.$refs.chooseContentRef.clickTab(type)
					})
				}
			},
			/* 上传本地文件成功回调 */
			uploadFinish(result) {
				result.forEach(file => {
					this.$refs.treeRef.curNode.rnodes.push({
						code: this.curCode,
						scope: this.curScope,
						id: this.$tools.guid(),
						link: [file.url],
						title: file.name,
						type: file.type,
						cntr: this.curCode
					})
				})
				this.hasModify = true
				this.isUploadModal = false
				this.$Message.success('上传成功')
				console.log(result)
			},
			/* 获取关联的内容数据，需要进行相应的文件拷贝 */
			async onSelectFile() {
				return new Promise(async (r,j) => {
					let list = this.$refs.chooseContentRef.selectedFiles
					if(!list.length){
						r(200)
					}else{
						let promiseArr = []
						let privateSas = await this.$tools.getPrivateSas()
						let schoolSas = await this.$tools.getSchoolSas()
						let curResourceArr = this.$refs.treeRef.curNode.rnodes
						for(let i = 0 ; i < list.length ; i++){
							promiseArr.push(new Promise((r2,j2) => {
								let file = list[i]
								let sas = file.scope === 'school' ? schoolSas.sas : privateSas.sas
								this.containerClient.copyBlob('syllabus/' + file.name,file.url,sas).then(res => {
									curResourceArr.push({
										type: file.type,
										title: file.name,
										id: this.$tools.guid(),
										code: this.curCode,
										scope: file.scope,
										cntr: file.scope === 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state
											.userInfo.TEAMModelId,
										link: [file.url]
									})
									r2(200)
									
								}).catch(err => {
									console.log(err)
									j2(err)
								})
							}))
						}
						Promise.all(promiseArr).then(result => {
							r(200)
						}).catch(err => {
							console.log(err)
							j(err)
						})
					}
				})
				
			},
			/* 获取关联的试题数据 */
			onSelectQuestion(val) {
				let list = this.$refs.chooseContentRef.$refs.exListRef.selectItems
				if(!list.length) return
				let curResourceArr = this.$refs.treeRef.curNode.rnodes
				list.forEach(i => {
					if(!curResourceArr.filter(j => j.type === 'item').map(k => k.id).includes(i.id)){
						curResourceArr.push({
							type: 'item',
							title: i.question,
							id: i.id,
							code: i.code,
							scope: i.scope,
							cntr: i.scope === 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state
								.userInfo.TEAMModelId,
							link: [i.blob]
						})
					}
				})
			},
			/* 获取关联的试卷数据 */
			onSelectPaper(){
				let list = this.$refs.chooseContentRef.$refs.paperListRef.checkedPaperList
				if(!list.length) return
				let curResourceArr = this.$refs.treeRef.curNode.rnodes
				list.forEach(i => {
					if(!curResourceArr.filter(j => j.type === 'paper').map(k => k.id).includes(i.id)){
						curResourceArr.push({
							type: 'paper',
							title: i.name,
							id: i.id,
							code: i.code,
							scope: i.scope,
							cntr: i.scope === 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state
								.userInfo.TEAMModelId,
							link: [i.blob]
						})
					}
				})
			},
			/* 点击确认 去获取关联的内容数据、试题试卷数据 */
			onRelateContent() {
				let curResourceArr = this.$refs.treeRef.curNode.rnodes
				this.onSelectFile().then(res => {
					this.onSelectQuestion()
					this.onSelectPaper()
					// this.$refs.treeRef.curNode.rnodes = this.relateFiles
					console.log(curResourceArr)
					this.isRelateContentModal = false
					this.hasModify = true
				}).catch(err=> {
					this.$Message.error(err)
				})
			},
			/* 预览关联资源 */
			async onPreview(item) {
				console.log(item)
				this.questionList = []
				let sasObj = item.scope === 'school' ? await this.$tools.getSchoolSas() : await this.$tools.getPrivateSas()
				switch (item.type) {
					case 'item':
						this.previewPaper = null
						this.questionList = [{
							code: item.code,
							id: item.id,
							blob: item.link[0],
							scope: item.scope
						}]
						this.$nextTick(() => {
							this.$refs.exList.collapseList = [0]
						})
						this.isPreviewPaper = true
						break;
					case 'paper':
						let paper = {
							code: item.code,
							id: item.id,
							blob: item.link[0],
							scope: item.scope,
						}
						let fullPaper = await this.$evTools.getFullPaper(paper)
						this.previewPaper = fullPaper
						this.questionList = fullPaper.item
						this.$nextTick(() => {
							this.$refs.exList.collapseList = [...this.questionList.keys()]
						})
						this.isPreviewPaper = true
						break;
					case 'link':
						window.open(item.link[0]);
						break;
					case 'doc':
						let copyLink = JSON.parse(JSON.stringify(item.link))
						
						if (this.getSuffix(item.title) === 'pdf') {
							this.openPdf(item.link[0] + sasObj.sas,item.title)
							// window.open(item.link[0]+ sasObj.sas);
						} else {
							this.previewFile = JSON.parse(JSON.stringify(item))
							this.previewFile.link[0] = escape(copyLink[0] + sasObj.sas)
							this.previewStatus = true
						}
						break;
					default:
						item.link[0] = item.link[0] + sasObj.sas
						this.previewFile = item
						this.previewStatus = true
						break;
				}
			},
			/* 点击试卷列表预览试卷 */
			async onPreviewPaper(paper){
				let fullPaper = await this.$evTools.getFullPaper(paper)
				this.previewPaper = fullPaper
				this.questionList = fullPaper.item
				this.isPreviewPaper = true
			},
			/* 打开PDF文件进行预览 */
			openPdf(url){
				window.open('/web/viewer.html?file=' + encodeURIComponent(url));
			},
			/* 删除关联资源 */
			onDeleteResource(item, index) {
				this.$Modal.confirm({
					title: this.$t('settings.modalTip4'),
					content: '确定要移除该资源吗？',
					onOk: () => {
						// 需要删除blob对应目录下的文件
						if(this.needDeleteFile(item)){
							this.isLoading = true
							this.deleteBlobPrefix(item).then(r => {
								this.$Message.success(this.$t('evaluation.deleteSuc'))
								this.$refs.treeRef.curNode.rnodes.splice(index, 1)
								this.hasModify = true
							}).catch(err => {
								this.$Message.error(err)
							}).finally(() => {
								this.isLoading = false
							})
						}else{
							this.$refs.treeRef.curNode.rnodes.splice(index, 1)
							this.hasModify = true
						}
						
					}
				})
			},
			/* 删除blob指定试题目录下所有 */
			deleteBlobPrefix(item) {
				return new Promise((resolve, reject) => {
					this.$api.blob.deletePrefix({
						"cntr": item.cntr,
						"prefix": "syllabus/" + item.title
					}).then(
						(res) => {
							if (!res.error) {
								resolve(200)
							} else {
								resolve(500)
							}
						},
						(err) => {
							reject(err)
						}
					)
				})
			},
			/* 提交新增册别 */
			handleSubmit() {
				this.isAddLoading = true
				let addVolumeParams = {
					"code": this.curCode,
					"periodId": this.isSchool ? this.periodList[this.currentPeriodIndex].id : null,
					"subjectId": this.isSchool ? this.subjectList[this.activeSubjectIndex].id : null,
					"gradeId": this.isSchool ? this.addVolumeForm.grade : -1,
					"semesterId": this.isSchool ? this.semesterList[this.addVolumeForm.semester].id : null,
					"status": 1,
					"name": this.addVolumeForm.name || this.getDefaultVolumeName,
					"creatorId": this.$store.state.userInfo.TEAMModelId,
					"school": this.$store.state.userInfo.schoolCode,
					"scope": this.curScope
				}
				if (this.isEditVolume && this.curVolume) {
					addVolumeParams.id = this.curVolume.id
				}
				// 发送新增或者编辑册别请求
				this.$api.syllabus.SaveOrUpdateVolume(addVolumeParams).then(res => {
					if (!res.error) {
						this.isAddVolumeModal = false
						this.$Message.success("操作成功");
						this.getVolumeList()
					} else {
						this.$Message.warning(res.error === 4 ? '已存在相同册别！' : res.error);
					}
				}).catch(err => {
					// this.$Message.error(err);
				}).finally(() => {
					this.isAddLoading = false
				})
			}
		},
		computed: {
			getDefaultVolumeName() {
				return this.subjectList[this.activeSubjectIndex].name + this.gradeList[this.addVolumeForm.grade] + this
					.semesterList[this.addVolumeForm.semester].name
			},
			getGradeName() {
				return index => {
					return this.periodList.length ? this.periodList[this.currentPeriodIndex].grades[index] : '0'
				}
			},
			getSemesterName() {
				return id => {
					return this.periodList.length ? this.periodList[this.currentPeriodIndex].semesters.find(i => i
						.id === id).name : 0
				}
			},
			curCode() {
				return this.isSchool ? this.$store.state.userInfo.schoolCode : this.$store.state.userInfo.TEAMModelId
			},
			curScope() {
				return this.isSchool ? "school" : "private"
			},
			
			getSuffix() {
				return name => {
					return name.substr(name.lastIndexOf(".") + 1)
				}
			},
			needDeleteFile(){
				return item => {
					return item.type !== 'item' && item.type !== 'paper' && item.type !== 'link'
				}
			}
		},
	}
</script>

<style lang="less" src="./Syllabus.less" scoped></style>
<style lang="less">
	.syllabus-header {
		.ivu-select-selection {
			width: 140px;
			background-color: #252525e3 !important;
			border-radius: 0;
			border-color: #96969640 !important;
			color: #D0D0D0;
		}

		.ivu-select-dropdown {
			background-color: #3c3c3c;

			.ivu-select-item {
				color: #e6e6e6;

				&:hover {
					background-color: #565656;
				}
			}

			.ivu-select-item-focus {
				background-color: #3c3c3c;
			}
		}
	}
	
	.syllabus-content-header{
		.ivu-input{
			background-color: #262626;
			border-color: #333;
			font-size: 12px;
			color: #ddd;
		}
	}
	
	.tree-upload-modal {
		.ivu-modal-body {
			padding: 10px 40px;
		}

		.ivu-upload-drag {
			background: none;
			border-color: #8d8d8d;
		}

		.ivu-btn {
			height: 45px;
			margin: 20px auto;
		}
	}

	.tree-paper-modal {

		.ivu-modal-content {
			background-color: #fff;
		}

		.ivu-modal-body {
			overflow: auto;
			font-size: 14px !important;
			margin: 40px 10px;
		}

		.cp-exercise-item {
			border: 1px solid #dfdfdf !important;
		}

		.paper-box {
			display: flex;
			flex-direction: column;
			align-items: center;

			.paper-title {
				color: #333;
				font-size: 20px;
				font-weight: bold;
			}

			.paper-info {
				margin-top: 20px;
				color: #939393;
			}
		}
	}

	/* 修改iview Modal样式 */
	.add-volume-modal {
		font-family: 'NotoSerif', '微软正黑体', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
	}

	.add-volume-modal .ivu-modal-content {
		background: #3c3c3c;
		color: #fff;
	}

	.add-volume-modal .ivu-modal-header {
		border-bottom: none;
		font-size: 16px;
		padding: 25px;

		.modal-header {
			display: inline-block;
		}

		&::before {
			content: '';
			display: inline-block;
			border: 4px solid #1ee6aa;
			border-radius: 50%;
			margin-right: 10px;
			margin-bottom: 2px;
		}
	}

	.add-volume-modal .modal-content {
		padding: 10px 30px;
	}

	.form-container .ivu-form .ivu-form-item-label {
		color: #fff;
		margin: 10px 0;
	}

	.form-container .ivu-input {
		background: #575757;
		border-color: transparent;
		height: 35px;
		color: #fff;
	}

	.form-container .ivu-input::-webkit-input-placeholder {
		color: #808080;
	}

	.form-container .ivu-select-single .ivu-select-selection {
		background: #575757;
		color: #fbfbfb;
		border-color: transparent;
		height: 35px;
	}

	.form-container .ivu-select-single .ivu-select-arrow {
		color: #fbfbfb;
	}

	.form-container .ivu-btn {
		width: 100%;
		height: 40px;
		margin-top: 20px;
		background: rgb(11, 151, 117);
		border: none;
		color: #fff;
	}
	
	.choose-content-modal{
		.ev-list-container , .pl-container{
			  height: 600px !important;
			  overflow: auto;
			  padding-right: 10px;
		}
		.modal-btn{
			width: 100%;
			margin: 20px 10px;
		}
	}
</style>
