<style lang="less" scoped>
    @import './BaseKnowledge.less';
</style>
<template>
    <div class="knowledge-container">
        <vuescroll>
            <div class="select-wrap">
                <p class="wrap-title">
                    <span>选择知识点</span>
                </p>
                <div class="select-content">
                    <div class="knowledge-left">
                        <div :class='["knowledge-left-item",activeIndex === 0 ? "item-active" : ""]' @click="onChangeOrigin(0)">校本知识点</div>
                        <div :class='["knowledge-left-item",activeIndex === 1 ? "item-active" : ""]' @click="onChangeOrigin(1)">个人知识点</div>
                    </div>
                    <div class="knowledge-right">
                        <vuescroll>
                            <el-tree :data="treeData"
                                     :props="defaultProps"
                                     node-key="id"
                                     ref="elTree"
                                     show-checkbox
                                     check-on-click-node
                                     default-expand-all
                                     @check="handleCheckChange">
                                <span class="custom-tree-node" slot-scope="{ node, data }">
                                    <span>{{data.name}}</span>
                                </span>
                            </el-tree>
                        </vuescroll>
                    </div>
                </div>
            </div>
            <div class="show-wrap">
                <div class="wrap-title">
                    <span>已选知识点<span v-if="currentNodeInfo">  ( {{ checkedPoints.length }} )</span></span>
                    <div class="wrap-btns">
                        <Button @click="onClearChecked" v-show="checkedPoints.length">清空</Button>
                        <Button @click="onSaveNode" :loading="isLoading">存储变更</Button>
                    </div>
                </div>
                <div v-if="checkedPoints.length === 0">
                    <EmptyData :top="10"></EmptyData>
                </div>
                <div class="point-box" v-else>
                    <span class="checked-point-item" v-for="(item,index) in checkedPoints" :key="index">
                        <span>{{item.name}}</span>
                        <Icon type="ios-close" size="20" style="vertical-align:bottom;margin-left:5px" @click="onSplicePoint(item)"/>
                    </span>
                </div>
            </div>
        </vuescroll>

    </div>
</template>

