<style lang="less" scoped>
	@import './Index.less';
</style>

<template>
	<div class="new-syllabus-container">
		<Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-if="isLoading"></Loading>
		<!-- 课纲头部 切换来源以及选择学段 -->
		<div class="new-syllabus-header common-save-btn">
			<div class="new-syllabus-select">
				<span>{{$t("knowledge.period")}}：</span>
				<Select ref="periodSelect" v-model="currentPeriodIndex" style="width:100px;" @on-change="onPeriodChange">
					<Option v-for="(item,index) in periodList" :value="index" :key="index">{{ item.name }}</Option>
				</Select>
			</div>
			<Button v-if="$access.ability('admin','schoolSetting-upd').validateAll" :disabled="!updated"  class="school-tools ivu-btn ivu-btn-default" icon="ios-albums-outline" @click="saveData()">{{$t('schoolBaseInfo.saveInfo')}}</Button>
		</div>
		<!-- 主体内容 -->
		<div class="new-syllabus-content">
			<!-- 选择学科 -->
			<div class="ns-col ns-col">
				<Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadSubject"></Loading>
				<div class="ns-header">
					<!-- 切换头部以及搜索框 -->
					<div class="ns-header-content" v-if="!isSearchSubject">
						<span>
							<Icon type="md-bookmark" color="#fff" size="20" />
							<span style="margin-left:5px">{{$t("knowledge.subject")}}</span>
						</span>
						<Icon type="ios-search" color="#fff" size="18" v-show="subjectList.length" style="cursor:pointer" @click="isSearchSubject = true" />
					</div>
					<div class="ns-header-search" v-else>
						<Input icon="ios-close" v-model="searchSubject" :placeholder="$t('knowledge.searchSubject')" autofocus style="width: 100%" @on-click="onSearchSubjectClose"
						 @on-change="onSearchSubjectChange" @on-enter="onSearchSubjectChange" />
					</div>
				</div>
				<vuescroll>
					<div v-if="subjectList.length === 0">
						<EmptyData :top="100"></EmptyData>
					</div>
					<div class="gl" v-else>
						<div :class='["gl-item",index == activeSubjectIndex ? "item-active":""]' v-for="(item,index) in subjectList" :key="index"
						 @click="hasModify ? handleConfirmSave({index},'2') : handleSubjectTap(index)">
							<p class="gl-item-name">{{item.name}}</p>
							<p class="gl-item-info"><span></span>{{$t("knowledge.blockCount")}}：{{ tabIndex === 0  ? schoolBlockCount[index] : privateBlockCount[index]}}</p>
						</div>
					</div>
				</vuescroll>
			</div>

			<!-- 展示知识点部分 -->
			<div class="ns-col ns-col3" ref="colRef3">
				<Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadPoints"></Loading>
				<div class="ns-header">
					<!-- 切换头部以及搜索框 -->
					<div class="ns-header-content" v-if="!isSearchPoint">
						<span>
							<Icon type="md-cube" color="#fff" size="20" />
							<span style="margin-left:5px">{{$t("knowledge.point")}} ( {{ originPointList.length }} )</span>
							<Input icon="ios-close" v-model="searchPoint" v-show="originPointList.length" :placeholder="$t('knowledge.searchPoint')" autofocus style="width: 300px;margin-left: 20px;"
							 @on-click="onSearchClear" @on-blur="isSearchPoint = false" @on-change="onSearchPointChange" @on-enter="onSearchPointChange"
							 @on-clear="onSearchClear" />
						</span>
						<div>
							<Icon type="md-add" v-if="($access.can('admin.*|Point_Add')) && subjectList.length" color="#fff" size="18" style="cursor:pointer;margin-right:10px"
							 @click="onAddPoint" />
							<Button class="btn-compose-block" v-if="($access.can('admin.*|Point_Add')) && checkedPointList.length" @click="onComposeBlock">{{$t("knowledge.makeBlock")}}</Button>
						</div>
					</div>
					<div class="ns-header-search" v-else>
					</div>
					<div>
						<div v-if="pointList.length === 0">
							<EmptyData :top="100"></EmptyData>
						</div>
						<div v-else>
							<draggable class="points-wrap" tag="div" v-model="pointList" v-bind="dragOptions">
								<transition-group type="transition" :name="!drag ? 'flip-list' : null" class="points-wrap">
									<div v-for="(item,index) in pointList" :key="index" :class="['point-item', isBlockPoint(item) ? 'block-point-item' : '' , isChecked(item) ? 'point-item-active' : '']"
									 @click="onPointCheck(item,index)" draggable="true" @dragstart="onDragStart(item)" @dragend="isDragging = false">
										<span>{{item}}</span>
										<span class="point-item-tools">
											<span class="btn-edit" v-if="$access.can('admin.*|Point_Edit') || tabIndex === 1" :title="$t('knowledge.edit')" @click.stop="onEditPoint(item,index)">
												<Icon type="md-create" size="18" color="#d2d2d2" /></span>
											<span class="btn-delete" v-if="$access.can('admin.*|Point_Delete') || tabIndex === 1" :title="$t('knowledge.delete')" @click.stop="onDeletePoint(item,index)">
												<Icon type="md-trash" size="20" color="#d2d2d2" /></span>
											<span class="btn-delete" v-if="$access.can('admin.*|Point_Remove') && isBlockPoint(item)" :title="$t('knowledge.moveBlock')"
											 @click.stop="onRemovePoint(item)">
												<Icon type="md-remove-circle" size="20" color="#d2d2d2" /></span>
										</span>
									</div>
								</transition-group>
							</draggable>
						</div>
					</div>
				</div>
			</div>
			<!-- 选择知识块 -->
			<div class="ns-col ns-col2" ref="colRef2">
				<Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadBlocks"></Loading>
				<div class="ns-header">
					<!-- 切换头部以及 搜索框 -->
					<div class="ns-header-content" v-if="!isSearchBlock">
						<span>
							<Icon type="ios-photos" color="#fff" size="20" />
							<span style="margin-left:5px">{{$t("knowledge.block")}}</span>
						</span>
						<div>
							<Icon type="md-add" v-if="($access.can('admin.*|Block_Add') || tabIndex === 1)  && subjectList.length" color="#fff" size="18" style="cursor:pointer;margin-right:10px"
							 @click="onAddBlock" />
							<Icon type="ios-search" color="#fff" size="18" style="cursor:pointer" v-show="subjectList.length && blockList.length" @click="isSearchBlock = true" />
						</div>
					</div>
					<div class="ns-header-search" v-else>
						<!-- 搜索知识块部分 -->
						<Input icon="ios-close" v-model="searchBlock" :placeholder="$t('knowledge.searchBlock')" autofocus style="width: 100%" @on-click="onSearchBlockClose"
						 @on-change="onSearchBlockChange" @on-enter="onSearchBlockChange" />
					</div>
				</div>
				<vuescroll>
					<!-- 知识块列表 -->
					<div class="vl gl">
						<div v-if="blockList.length === 0">
							<div class="gl-item gl-new-area" v-show="isDragging" @drop="onDragNewEnd" @dragover.prevent>
								<Icon type="md-add" size="18" />
								<span style="margin-left: 10px;">{{$t("knowledge.buildBlock")}}</span>
							</div>
							<EmptyData :top="50"></EmptyData>
						</div>
						<div v-else>
							<div class="gl-item gl-new-area" v-show="isDragging" @drop="onDragNewEnd" @dragover.prevent>
								<Icon type="md-add" size="18" />
								<span style="margin-left: 10px;">{{$t("knowledge.buildBlock")}}</span>
							</div>
							<div :class='["gl-item","drag-block-item",index == activeBlockIndex ? "item-active":""]' v-for="(item,index) in blockList"
							 :key="index" @click="handleBlockTap(index,item)" @drop="onDragEnd(item,index,$event)" @dragover.prevent
							 @dragend="onDragEnd(item,index)" @dragenter="onDragEnter" @dragleave="onDragLeave">
								<p class="gl-item-name" :title="item.name">{{item.name}}</p>
								<p class="gl-item-info"><span></span>{{$t("knowledge.pointCount")}}：{{item.points ? item.points.length : 0}}</p>
								<span class="btn-edit" v-if="$access.can('admin.*|Block_Edit') || tabIndex === 1" :title="$t('knowledge.edit')" @click.stop="onEditBlock(index)">
									<Icon type="md-create" size="20" color="#d2d2d2" /></span>
								<span class="btn-delete" v-if="$access.can('admin.*|Block_Delete') || tabIndex === 1" :title="$t('knowledge.delete')" @click.stop="onDeleteBlock(item)">
									<Icon type="md-trash" size="22" color="#d2d2d2" /></span>
							</div>
						</div>
					</div>
				</vuescroll>
			</div>


		</div>

		<!-- 新增知识块弹窗 -->
		<Modal v-model="isAddBlock" width="560" footer-hide class="add-volume-modal">
			<div class="modal-header" slot="header">{{ isEditBlock ? $t('knowledge.editBlock') : $t('knowledge.addBlock')}}</div>
			<div class="modal-content">
				<AddBlock :originData="originSchoolData" :periodIndex="currentPeriodIndex" :subjectIndex="currentSubjectIndex"
				 :editBlock="editBlock" :addType="pointOwn" @addFinish="onFinishAddBlock" :orginBlock="originBlockList">
				</AddBlock>
			</div>
		</Modal>

		<!-- 新增知识点弹窗 -->
		<Modal v-model="isAddPoint" width="560" footer-hide class="add-volume-modal">
			<div class="modal-header" slot="header">{{ isEditPoint ? $t('knowledge.editPoint') : $t('knowledge.addPoint')}}</div>
			<div class="modal-content">
				<AddPoint :hideBlock="isShowPoints" :schoolParams="schoolParams" :blockData="parentBlock" :orginPoint="originPointList" :pointData="currentPoint"
				 :addType="pointOwn" @addFinish="onFinishAddPoint">
				</AddPoint>
			</div>
		</Modal>

		<!-- 组成知识块弹窗 -->
		<Modal v-model="isComposeBlock" width="680" footer-hide class="add-volume-modal compose-modal">
			<div class="modal-header" slot="header">{{$t("knowledge.makeBlock")}}</div>
			<ComposeBlock :list="checkedPointList" :params="currentParams" :blockList="originBlockList" @onFinish="onComposeFinish"></ComposeBlock>
		</Modal>
	</div>
