<template>
    <el-container class="default-knowledge-body" v-loading="loading">
        <el-main class="knowledge-main">
            <div>
                <el-row :gutter="20" class="knowledge-row" v-if="false">
                    <el-col :span="8" style="float: right;">
                        <div class="grid-content bg-purple">
                            <el-input placeholder="搜索知识点" v-model="knowledgKeyword">
                                <el-button slot="append" @click="_knowledgSerach" icon="el-icon-search" />
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="knowledge-row">
                    <el-col>
                        <label class="input-tags-label">已设置知识点：</label>
                        <div class="input-tags">
                            <el-tag class="knowledgTag" v-for="(knowledg, knowledgIndex) in knowledgValues"
                                :key="knowledgIndex" closable @close="_knowledgRemove(knowledgIndex)">
                                {{ knowledg[knowledg.length - 1] }}
                            </el-tag>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="knowledge-row" style="margin:0px !important;">
                    <el-cascader-panel :value="knowledgValues" ref="knowledgeCascader" @change="_knowledgeChange"
                        @expand-change="_knowledgeExpandChange" :props="knowledgeOptions" :options="knowledgeList"
                        :default-expanded-keys="[]" placeholder="请选择知识点" :filterable="true" />
                </el-row>
            </div>
        </el-main>
        <el-footer class="knowledge-footer">
            <el-button @click="_opration('cancel')">取 消</el-button>
            <el-button type="primary" @click="_opration('confirm')">确 定</el-button>
        </el-footer>
    </el-container>
</template>
<script>
export default {
    props: {
        knowledges: "",
        ///学段
        sectionName: "",
        ///学科
        subjectName: "",
    },
    data() {
        return {
            loading: false,
            ///级联选择框参数
            knowledgeOptions: {
                //多选
                multiple: true,
                //父子节点不关联
                checkStrictly: true
            },
            knowledgMaxLength: 5,
            knowledgeData: [],
            knowledgeList: [],
            knowledgKeyword: "",
            knowledgValues: [],
        }
    },
    methods: {
        _opration(opration) {
            var outKnowledges = this.knowledgValues.map(mo => {
                return '#' + mo.join('#');
            });
            this.$emit('opration', {
                opration: opration,
                knowledges: outKnowledges
            });
        },
        _knowledgeChange(values) {

            if (values.length > this.knowledgMaxLength) {
                this.$message.error(`最多只能选择 ${this.knowledgMaxLength} 项`);
                this.$nextTick(() => {
                    this.$refs.knowledgeCascader.checkedValue = this.knowledgValues;
                    this.$refs.knowledgeCascader.checkedNodePaths = this.$refs.knowledgeCascader.checkedNodePaths.splice(5, 1)
                    this.$refs.knowledgeCascader.syncMultiCheckState();
                    this.$refs.knowledgeCascader.syncActivePath();

                })
                this._clearNotChecked();
                return;
            }
            this._clearNotChecked();
            this.knowledgValues = values;
        },
        _knowledgeExpandChange(values) {
            this._clearNotChecked();
        },
        _knowledgRemove(knowledgIndex) {
            this.knowledgValues.splice(knowledgIndex, 1);
            this.$refs.knowledgeCascader.checkedValue = this.knowledgValues;
            this.$refs.knowledgeCascader.syncMultiCheckState();
        },
        _knowledgSerach() {

        },
        _knowledgFilter(data, query) {
            return data
                .map((item) => {
                    const children = item.children ? this._knowledgFilter(item.children, query) : [];
                    if (children.length || item.value.toLowerCase().indexOf(query) >= 0) {
                        return {
                            ...item,
                            children: children.length ? children : undefined,
                        };
                    }
                    return null;
                })
                .filter((item) => item);
        },
        async _knowledgInit() {

            var { data, info, status } = await this.$request.gKnowledge(this.$props.sectionName, this.$props.subjectName);

            if (status != 0) {

                this.$message.error(info);

                return;
            }

            this.knowledgeData = [...data];

            this.knowledgeList = [...this.knowledgeData]

            if (this.$props.knowledges && this.$props.knowledges.length >= 1) {

                var propsKnowledges = this.$props.knowledges?.split(',').map(item => item?.split('#').filter(fdl => fdl?.length >= 1));

                this.knowledgValues = propsKnowledges;
            }
        },
        _clearNotChecked() {
            this.$nextTick(() => {
                if (!this.$refs.knowledgeCascader.$el) return;
                var checkedPath = this.$refs.knowledgeCascader.$el.querySelectorAll('.in-checked-path');

                for (var ofi = 0; ofi < checkedPath.length; ofi++) {
                    var checkPath = checkedPath[ofi];
                    var checkPathIsChecked = checkPath.querySelectorAll('.is-checked');
                    if (checkPathIsChecked.length < 1) {
                        checkPath.classList.remove('in-checked-path');
                    }
                }

            });
        }
    },
    mounted() {

    },
    async created() {

        this.loading = true;

        await this._knowledgInit();

        this.loading = false;

        this.$nextTick(() => {
            if (!this.$refs.knowledgeCascader.menus) return;
            this.$refs.knowledgeCascader.menus = [this.$refs.knowledgeCascader.menus[0]]
        })

        this._clearNotChecked();
    }
}
</script>
<style lang="scss">
.default-knowledge-body {


    padding: 0px !important;

    .knowledge-footer {
        text-align: right;
        padding: 10px;
    }

    .el-main {
        padding: 0px !important;
    }

    .knowledge-main {
        width: 100%;
        padding: 0px 10px !important;

        .el-cascader-node.in-active-path {
            background: #cddbe8 !important;
        }

        .el-cascader-node.in-active-path:not(.in-checked-path) {
            color: #606266 !important;
        }

        .el-cascader-node.is-selectable.in-active-path {
            background: #ecf5ff;
        }

        .el-cascader-panel {
            width: 100% !important;
        }

        .input-tags-label {
            float: left;
            line-height: 40px;
            margin-right: 12px;
        }

        .input-tags {
            border: 1px solid #DCDFE6;
            min-height: 40px;
            margin-left: 130px;
            border-radius: 5px;
            padding: 5px 5px 0px 5px;
        }

        .knowledge-row {
            .knowledgTag {
                margin-right: 5px;
                margin-bottom: 5px;
            }

            margin-bottom: 10px;

            .el-input-group__append {
                background-color: transparent !important;
                border-left: none !important;
                padding-right: 10px !important;

                .el-icon-search {
                    font-size: 20px;
                }
            }

            .el-input__inner {
                border-right: none !important;
            }
        }
    }
}
</style>