<template>
	<div class="points-container">
		<Button type="info" size="small" class="btn-add-point" @click="addPointsModal = true">新增知识点</Button>
		<Tabs name="pointTab" @on-click="getPoints" :value="tabName">
			<TabPane label="校本知识点" tab="pointTab" name="school">
				<Input icon="ios-close" v-model="searchSchoolPoint" placeholder="搜索知识点..." autofocus style="width: 98%;margin-left:1%;margin-bottom:10px"
				 @on-change="onSearchSchoolChange" @on-enter="onSearchSchoolChange" />
				<div v-if="schoolPointList.length === 0" style="margin:5px">当前科目下暂无知识点</div>
				<CheckboxGroup v-model="checkedList" @on-change="onCheckChange" v-else>
					<Checkbox v-for="(item,index) in schoolPointList" :label="item.name" :key="item.id">{{ item.name }}</Checkbox>
				</CheckboxGroup>
			</TabPane>
		</Tabs>



		<div class="points-checked-wrap">
			<p class="points-title">已选知识点</p>
			<span class="point-item" v-for="(item,index) in checkedList" :key="index">{{ item }}</span>
		</div>

		<Modal v-model="addPointsModal" :title="'新增知识点'" ref="pointRef" width="400px" class="related-point-modal" style="z-index:99999">
			<span>知识点类型</span>
			<Select v-model="newPointType" style="margin:10px 0">
				<Option value="school">校本知识点</Option>
			</Select>
			<span>知识点名称</span>
			<Input v-model="newPointName" placeholder="输入新知识点名称" style="margin:10px 0" />
			<div slot="footer">
				<Button type="text" @click="addPointsModal = false">取消</Button>
				<Button type="primary" @click="onAddNewPoint" :loading="isAddLoading">确定</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
	import '@/utils/Math.uuid'
	export default {
		components: {},
		props: {
			period: {
				type: String,
				default: ''
			},
			subject: {
				type: String,
				default: ''
			},
			points:{
				type:Array,
				default: () => []
			},
			max: {
				type: Number,
				default: 5
			}
		},
		data() {
			return {
				addPointsModal: false,
				isAddLoading: false,
				tabName: 'school',
				newPointType: 'school',
				newPointName: '',
				searchPoint: '',
				searchSchoolPoint: '',
				pointList: [],
				schoolPointList: [],
				checkedList: [],
				originPointList: [],
				originSchoolList: [],
				originList: [],
				defaultParams: {
					code: '',
					periodId: null,
					subjectId: null,
					school_code:null,
					type: 1
				}
			}
		},
		created() {
			this.getPoints('school')
		},
		methods: {


			onConfirm() {

			},

			doReset() {
				this.getPoints('school')
				this.checkedList = []

			},

			/**
			 * 获取知识点仓库数据
			 */
			getPoints(type) {
				if(!type) return
				if (this.pointList.length && this.schoolPointList.length) return
				this.defaultParams.code =  this.$store.state.userInfo.schoolCode
				this.defaultParams.school_code =  this.$store.state.userInfo.schoolCode
				this.defaultParams.periodId = this.period
				this.defaultParams.subjectId = this.subject
				if (this.period && this.subject){
					this.$api.knowledge.GetSchoolPoints(this.defaultParams).then(res => {
						if (!res.error && res.knowledges) {
								this.schoolPointList = res.knowledges
								this.originSchoolList = res.knowledges
							    this.originPointList = this.originPointList.concat(res.knowledges)
						} else {
							this.$Message.warning('获取数据失败')
						}
					})
				}
				
			},

			/** 添加新知识点 */
			onAddNewPoint() {
				let newName = this.newPointName
				this.uuid = Math.uuid()
				if (newName) {
					let params = {
						type: 1,
						name: newName,
						alias: newName,
						subjectId: this.subject,
						code: this.$store.state.userInfo.schoolCode,
						order: 706,
						status: 1,
						knowledgeId: this.uuid,
						periodId: this.period,
						source: 1,
						points: [],
						id: null
					}

					this.savePoint(params)
				} else {
					this.$Message.warning('请输入新知识点名称!')
				}
			},

			/**
			 * 保存知识点
			 * @param pointItem
			 * @param BlockItem
			 */
			savePoint(pointItem) {
				this.isAddLoading = true
				this.$api.knowledge.SaveOrUpdateKnowledge([pointItem]).then(res => {
					if (!res.error && res) {
						this.$Message.success('添加成功')
						this.addPointsModal = false
						this.isAddLoading = false
						this.getPoints(this.newPointType)
						this.tabName = this.newPointType
					} else {
						this.$Message.warning('操作失败,错误代码：' + res.error.code + ',错误信息:' + res.error.message)
					}
				}).catch(err => {
					console.log(err)
					this.$Message.warning('操作失败')
				})
			},

			onCheckChange(val) {
				if (val.length > this.max) {
					this.$Message.warning(`最多绑定${this.max}个知识点`)
					this.checkedList.splice(this.checkedList.length - 1, 1)
				} else {
					this.$emit('onCheckChange', val, this.originPointList)
				}
			},

			onDeletePoint(index) {
				this.checkedList.splice(index, 1)
			},

			// 搜索学科输入框onchange事件
			onSearchChange() {
				this.pointList = this.originList.filter(item => item.name.indexOf(this.searchPoint) > -1)
			},

			onSearchSchoolChange() {
				this.schoolPointList = this.originSchoolList.filter(item => item.name.indexOf(this.searchSchoolPoint) > -1)
			},
		},

		mounted() {
			if(this.points.length){
				this.checkedList = this.points
			}
		},

		watch: {
			period: {
				handler(newValue, oldValue) {
					this.getPoints(this.tabName)
				}
			},
			subject: {
				handler(newValue, oldValue) {
					this.getPoints(this.tabName)
				}
			}
		}

	}
</script>

<style scoped>
	.points-container {
		position: relative;
	}


	.points-container .ivu-checkbox-group-item {
		display: block;
		margin: 10px;
	}

	.points-container .ivu-checkbox-group {
		max-height: 300px;
		overflow: auto;
	}

	.points-container .point-item {
		display: inline-block;
		margin: 6px;
		padding: 1px 10px;
		background: #0094ff;
		color: #fff;
		border-radius: 5px;
	}

	.points-container .points-checked-wrap {
		padding: 30px 0;
	}

	.points-container .points-title {
		margin: 10px 0;
	}

	.points-container .points-title:before {
		content: "";
		width: 5px;
		height: 15px;
		margin-right: 10px;
		margin-top: 5px;
		vertical-align: text-bottom;
		background: #0094ff;
		display: inline-block;
	}

	.points-container .btn-add-point {
		position: absolute;
		right: 10px;
		top: 5px;
		cursor: pointer;
		z-index: 999;
	}
</style>