</template>

<script>
	import Tree from '@/components/syllabus/DragTree'
	import AddBlock from './operation/AddBlock'
	import AddPoint from './operation/AddPoint'
	import ComposeBlock from './operation/ComposeBlock'
	import draggable from "vuedraggable"
import { json } from 'd3'

	export default {
		data() {
			return {
				schoolInfo: {
					code: ''
				},
				currentParams: {
					subjectId: '',
					school_code: '',
					periodId: '',
				},
				drag: false,
				isDragging: false,
				isLoadSubject: false,
				isLoadBlocks: false,
				isLoadPoints: false,
				isLoading: false,
				schoolParams: null,
				currentPeriodIndex: null,
				currentSubjectIndex: null,
				currentBlock: null,
				currentPoint: null,
				tabIndex: 0,
				originData: {},
				originSchoolData: {},
				periodList: [],
				subjectList: [],
				originSubjectList: [],
				blockList: [],
				originBlockList: [],
				pointList: [],
				originPointList: [],
				activePeriodIndex: 0,
				activeSubjectIndex: 0,
				activeBlockIndex: null,
				blockCounts: [],
				schoolBlockCount: [],
				privateBlockCount: [],
				isSearchSubject: false,
				isSearchBlock: false,
				isSearchPoint: false,
				isAddBlock: false,
				isEditBlock: false,
				isAddPoint: false,
				isEditPoint: false,
				isComposeBlock: false,
				searchBlock: '',
				searchPoint: '',
				searchSubject: '',
				editBlock: {},
				editPointIndex: null,
				hasModify: false,
				preSelectVal: null,
				pageSize: 20,
				currentPage: 1,
				pageSizeOpt: [5, 10, 15, 20],
				pointOwn: 'school',
				isShowPoints: true,
				parentBlock: null,
				checkedPointList: [],
				curBlockPoints: [],
				curDragPoint: null,
				pointIndex: null,
				pointDatas: {},
				updated: false,
				setCount: false
			}
		},
		components: {
			Tree,
			AddBlock,
			AddPoint,
			ComposeBlock,
			draggable
		},
		created() {
			this.initSchoolData()
		},
		methods: {

			/* 知识点拖动开始 */
			onDragStart(item) {
				this.curDragPoint = item
				this.isDragging = true
			},

			/* 知识点移入到知识块 */
			onDragEnter(e) {
				e.target.classList.add('drag-active')
			},

			/* 知识点拖拽离开知识块 */
			onDragLeave(e) {
				e.target.classList.remove('drag-active')
			},

			// 知识点拖拽到知识块后
			onDragEnd(blockItem, blockIndex, e) {
				e.target.classList.remove('drag-active')
				// 判断是单个拖拽还是选择了多个进行拖拽
				let checkPointIds = new Set(this.checkedPointList.map(i => i))
				let blockPointIds = new Set(blockItem.points)
				if (checkPointIds.has(this.curDragPoint) && checkPointIds.size > 1) {
					// 如果是选中的元素 则获取选中的和知识块包含的 差集 即为需要添加的知识点ID
					let addPointIds = new Set([...checkPointIds].filter(x => !blockPointIds.has(x)))
					if (addPointIds.size > 0) {
						this.$Modal.confirm({
                            title: this.$t('knowledge.notice'),
                            content: `${this.$t('knowledge.content0')} ${this.curDragPoint} ${this.$t('knowledge.content2')} ${addPointIds.size} ${this.$t('knowledge.content3')} ${blockItem.name} ${this.$t('knowledge.content1')}`,
                            okText: this.$t('knowledge.confirm'),
                            cancelText: this.$t('knowledge.cancel'),
							onOk: () => {
								blockItem.points.push(...addPointIds)
							}
						})
					} else {
                        this.$Message.warning(this.$t('knowledge.notice1'))
					}
				} else {
					if (blockItem.points.includes(this.curDragPoint)) {
                        this.$Message.warning(this.$t('knowledge.notice2'))
					} else {
						this.$Modal.confirm({
                            title: this.$t('knowledge.notice'),
                            content: `${this.$t('knowledge.content4')} ${this.curDragPoint} ${this.$t('knowledge.content5')} ${blockItem.name}${this.$t('knowledge.content6')}`,
                            okText: this.$t('knowledge.confirm'),
                            cancelText: this.$t('knowledge.cancel'),
							onOk: () => {
								blockItem.points.push(this.curDragPoint)
							}
						})
					}
				}
			},

			/* 拖拽知识点组成新知识块 */
			onDragNewEnd(e) {
				if (!this.checkedPointList.length) {
					let list = this.checkedPointList
					let item = this.curDragPoint
					let isExistIndex = list.indexOf(item)
					if (isExistIndex > -1) {
						this.checkedPointList.splice(isExistIndex, 1)
					} else {
						this.checkedPointList.push(item)
					}
				}
				this.isComposeBlock = true
			},

			// 获取当前学校学段学科等基本信息
			initSchoolData() {
				this.$store.dispatch('user/getSchoolProfile').then(res => {
					let schoolBaseInfo = res.school_base
					if (schoolBaseInfo) {
						this.schoolInfo = schoolBaseInfo
						this.originSchoolData = schoolBaseInfo // 默认选择第一个
						this.originData = schoolBaseInfo // 默认选择第一个
						if (schoolBaseInfo.period.length) {
							this.periodList = schoolBaseInfo.period
							this.currentParams.school_code = schoolBaseInfo.id
							this.currentParams.periodId = schoolBaseInfo.period[0].id
							this.currentPeriodIndex = 0 // 默认选择第一个学段
							this.onPeriodChange(0)
						}
					}
				})
			},

			// 获取当前册别数量(每次都获取最新的数据)
			initBlockCount() {
				
				let params = {}
					for (let data of this.subjectList) {
                        params[this.$store.state.userInfo.schoolCode + "-" + data.id] = this.periodList[this.currentPeriodIndex].id
					}
					this.$api.syllabus.FindBlockCount(params).then(res => {
						if (res.datas.length) {
							this.$nextTick(() => {
								
								this.blockCounts = res.datas
                                this.schoolBlockCount = res.datas.map(i => i.countBlock)
								this.privateBlockCount = res.datas.map(i => i.countBlock)
							})
						}
					})
			},

			// 根据学科获取所有知识块信息
			async getBlocksData() {
				let that = this
                that.setCount = false
                that.pointDatas = []
                let params = JSON.parse(JSON.stringify(this.currentParams))
                params.type = 0
				await this.$api.knowledge.GetSchoolPoints(params).then(res => {
                    if (res.length > 0) {
                        that.pointDatas = res
                        let list = res[0].blocks
                        this.blockList = list
                        this.originBlockList = JSON.parse(JSON.stringify(list))
                        setTimeout(function () {
                            that.isLoadBlocks = false
                        }, 400)
                    } else {
						that.isLoadBlocks = false
                        let params = [{
                            "owner": this.currentParams.school_code,
                            "scope": "school",
                            "periodId": this.currentParams.periodId,
                            "subjectId": this.currentParams.subjectId,
                            "points": [],
                            "blocks": [],
                            "id": this.$tools.guid(),
                            "code": "Knowledge" + '-' + this.currentParams.school_code + '-' + this.currentParams.subjectId,
                            "pk": "Knowledge",
						}]
                        that.pointDatas = params
                        let list = params[0].blocks
                        this.blockList = list
                        this.originBlockList = JSON.parse(JSON.stringify(list))
					}
				}).catch(err => {
                    this.$Message.error(this.$t('knowledge.warn'))
					this.isLoadBlocks = false
				})
                that.setCount = true  //开始监听数据
			},

			// 根据学科获取学科下所有知识点数据
			getPointsData() {
				let that = this
				this.$api.knowledge.GetSchoolPoints(this.currentParams).then(res => {
					if (res.length) {
						this.pointList = res[0].points
						this.originPointList = JSON.parse(JSON.stringify(res[0].points))
						setTimeout(function () {
							that.isLoadPoints = false
						}, 800)
                        this.updated = false
					}
				})
			},

			// 校本知识块与个人切换
			handleTabClick(index) {
				this.checkedPointList = []
				this.tabIndex = index
				switch (index) {
					case 0:
						this.getPointsData()
						this.getBlocksData()
						this.pointOwn = 'school'
						break
					case 1:
						this.getPointsData()
						this.getBlocksData()
						this.pointOwn = 'personal'
						break
					default:
						break
				}
				this.handleSubjectTap(0)
			},

			// 学段切换处理
			onPeriodChange(index) {
				this.$nextTick(() => {
					this.preSelectVal = this.$refs.periodSelect.value
					if (this.hasModify) {
						this.handleConfirmSave({}, '3')
					} else {
						let that = this
						this.isLoadSubject = true
						this.activePeriodIndex = index
						this.currentParams.periodId = this.originData.period[index].id
						this.subjectList = this.periodList[index].subjects // 切换学段后更新 学科 列表
						this.originSubjectList = this.periodList[index].subjects // 筛选学科源数据
						if (this.subjectList.length) {
							this.handleSubjectTap(0)
							this.initBlockCount()
						} else {
							this.pointList = []
							this.originBlockList = []
							this.blockList = []
							this.originPointList = []
						}
						setTimeout(function () {
							that.isLoadSubject = false
						}, 400)
					}
				})
			},

			// 学科点击事件
			handleSubjectTap(index) {
				this.checkedPointList = []
				this.blockList = []
				this.originBlockList = []
				this.pointList = []
                this.curBlockPoints = []
				this.originPointList = []
                this.activeBlockIndex = 0
				this.schoolParams = {
					schoolCode: this.originData.id,
					subjectId: this.subjectList[index].id,
					period: this.currentParams.periodId
				}
				this.currentSubjectIndex = index
				this.currentParams.subjectId = this.subjectList[index].id
				this.activeSubjectIndex = index
				this.isLoadBlocks = true
				this.getPointsData()
				this.getBlocksData()
			},

			// 知识块点击事件
			handleBlockTap(index, item) {
				if (index === this.activeBlockIndex) {
					this.activeBlockIndex = null
					this.curBlockPoints = []
				} else {
					let that = this
					let blockPoints = []
                    that.checkedPointList.length = 0
					this.activeBlockIndex = index
					this.currentBlock = item
					if (item && item.points.length) {
						this.curBlockPoints = item.points
						this.toStartPosition(item.points)
					} else { // 没有则置空
						this.curBlockPoints = []
					}
				}
			},

			// 把当前知识块的知识点排到最前面
			toStartPosition(points) {
				points.forEach(i => {
					let pointIds = this.pointList.map(i => i)
					if (pointIds.includes(i)) {
						let index = pointIds.indexOf(i)
						let item = this.pointList[index]
						this.pointList.splice(index, 1)
						this.pointList.unshift(item)
					}
				})
			},

			// 添加知识块完成
			onFinishAddBlock(val) {
                this.$Message.success(this.$t('knowledge.success'))
				if (this.isEditBlock) {
					let code = this.blockList.findIndex(item => item.name.indexOf(this.editBlock.name) > -1)
					this.blockList[code].name = val.name
				} else {
					this.blockList.push(val)
				} 
				this.originBlockList = [...this.blockList]
				this.editBlock = {}
				this.isAddBlock = false // 关闭窗口
				this.blockCounts = []
			},

			// 添加知识点完成
			onFinishAddPoint(val) {
				if (!val) return
				let that = this
				this.isLoadPoints = true
				if (this.isEditPoint) {
					this.pointList[this.editPointIndex] = val.name
                    this.actionPoint(this.currentPoint, val)
				} else {
					if (!this.isShowPoints) this.currentBlock.points.push(val.id)
					this.pointList.push(val.name)
				}
				this.originPointList = [...this.pointList]
				this.isAddPoint = false // 关闭窗口
				this.isEditPoint = false
				setTimeout(function () {
					that.isLoadPoints = false
				}, 400)
			},
			//查询当前关联的知识块数据
			findPointIndex(datas) {
				let data = 0
				for (let item of this.blockList) {
					if (this.isEditPoint) {
						let code = item.points.findIndex(items => items.indexOf(datas) > -1)
						if (code !== -1) {
							data++
						}
					}
				}
				return data
			},

			//处理关联的知识点数据(修改和删除)
			actionPoint(data, val) {
				if (data) {
					for (let item of this.blockList) {
						if (this.isEditPoint) {
							let code = item.points.findIndex(items => items.indexOf(data) > -1)
							if (code !== -1) {
								item.points[code] = val.name
							}
						} else {
							item.points.splice(item.points.findIndex(item => item === data), 1)
						}
					}

				}
			},
			// 删除知识块事件
			onDeleteBlock(data) {
				this.$Modal.confirm({
                    title: this.$t('knowledge.notice'),
                    content: this.$t('knowledge.delBlock'),
                    okText: this.$t('knowledge.confirm'),
                    cancelText: this.$t('knowledge.cancel'),
					onOk: () => {
						let that = this
						this.isLoading = true
						if (this.blockList.indexOf(data) !== -1) {
							this.blockList.splice(this.blockList.indexOf(data), 1)
							this.originBlockList.splice(this.originBlockList.indexOf(data), 1)
							this.handleBlockTap(0, this.blockList.length ? this.blockList[0] : null)
							setTimeout(() => {
								that.blockCounts = []
								that.isLoading = false
                                that.$Message.success(this.$t('knowledge.delSuccess'))
							}, 1000)
						} else {
                            this.$Message.success(this.$t('knowledge.delFail'))
						}
					}
				})
			},

			// 删除知识点事件
			onDeletePoint(data) {
				this.$Modal.confirm({
                    title: this.$t('knowledge.notice'),
                    content: this.$t('knowledge.delPoint'),
                    okText: this.$t('knowledge.confirm'),
                    cancelText: this.$t('knowledge.cancel'),
					onOk: () => {
						this.isLoadPoints = true
                        this.$Message.success(this.$t('knowledge.delSuccess'))
                        this.pointList.splice(this.pointList.indexOf(data), 1)
                        if (!this.isShowPoints) this.currentBlock.points.splice(this.currentBlock.points.indexOf(data), 1)
						this.actionPoint(data, 0)
						this.originPointList = [...this.pointList]
                        this.isLoadPoints = false
					}
				})
			},

			// 移除知识点事件
			onRemovePoint(data) {
				this.$Modal.confirm({
                    title: this.$t('knowledge.notice'),
                    content: `${this.$t('knowledge.content7')} ${data} ${this.$t('knowledge.content8')} ${this.currentBlock.name} ${this.$t('knowledge.content9')}`,
                    okText: this.$t('knowledge.confirm'),
                    cancelText: this.$t('knowledge.cancel'),
					onOk: () => {
						if (this.currentBlock.points.includes(data)) {
							this.currentBlock.points.splice(this.currentBlock.points.indexOf(data), 1)
							this.originBlockList = [...this.blockList]
						} else {
                            this.$Message.error(this.$t('knowledge.moveFail'))
						}
					}
				})
			},

			// 编辑知识块事件
			onEditBlock(data) {
				this.isAddBlock = true // 打开新增窗口
				this.isEditBlock = true // 设置成编辑状态
				this.editBlock = this.blockList[data]
			},

			// 新增知识块事件
			onAddBlock() {
				this.isAddBlock = true
				this.isEditBlock = false
				this.editBlock = {}
			},

			// 新增知识点事件
			onAddPoint() {
				this.isAddPoint = true
				this.isEditPoint = false
				this.currentPoint = null
				// this.parentBlock = this.isShowPoints ? null : this.currentBlock
				this.parentBlock = null
				this.onSearchClear()
			},

			// 编辑知识点事件
			onEditPoint(data, index) {
				this.isAddPoint = true // 打开新增窗口
				this.isEditPoint = true // 设置成编辑状态
				this.currentPoint = data
				this.editPointIndex = index
				this.parentBlock = this.isShowPoints ? null : this.currentBlock
			},

			// 知识点点击事件
			onPointCheck(item, index) {
				if (this.isShowPoints) {
					let list = this.checkedPointList
					let isExistIndex = list.indexOf(item)
					if (isExistIndex > -1) {
						this.checkedPointList.splice(isExistIndex, 1)
					} else {
						this.checkedPointList.push(item)
					}
				}
			},

			// 点击组成知识块
			onComposeBlock() {
				this.isComposeBlock = true
			},

			// 组成知识块结束
			onComposeFinish(val) {
				if (val) {
					let code = this.blockList.findIndex(item => item.name.indexOf(val.name) > -1)
					if (code == -1) {
						this.blockList.push(val)
					} else {
						this.blockList[code].points = val.points
					}
					this.originBlockList = [...this.blockList]
					this.isComposeBlock = false
					this.checkedPointList = []
					this.activeBlockIndex = null
					this.curBlockPoints = []
                    this.$Message.success(this.$t('knowledge.success'))
				}
			},

			// 搜索知识块输入框onchange事件
			onSearchBlockChange() {
				this.blockList = this.originBlockList.filter(item => item.name.indexOf(this.searchBlock) > -1)
				if (this.blockList.length) this.handleBlockTap(0, this.blockList[0])
			},

			// 搜索知识点输入框onchange事件
			onSearchPointChange() {
				this.pointList = this.originPointList.filter(item => item.indexOf(this.searchPoint) > -1)
			},

			// 清空科目搜索框
			onSearchSubjectClose() {
				this.searchSubject = ''
				this.isSearchSubject = false
				this.subjectList = this.originSubjectList
				this.handleSubjectTap(0)
			},

			onSearchClear() {
				this.searchPoint = ''
				this.isSearchPoint = false
				this.pointList = this.originPointList
			},

			// 清空科目搜索框
			onSearchBlockClose() {
				this.searchBlock = ''
				this.isSearchBlock = false
				this.blockList = this.originBlockList
				if (this.blockList.length) this.handleBlockTap(0, this.blockList[0])
			},

			// 搜索学科输入框onchange事件
			onSearchSubjectChange() {
				this.subjectList = this.originSubjectList.filter(item => item.name.indexOf(this.searchSubject) > -1)
				this.handleSubjectTap(0)
			},

			// 切换页码返回截取数据
			pageChange(page) {
				this.currentPage = page
				let start = this.pageSize * (page - 1)
				let end = this.pageSize * page
				this.pointList = this.originPointList ? this.originPointList.slice(start, end) : []
				// 如果删除的是仅剩的一个元素 则往前翻页
				if (this.pointList.length === 0 && page > 1) {
					this.pageChange(page - 1)
				}
			},
			//保存修改后的数据
             saveData() {
				 if (this.updated) {
					this.setCount = false
                    let params = {}
                    params = this.pointDatas[0]
                    params.points = [...this.originPointList]
					params.blocks = [...this.originBlockList]
                    this.$api.knowledge.SaveOrUpdateKnowledge(params).then(res => {
						if (res) {
                            this.$Message.success(this.$t('knowledge.saveSuccess'))
							this.getPointsData()
							//this.initBlockCount()
                        } else {
                            this.$Message.warning(this.$t('knowledge.saveFail'))
						}
                    }).catch(err => {
                        this.$Message.error(this.$t('knowledge.saveFail'))
                        this.isLoadBlocks = false
                    })
                }
            },
			// 切换每页显示页数
			pageSizeChange(val) {
				this.pageSize = val
				this.currentPage = 1
				this.pageChange(1)
			},

		},
		mounted() {
		},
		watch: {
            originBlockList: {
				handler() {
					if (this.setCount) {
						this.updated = true
                    }
                }
			},
            originPointList: {
				handler() {
					if (this.setCount) {
						this.updated = true
                    }
                }
            },
		},
		beforeRouteLeave(to, from, next) {
            if (this.updated) {
                let config = {
                    title: this.$t('schoolBaseInfo.saveWarning'),
                    content: this.$t('schoolBaseInfo.ssTips8'),
                    okText: this.$t('schoolBaseInfo.leaveText'),
                    onOk: () => {
                        next()
                    },
                    onCancel: () => {
                        next(false)
                    }
                }
                this.$Modal.confirm(config)
            } else {
                next()
            }
        },
		computed: {
			dragOptions() {
				return {
					animation: 200,
					group: "description",
					disabled: false,
					ghostClass: "ghost"
				};
			},
			isChecked() {
				return item => {
					return this.checkedPointList.map(item => item).indexOf(item) > -1
				}
			},
			isBlockPoint() {
				return item => {
					return this.curBlockPoints.indexOf(item) > -1
				}
			}
		},
	}
