<template>
	<div class="points-container">
		<Button type="info" class="btn-add-point" @click="addPointsModal = true"
			v-show="curScope === 'school'">{{$t('evaluation.points.addPoint')}}</Button>
		<div class="filter-wrap">
			<Select v-model="selectPeriod" @on-change="onPeriodChange" :disabled="curScope === 'school'">
				<Option v-for="(item, index) in periodList" :value="item.id" :key="index">{{ item.name }}</Option>
			</Select>

			<Select v-model="selectSubject" @on-change="onSubjectChange" :disabled="curScope === 'school'">
				<Option v-for="(item, index) in subjectList" :value="item.id" :key="index">{{ item.name }}</Option>
			</Select>
		</div>

		<div style="margin-top: 20px;">
			<Loading hideMask v-show="isLoading"></Loading>
			<Input icon="ios-close" v-model="searchSchoolPoint" :placeholder="$t('evaluation.points.searchPoint')"
				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">{{$t('evaluation.points.noPoint')}}</div>
			<CheckboxGroup v-model="checkedList" @on-change="onCheckChange" v-else>
				<Checkbox v-for="(item,index) in schoolPointList" :label="item" :key="item">{{ item }}</Checkbox>
			</CheckboxGroup>
		</div>

		<div class="points-checked-wrap">
			<p class="points-title">{{$t('evaluation.points.checkedPoint')}}</p>
			<span class="point-item" v-for="(item,index) in checkedList" :key="index">{{ item }}</span>
		</div>

		<Modal v-model="addPointsModal" :title="$t('evaluation.points.addPoint')" ref="pointRef" width="400px"
			class="related-point-modal" style="z-index:99999">
			<span>{{$t('evaluation.points.pointName')}}</span>
			<Input v-model="newPointName" :placeholder="$t('evaluation.points.inputNewPoint')" style="margin:10px 0" />
			<div slot="footer">
				<Button type="text" @click="addPointsModal = false">{{$t('evaluation.cancel')}}</Button>
				<Button type="primary" @click="onAddNewPoint"
					:loading="isAddLoading">{{$t('evaluation.confirm')}}</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
	import '@/utils/Math.uuid'
	export default {
		components: {},
		props: {
			period: {
				type: String,
				default: ''
			},
			subject: {
				type: String,
				default: ''
			},
			scope: {
				type: String,
				default: 'school'
			},
			points: {
				type: Array,
				default: () => []
			},
			max: {
				type: Number,
				default: 5
			}
		},
		data() {
			return {
				isLoading: false,
				addPointsModal: false,
				isAddLoading: false,
				tabName: 'school',
				newPointType: 'school',
				newPointName: '',
				searchPoint: '',
				searchSchoolPoint: '',
				curScope: '',
				selectPeriod: 0,
				selectSubject: 0,
				periodList: [{
					id: '0',
					name: '0'
				}],
				subjectList: [{
					id: '0',
					name: '0'
				}],
				pointList: [],
				schoolPointList: [],
				checkedList: [],
				originPointList: [],
				originSchoolList: [],
				originList: [],
				defaultParams: {
					code: '',
					periodId: null,
					subjectId: null,
					school_code: null,
					type: 1
				},
				curPointResponse: null
			}
		},
		created() {
			console.log('period' + this.period)
			console.log('subject' + this.subject)
			console.log('scope' + this.scope)
			if (this.period && this.subject) {
				this.selectPeriod = this.period
				this.selectSubject = this.subject
			}
			this.initSchoolData()
			this.getPoints()
		},
		methods: {


			// 获取当前学校学段学科等基本信息
			initSchoolData() {
				this.$store.dispatch('user/getSchoolProfile').then(res => {
					let schoolBaseInfo = res.school_base
					if (schoolBaseInfo && schoolBaseInfo.period.length) {
						this.periodList = schoolBaseInfo.period
						if (this.selectPeriod) {
							console.log(this.selectPeriod)
							this.subjectList = this.periodList.filter(i => i.id === this.selectPeriod)[0].subjects
							console.log(this.subjectList.map(i => i.id))
							console.log(this.selectSubject)
						} else {
							this.selectPeriod = schoolBaseInfo.period[0].id
							this.onPeriodChange(this.periodList[0].id)
						}
					}
				})
			},

			// 学段切换处理
			onPeriodChange(val) {
				this.subjectList = this.periodList.filter(i => i.id === val)[0].subjects
				this.selectPeriod = val
				this.selectSubject = this.subjectList[0].id
				this.subjectList.length && this.getPoints()
			},

			onSubjectChange(val) {
				this.getPoints()
			},

			doReset() {
				this.getPoints()
				this.checkedList = []
			},

			/**
			 * 获取知识点仓库数据
			 */
			getPoints() {
				if (this.periodList.length && this.subjectList.length) {
					this.isLoading = true
					// 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.selectPeriod
					this.defaultParams.subjectId = this.selectSubject

					if (this.defaultParams.periodId && this.defaultParams.subjectId) {
						this.$api.knowledge.GetSchoolPoints(this.defaultParams).then(res => {
							if (!res.error && res.length) {
								this.curPointResponse = res[0]
								this.schoolPointList = res[0].points
								this.originSchoolList = res[0].points
								this.originPointList = this.originPointList.concat(res[0].points)
							} else {
								this.$Message.warning(this.$t('evaluation.noData'),)
								this.uuid = Math.uuid()
								this.curPointResponse = {
									blocks: [],
									code: `Knowledge-${this.$store.state.userInfo.schoolCode}-${this.uuid}`,
									id: this.uuid,
									owner: this.$store.state.userInfo.schoolCode,
									periodId: this.defaultParams.periodId,
									pk: 'Knowledge',
									points: [],
									scope: 'school',
									subjectId: this.defaultParams.subjectId
								}
							}
							this.isLoading = false
						})
					}
					this.isLoading = true
				}


			},

			/** 添加新知识点 */
			onAddNewPoint() {
				let newName = this.newPointName
				if (newName) {
					this.curPointResponse.points.push(newName)
					this.savePoint()
				} else {
					this.$Message.warning(this.$t('evaluation.points.noNameTips'))
				}
			},

			/**
			 * 保存知识点
			 * @param pointItem
			 * @param BlockItem
			 */
			savePoint() {
				this.isAddLoading = true
				this.$api.knowledge.SaveOrUpdateKnowledge(this.curPointResponse).then(res => {
					if (!res.error && res) {
						this.$Message.success(this.$t('evaluation.points.addSuc'))
						this.addPointsModal = false
						this.isAddLoading = false
						this.getPoints()
					} else {
						this.$Message.warning(res.error)
					}
				}).catch(err => {
					console.log(err)
					this.$Message.warning(this.$t('evaluation.points.addFail'))
				})
			},

			onCheckChange(val) {
				if (val.length > this.max) {
					this.$Message.warning(
						`${this.$t('evaluation.points.noNameTips') + this.max + this.$t('evaluation.points.noNameTips')}`
						)
					this.checkedList.splice(this.checkedList.length - 1, 1)
				} else {
					this.$emit('onCheckChange', val, this.originPointList)
				}
			},

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

			onSearchSchoolChange() {
				this.schoolPointList = this.originSchoolList.filter(item => item.indexOf(this.searchSchoolPoint) > -1)
			},
		},
		mounted() {
			if (this.points.length) {
				this.checkedList = this.points
			}
			this.curScope = this.scope
		},
		watch: {
			scope: {
				handler(n, o) {
					console.log(n)
				}
			}
		}
	}
</script>

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

	.points-container .filter-wrap {
		padding: 5px 0 10px 5px;
		border-bottom: 1px solid #e0e0e0;
	}

	.points-container .ivu-select-single {
		width: 120px;
		display: inline-block;
		margin-right: 20px;
	}

	.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>
