<template>
    <div>
        <a-modal :visible="visible" @ok="handOK" :confirmLoading="confirmLoading" @cancel="handCancle" width="700px"
            :maskClosable="false" :destroyOnClose="true" :width="900">
            <div slot="title">
                {{modelType==0?'章节':'知识点'}}选择
            </div>
            <div class="modal-box flex-center">
                <div class="list-box">
                    <div class="list-title">{{modelType==0?'章节':'知识点'}}列表</div>
                    <div class="list-content">
                        <a-spin :spinning="spinning">
                            <div class="edition-box p-8" v-if="modelType==0">
                                <div class="edition-top flex-align" @click="editionVisible=!editionVisible">
                                    <span class="edition-title">{{editionActive.name||'无教材版本'}}</span>
                                    <a-icon type="caret-right" />
                                </div>
                                <div class="edition-list" v-show="editionVisible">
                                    <span :class="['edition-item',{'edition-item-active':editionActive.id==item.id}]"
                                        v-for="item in editionArr" :key="item.id" @click="editionChange(item)">
                                        {{item.name}}
                                    </span>
                                </div>
                            </div>
                            <a-tree v-if="treeData.length>0" :default-checked-keys="selectedKeys" checkable
                                @check="leftCheck" :checkStrictly="true" :treeData="treeData" :load-data="onLoadData"
                                :replace-fields="replaceFields">
                            </a-tree>
                            <a-empty v-else />
                        </a-spin>
                    </div>
                </div>
                <div class="btn-box flex-column">
                    <div class="btn-item" @click="toRight">
                        <a-icon type="right" />
                    </div>
                </div>
                <div class="list-box">
                    <div class="list-title">已选{{modelType==0?'章节':'知识点'}}</div>
                    <div class="list-content">
                        <a-tree v-if="rightCheckedKeys.length>0" :treeData="rightCheckedKeys"
                            :replace-fields="replaceFields">
                        </a-tree>
                        <a-empty v-else />
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
    import { TextbookGetList, ChapterGetList, KnowledgePointGetList } from '@/api/api'
    export default {
        components: {
        },
        data() {
            return {
                spinning: false,
                confirmLoading: false,
                visible: false,
                editionVisible: false,
                replaceFields: {
                    key: 'id',
                    title: 'name',
                },
                form: this.$form.createForm(this),
                selectedKeys: [],
                leftCheckedKeys: [],
                rightCheckedKeys: [],
                subject: {},
                editionArr: [],
                editionActive: {},
                treeData: []
            };
        },
        watch: {
            editionActive(nVal) {
                console.log(nVal, 'nVal')
                this._ChapterGetList();
            }
        },
        computed: {
            modelType() {
                return this.$parent.examBox.paperCompositionModel
            }
        },
        mounted() {

        },
        methods: {
            //左边树选择
            leftCheck(checkedKeys, e) {
                console.log(checkedKeys)
                console.log(e)
                let checkedNodes = e.checkedNodes;
                let arr = [];
                checkedNodes.forEach(item => {
                    arr.push(item.data.props.dataRef)
                })
                console.log(arr, 'arr')
                this.leftCheckedKeys = arr;
            },
            toRight() {
                console.log(this.leftCheckedKeys, 'leftCheckedKeys')
                this.leftCheckedKeys.forEach(item => {
                    let index = this.rightCheckedKeys.findIndex(v => v.id == item.id)
                    if (index == -1) {
                        this.rightCheckedKeys.push(item)
                    }
                })
            },
            //版本点击
            editionChange(item) {
                this.editionActive = item;
                this.editionVisible = false;
            },
            showModal(subject) {
                console.log(subject, 'subject')
                this.subject = subject;
                this.rightCheckedKeys = JSON.parse(JSON.stringify(subject.groupArr));
                this.rightCheckedKeys.forEach(item => {
                    this.selectedKeys.push(item.id)
                })
                let type = this.$parent.examBox.paperCompositionModel;
                if (type == 0) {
                    this._TextbookGetList();
                } else {
                    this._KnowledgePointGetList();
                }

                this.visible = true;
            },
            //表单确认
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log(this.rightCheckedKeys, 'rightCheckedKeys')
                        this.rightCheckedKeys.forEach(item => {
                            let arr = this.subject.groupArr
                            if (arr.findIndex(v => v.id == item.id) == -1) {
                                arr.push({
                                    id: item.id,
                                    name: item.title,
                                    count: 0,
                                    score: 0,
                                    QuestionType: []
                                })
                            }
                        })
                        this.handCancle();
                        console.log(this.subject, 'this.subject')
                    }
                })
            },
            handCancle() {
                this.selectedKeys = [];
                this.leftCheckedKeys = [];
                this.rightCheckedKeys = [];
                this.subject = {};
                this.editionArr = [];
                this.editionActive = {};
                this.treeData = [];
                this.spinning = false;
                this.visible = false;
            },
            //知识点列表
            _KnowledgePointGetList() {
                this.spinning = true;
                let data = {
                    ParentId: '',
                    DisciplineId: this.subject.id,
                    KeyWord: '',
                    SkipCount: 0,
                    MaxResultCount: 99999,
                }
                KnowledgePointGetList(data).then(res => {
                    console.log(res, '知识点树')
                    this.treeData = res.items.map(item => {
                        if (!item.hasChild) {
                            item.isLeaf = true
                        }
                        let obj = {
                            key: item.id,
                            title: item.name,
                            scopedSlots: { title: "custom" },
                            ...item
                        }
                        return obj;
                    });
                    this.spinning = false;
                    console.log(this.treeData, 'this.treeData ')
                }).catch(err => {
                    this.spinning = false;
                })
            },
            //获取学科下的教材版本
            _TextbookGetList() {
                this.spinning = true;
                let data = {
                    DisciplineId: this.subject.id,//学科id
                    IsActive: true,
                    SkipCount: 0,
                    MaxResultCount: 99999
                }
                TextbookGetList(data).then(res => {
                    console.log(res, '学科下的教材版本')
                    this.editionArr = res.items;
                    if (res.items.length > 0) {
                        this.editionActive = res.items[0];
                    }
                    this.spinning = false;
                }).catch(err => {
                    this.spinning = false;
                })
            },
            //章节列表
            _ChapterGetList() {
                this.spinning = true;
                let data = {
                    ParentId: '',
                    TextbookId: this.editionActive.id,
                    KeyWord: '',
                    SkipCount: 0,
                    MaxResultCount: 99999,
                }
                ChapterGetList(data).then(res => {
                    console.log(res, '章节树')
                    this.treeData = res.items.map(item => {
                        if (!item.hasChild) {
                            item.isLeaf = true
                        }
                        let obj = {
                            key: item.id,
                            title: item.name,
                            scopedSlots: { title: "custom" },
                            ...item
                        }
                        return obj;
                    });
                    this.spinning = false;
                    console.log(this.treeData, 'this.treeData ')
                }).catch(err => {
                    this.spinning = false;
                })
            },
            onLoadData(treeNode) {
                console.log(treeNode, 'treeNode')
                return new Promise(resolve => {
                    if (treeNode.dataRef.children) {
                        resolve();
                        return;
                    }
                    this.spinning = true;
                    let data = {}
                    if (this.modelType == 0) {
                        data = {
                            ParentId: treeNode.dataRef.id,
                            TextbookId: this.editionActive.id,
                            KeyWord: '',
                            SkipCount: 0,
                            MaxResultCount: 99999,
                        }
                        ChapterGetList(data).then(res => {
                            treeNode.dataRef.children = res.items.map(item => {
                                if (!item.hasChild) {
                                    item.isLeaf = true
                                }
                                let obj = {
                                    key: item.id,
                                    title: item.name,
                                    scopedSlots: { title: "custom" },
                                    ...item
                                }
                                return obj;
                            });
                            this.treeData = [...this.treeData];
                            this.spinning = false;
                            resolve();
                        }).catch(err => {
                            this.spinning = false;
                        })
                    } else {
                        data = {
                            ParentId: treeNode.dataRef.id,
                            DisciplineId: this.subject.id,
                            KeyWord: '',
                            SkipCount: 0,
                            MaxResultCount: 99999,
                        }
                        KnowledgePointGetList(data).then(res => {
                            treeNode.dataRef.children = res.items.map(item => {
                                if (!item.hasChild) {
                                    item.isLeaf = true
                                }
                                let obj = {
                                    key: item.id,
                                    title: item.name,
                                    scopedSlots: { title: "custom" },
                                    ...item
                                }
                                return obj;
                            });
                            this.treeData = [...this.treeData];
                            this.spinning = false;
                            resolve();
                        }).catch(err => {
                            this.spinning = false;
                        })
                    }

                });
            },
        },
    };
</script>
<style scoped>
    .list-box {
        width: 300px;
        height: 500px;
        border: 1px solid rgba(217, 217, 217, 1);
    }

    .list-title {
        width: 100%;
        height: 30px;
        border-bottom: 1px solid rgba(217, 217, 217, 1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .list-content {
        width: 100%;
        height: 470px;
        overflow: auto;
    }

    .btn-box {
        width: 60px;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-item {
        border: 1px solid #f2f2f2;
        padding: 8px;
        cursor: pointer;
        border-radius: 3px;
    }

    .btn-item:hover {
        color: #fff;
        background-color: #1890ff;
    }

    .edition-box {
        cursor: pointer;
        position: relative;
    }

    .edition-top:hover .edition-title {
        color: #1890ff;
    }

    .edition-list {
        width: 100%;
        padding: 8px;
        position: absolute;
        top: 26px;
        left: 0;
        background-color: #fff;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        flex-wrap: wrap;
        z-index: 999999999;
    }

    .edition-item {
        padding: 4px;
        border-radius: 3px;
    }

    .edition-item-active {
        background-color: #1890ff;
        color: #fff;
    }
</style>