</script>

<style >
	.new-syllabus-header .ivu-select-single .ivu-select-selection,
	.funnel-box .ivu-select-single .ivu-select-selection {
		background: transparent;
		color: #fbfbfb;
		border: 1px solid #424242;
	}

	.new-syllabus-header .ivu-select-single .ivu-select-arrow,
	.funnel-box .ivu-select-single .ivu-select-arrow {
		color: #fbfbfb;
	}

	.ns-header .ivu-input {
		background: #3c3c3c;
		color: #fff;
		border: none;
		height: 35px;
	}

	.ns-header .ivu-input-icon {
		font-size: 20px;
		color: #cfc7c7;
		line-height: 32px;
		cursor: pointer;
	}

	/* 修改iview Modal样式 */

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

	.add-volume-modal .ivu-modal-header {
		border-bottom: none;
		font-size: 18px;
		font-weight: bold;
		padding: 25px;
	}

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

	/* 修改iview popper样式 */

	.ns-col .ivu-poptip-inner {
		background: #3c3c3c;
	}

	.ns-col .ivu-poptip-title:after {
		background: #656565;
		left: 16px;
		right: 20px;
	}

	.ns-col .ivu-poptip-title-inner {
		color: #fff;
	}

	.ns-col .ivu-poptip-popper[x-placement^=bottom] .ivu-poptip-arrow:after {
		border-bottom-color: #494949;
	}

	.ns-col .points-wrap .ivu-page {
		position: absolute;
		bottom: 40px;
		left: 0;
		width: 100%;
		text-align: center;
	}

	.ns-col .points-wrap .ivu-page .ivu-page-item,
	.ns-col .points-wrap .ivu-page .ivu-page-next,
	.ns-col .points-wrap .ivu-page .ivu-page-prev {
		background: none;
		border: none;
		line-height: 32px;
	}

	.ns-col .points-wrap .ivu-page .ivu-page-item a,
	.ns-col .points-wrap .ivu-page .ivu-page-next a,
	.ns-col .points-wrap .ivu-page .ivu-page-prev a {
		color: #fff;
	}

	.ns-col .points-wrap .ivu-page-item-active {
		border: none;
		background: rgb(11, 151, 117) !important;
	}

	.ns-col .points-wrap .ivu-select-selection,
	.ns-col .points-wrap .ivu-page-options-elevator input {
		border: none;
		background: #605f5f;
	}

	.ns-col .points-wrap .ivu-select,
	.ns-col .points-wrap .ivu-page-options-elevator input {
		color: #fff;
	}
</style>