<script>
    export default {
        props: ['volume', 'currentNode'],
        data() {
            return {
                currentVolume: null,
                currentNodeInfo: null,
                currentParams: null,
                activeIndex: 0,
                checkedPoints: [],
                originPoints: [],
                treeData: [],
                defaultProps: {
                    children: 'points',
                    label: 'name'
                },
                hasModify: false,
                isLoading: false

            }
        },

        created() {
            // 拿到当前册别信息 作为获取知识点数据参数
            this.currentVolume = this.volume
            this.currentParams = {
                subjectCode: this.currentVolume.subjectCode,
                code: this.currentVolume.schoolCode,
                period: this.currentVolume.periodCode,
                type: 1
            }
            this.getSchoolPoints()
        },
        methods: {
            // 切换知识点数据来源
            onChangeOrigin(index) {
                this.activeIndex = index
                switch (index) {
                    case 0:
                        this.getSchoolPoints()
                        break
                    case 1:
                        this.getPrivatePoints()
                        break
                    default:
                        break
                }

                // 切换数据源时 检测当前已选项 是否要设置选中状态
                this.$refs.elTree.setCheckedKeys(this.checkedPoints.map(item => item.id), true)
            },

            // 获取校本知识点仓库
            getSchoolPoints() {
                this.currentParams.code = this.currentVolume.schoolCode
                this.$api.knowledge.GetSchoolPoints(this.currentParams).then(res => {
                    if (!res.error && res.result.data) {
                        let list = res.result.data
                        this.treeData = list
                    } else {
                        this.$Message.warning('获取数据失败')
                    }
                })
            },

            // 获取个人知识点仓库
            getPrivatePoints() {
                this.currentParams.code = this.$store.state.userInfo.TEAMModelId
                this.$api.knowledge.GetSchoolPoints(this.currentParams).then(res => {
                    if (!res.error && res.result.data) {
                        let list = res.result.data
                        this.treeData = list
                    } else {
                        this.$Message.warning('获取数据失败')
                    }
                })
            },

            // 节点复选框被点击时事件
            handleCheckChange(data, list) {
                console.log(list)
                const isExistIndex = this.checkedPoints.map(item => item.id).indexOf(data.id)
                if (isExistIndex > -1) {
                    this.checkedPoints.splice(isExistIndex, 1)
                } else {
                    if (this.checkedPoints.length < 5) {
                        this.checkedPoints.push(data)
                    } else {
                        this.$refs.elTree.setCheckedNodes(list.checkedNodes.splice(0, 5))
                        
                        this.$Message.warning('最多关联5个知识点！')
                    }
                    
                }
            },

            /** 保存知识点关联 */
            onSaveNode() {
                this.isLoading = true
                this.currentNodeInfo.knowledges = this.checkedPoints.length ? this.checkedPoints.map(item => item.id) : []
                this.$api.syllabus.SaveOrUpdateAsNodes([this.currentNodeInfo]).then(res => {
                    if (!res.error && res.result.data) {
                        this.$emit('addPointsFinish', res.result.data)
                        this.isLoading = false
                    } else {
                        this.$Message.warning('获取数据失败')
                    }
                })
            },

            /**
             * 删除已选项
             * @param item 已选项数据
             */
            onSplicePoint(item) {
                this.checkedPoints.splice(this.checkedPoints.indexOf(item), 1)
                this.onChangeOrigin(this.activeIndex)
            },

            /** 清空已选项 */
            onClearChecked() {
                this.checkedPoints = []
                this.onChangeOrigin(this.activeIndex)
            },

            // 判断两个数组是否相等
            isEqual(arr1, arr2) {
                return (JSON.stringify(arr1) === JSON.stringify(arr2))
            },
        },
        mounted() {
        },
        watch: {
            // 监听册别数据变化
            volume: {
                handler: function(n, o) {
                    this.currentVolume = n
                    this.currentParams = {
                        subjectCode: n.subjectCode,
                        partitionKey: n.schoolCode,
                        period: n.periodCode,
                        type: 1
                    }
                    this.getSchoolPoints()
                },
                deep: true
            },
            // 监听册别数据变化
            currentNode: {
                handler: function (n, o) {
                    this.currentNodeInfo = n
                    //this.checkedPoints = n.knowledges ? n.knowledges : []
                    this.onChangeOrigin(0)
                    if (n.knowledges && n.knowledges.length) {
                        // this.getPointObject(n.knowledges) // 用ID换知识点对象数据
                        // 切换数据源时 检测当前已选项 是否要设置选中状态
                    } else {
                        this.checkedPoints = [] 
                    } 
                    this.hasModify = false
                },
                deep: true
            }

        }

    }
</script>

<style>
    .knowledge-container .__view {
        min-height: unset !important;
    }

    .knowledge-container .__bar-is-vertical {
        background: transparent !important;
    }

    .knowledge-container .knowledge-right .__bar-is-vertical {
        background: #777676 !important;
    }

    .knowledge-container .ivu-checkbox-checked .ivu-checkbox-inner,
    .knowledge-container .ivu-checkbox-indeterminate .ivu-checkbox-inner {
        border-color: #0f9272;
        background: #0f9272;
    }

    .knowledge-container .ivu-tree-title-selected,
    .knowledge-container .ivu-tree-title-selected:hover,
    .knowledge-container .ivu-tree-title:hover {
        background: transparent;
    }

    .knowledge-container .el-tree {
        background: transparent;
        color: #fff;
        padding-top: 10px;
        padding-bottom: 100px;
    }

    .knowledge-container .el-tree-node__content {
        height: 40px;
    }

        .knowledge-container .el-tree-node__content:hover {
            height: 40px;
            background: #464646;
        }

    .knowledge-container .el-tree-node:focus > .el-tree-node__content {
        background: #464646;
    }

    .knowledge-container .el-tree__empty-block {
        display: none;
    }

    .knowledge-container .el-tree-node__content:hover,
    .knowledge-container .el-tree-node:focus > .el-tree-node__content {
        background: #565656;
    }

    .knowledge-container .el-checkbox__input.is-checked .el-checkbox__inner,
    .knowledge-container .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        border-color: #0f9272;
        background: #0f9272;
    }
</style>
