<template>
    <div class="online-container">
        <Loading v-if="isLoading" hideMask></Loading>
        <div class="online-content">
            <div class="online-left">
                <div class="online-content-header">
                    <span>{{ $t('jyzx.online.checkedPoint') }}</span>
                    <span class="online-content-header-tools">
                        <Icon type="md-add" :title="$t('jyzx.online.addPoint')" @click="addPoint" />
                    </span>
                </div>
                <vuescroll>
                    <EmptyData :top="100" v-if="!pointList.length"></EmptyData>
                    <div class="volume-list" v-else>
                        <div v-for="(item, index) in pointList" :class="['volume-item',activePointIndex === index ? 'volume-active' : '',]" :key="index" @click="getPoint(item, index, item.id, item.code, item.name)">
                            <p class="volume-item-name">
                                <span class="status-idDel">{{ item.no }}</span>
                                {{ item.name }}
                                <span class="abli-type" v-if="item.compulsory">{{ $t('jyzx.online.compulsory') }}</span>
                                <span class="status-time">{{ $t('jyzx.online.studyTime') }}：<span>{{ item.hour }}</span></span>
                            </p>
                            <p style="text-align: right; margin-right: 20px" v-show="item.done">
                                <span style="background-color: #16c18e;color: #fff; padding: 2px 5px;border-radius: 5px;">{{ $t('jyzx.common.complete') }}</span>
                            </p>
                        </div>
                    </div>
                </vuescroll>
            </div>
            <div class="online-mid">
                <div class="online-content-header">{{ $t('jyzx.online.chapter') }}</div>
                <div class="online-tree-box">
                    <vuescroll>
                        <EmptyData :top="-240" v-if="!treeData.length"></EmptyData>
                        <Tree :data="treeData" @on-select-change="details"></Tree>
                    </vuescroll>
                </div>
            </div>
            <div class="online-right">
                <!--<div class="online-content-header">关联资源</div>-->
                <Tabs v-model="topsselect">
                    <TabPane :label="$t('jyzx.online.relResources')" name="name1" icon="md-analytics">
                        <div class="online-tree-box">
                            <!-- <vuescroll> -->
                            <EmptyData v-if="!resourceInfo.length"></EmptyData>
                            <Scroll :distance-to-edge="12" :on-reach-bottom="handleReachBottom" v-else :height="865">
                                <div class="node-resource-box" ref="scroll">
                                    <div>
                                        <div class="node-resource-item" v-for="(item, index) in resourceInfo" :key="index" @click="viewdetails(item.type,item.link,item.cntr,item.title,index,docstatus)">
                                            <div class="node-title">
                                                <div class="qieicon">
                                                    {{ index + 1 }}
                                                </div>
                                                <img src="../../assets/source/image.png" v-if="item.type === 'image'" />
                                                <img src="../../assets/source/word.png" v-else-if="item.type === 'doc' &&docType.includes(getSuffix(item.title))" />
                                                <img src="../../assets/source/excel.png" v-else-if="item.type === 'doc' &&excelType.includes(getSuffix(item.title))" />
                                                <img src="../../assets/source/ppt.png" v-else-if="item.type === 'doc' &&pptType.includes(getSuffix(item.title))" />
                                                <img src="../../assets/source/pdf.png" v-else-if="item.type === 'doc' && getSuffix(item.title) === 'pdf'" />
                                                <img src="../../assets/source/video.png" v-else-if="item.type === 'video'" />
                                                <img src="../../assets/source/audio.png" v-else-if="item.type === 'audio'" />
                                                <img src="../../assets/source/item.png" v-else-if="item.type === 'item'" />
                                                <img src="../../assets/source/folder.png" v-else-if="item.type === 'paper'" />
                                                <img src="../../assets/source/link.png" v-else-if="item.type === 'link'" />
                                                <img src="../../assets/source/zip.png" v-else-if="item.type === 'res'" />
                                                <img src="../../assets/source/image.png" v-else-if="item.type === 'thum'" />
                                                <img src="../../assets/source/unknow.png" v-else-if="item.type === 'other'" />
                                                <p class="resourcetitle">
                                                    {{ item.title }}
                                                    <Icon v-show="item.type === 'doc' || item.type === 'docx'" type="ios-link" />
                                                </p>
                                            </div>
                                            <div>
                                                <video v-if="item.type === 'video'" :src="item.formalUrl" controls="controls" style="border-radius: 5px;max-height: 700px;max-width: 100%;" />
                                                <img v-if="item.type === 'image'" :src="item.formalUrl" style="border-radius: 5px;max-height: 700px !important;max-width: 100% !important;" />
                                                <audio v-if="item.type === 'audio'" controls>
                                                    <source :src="item.formalUrl" />
                                                </audio>
                                                <iframe v-if="item.type == 'doc' &&getSuffix(item.title) !== 'pdf' &&getSuffix(item.title) !== 'PDF'" :src="item.formalUrl" width="100%" height="700px" frameborder="1"></iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Scroll>
                            <!-- </vuescroll> -->
                        </div>
                    </TabPane>
                    <TabPane :label="$t('jyzx.online.relTopic')" name="name2" icon="ios-chatboxes">
                        <div v-if="pointList.length">
                            <RelatedTopic :pointInfo="pointList[activePointIndex]" />
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        </div>
        <!--文件预览-->
        <Modal v-model="previewStatus" :title="$t('jyzx.online.relResources')" width="80%">
            <div v-if="previewStatus" class="image-viewer">
                <div style="width: fit-content; position: relative; margin: auto">
                    <!--<video
                        v-if="previewFile.type == 'video'"
                        id="previewVideo"
                        :src="previewFile.url"
                        width="870"
                        controls="controls"
                        style="max-height: 800px"
                    >
                        {{ $t("teachContent.tips8") }}
                    </video>-->
                    <!--<audio
                        v-else-if="previewFile.type == 'audio'"
                        controls
                        autoplay="autoplay"
                    >
                        <source :src="previewFile.url" />
                        {{ $t("teachContent.notAudio") }}
                    </audio>-->
                    <img v-if="previewFile.type == 'image'" :src="previewFile.url" style="border-radius: 5px; max-height: 900px; max-width: 870px" />
                    <iframe v-else-if="previewFile.type == 'doc'" :src="'https://view.officeapps.live.com/op/view.aspx?src=' +escapeBlobUrl" width="870" height="700" frameborder="1"></iframe>
                </div>
            </div>
        </Modal>

        <Modal v-model="isAddPoint" :title="$t('jyzx.common.point')" width="80%" @on-ok="setCheckPoint">
            <div style="margin-bottom: 10px">
                <p class="studyTime">
                    {{ $t('jyzx.online.study') }}<span>{{ studyTim }}</span>{{ $t('jyzx.online.time') }}
                </p>
                <Select v-model="selDimen" style="width: 200px; margin-right: 10px" label-in-value @on-change="selAllPoint">
                    <Option v-for="(item, index) in dimension" :value="item.code" :key="index">{{ item.val }}</Option>
                </Select>
                <Select v-model="selEnvi" style="width: 200px" label-in-value @on-change="selAllPoint">
                    <Option v-for="(item, index) in environment" :value="item" :key="index">{{ item }}</Option>
                </Select>
            </div>
            <Table :columns="allPointCol"
                    :data="showPoint"
                    max-height="400"
                    ref="selection"
                    @on-selection-change="(selections) => {selected = selections;}"
            >
                <template slot-scope="{ row }" slot="compulsory">
                    <p v-if="row.compulsory">{{ $t('jyzx.online.compulsory') }}</p>
                    <p v-else>{{ $t('jyzx.online.elective') }}</p>
                </template>
            </Table>
            <p style="margin-top: 20px">
                <Icon type="ios-alert" color="#FF9900" />
                {{ $t('jyzx.online.tips') }}
            </p>
        </Modal>
    </div>
</template>


<script>
import E from "wangeditor"
import RelatedTopic from './relatedTopic.vue';
export default {
    components: {
        RelatedTopic
    },
    data() {
        return {
            isLoading: false,
            docType: ["doc", "docx"],
            excelType: ["xls", "csv", "xlsx"],
            pptType: ["ppt", "pptx"],
            studyTim: 0, //学时
            pointList: [], //能力点
            isAddPoint: false, //modal——能力点
            activePointIndex: 0, //当前选择的能力点
            treeData: [], //章节
            resourceInfo: [], //关联资源
            previewStatus: false,
            previewFile: {
                type: "",
                url: "",
                extension: "",
            },
            activeType: "recent",
            escapeBlobUrl: "",
            allPointCol: [
                {
                    type: "selection",
                    width: 120,
                    align: "center",
                },
                {
                    title: this.$t('jyzx.online.type'),
                    slot: "compulsory",
                    align: "center",
                },
                {
                    title: this.$t('jyzx.online.no'),
                    key: "no",
                    align: "center",
                },
                {
                    title: this.$t('jyzx.common.pointName'),
                    key: "name",
                    align: "center",
                },
                {
                    title: this.$t('jyzx.common.dimension'),
                    key: "val",
                    align: "center",
                },
                {
                    title: this.$t('jyzx.online.environment'),
                    key: "env",
                    align: "center",
                },
            ],
            allPoint: [], //所有能力点
            showPoint: [], //modal——展示的能力点
            selected: [], //modal——选中的能力点
            dimension: [
                {
                    code: 0,
                    val: "全部维度",
                },
            ], //维度
            selDimen: 0, //选择的维度
            environment: [
                "全部环境",
                "混合学习环境",
                "多媒体教学环境",
                "智慧学习环境",
            ], //环境
            selEnvi: "全部环境", //选择的环境
            studyNum: 0, //资源学习的数量
            chapterId: 0, //当前章节的id
            idArr: [], //已学的id
            chapterTotal: 0, //当前章节的资源总数
            visible: false, //播放按钮,
            topicname: '',//话题名称
            topstatus: false,//话题显示状态
            topsselect:'name1', //默认选择关联资源
        };
    },
    created() {
        this.getAbility();
        this.getAllpoint();
        if (!localStorage.getItem("studyRes")) {
            localStorage.setItem("studyRes", JSON.stringify([]));
        }
    },
    mounted() {
        let stemEditor = new E("#divtop")
        stemEditor.config.onchange = (html) => {
            this.stemContent = html
        }
        stemEditor.config.uploadImgShowBase64 = true
        stemEditor.config.zIndex = 500
        stemEditor.create()
    },
    methods: {
        // 已有的能力点
        getAbility() {
            let req = {
                tmdid: this.$store.state.userInfo.TEAMModelId,
                code: this.$store.state.userInfo.schoolCode,
                scope: "school",
            };
            this.$api.jyzx.getPoint(req).then((res) => {
				this.pointList = res.hadSubs.sort(function(s, t) {
                    var a = s.no.toLowerCase();
                    var b = t.no.toLowerCase();
                    if (a.length === 2) {
                        a = a.slice(0, a.length - 1) + '0' + a.slice(-1)
                    }
                    if (b.length === 2) {
                        b = b.slice(0, b.length - 1) + '0' + b.slice(-1)
                    }

                    if (a < b) return -1;
                    if (a > b) return 1;
                    return 0;
                });
                for (let i in res.rcdSubs) {
                    this.pointList[i].done = res.rcdSubs[i].done;
                }
                // hadSubs：选择的能力点
                // rcdSubs：存放能力点的学习情况
                this.getStudyId();
                this.getontree(
                    res.hadSubs[0].id,
                    res.hadSubs[0].code,
                    res.hadSubs[0].name,
                    true
                );

                let reqs = {
                    tmdid: this.$store.state.userInfo.TEAMModelId,
                    school: this.$store.state.userInfo.schoolCode,
                };
                this.$api.jyzx.getStudyTime(reqs).then((res) => {
                    if (res) {
                        if (res.onlineTime > 20) {
                            this.studyTim = 20;
                        } else {
                            this.studyTim = res.onlineTime;
                        }
                    }
                });
            });
        },
        // 已学的章节id
        getStudyId() {
            let req = {
                tmdid: this.$store.state.userInfo.TEAMModelId,
                abilityId: this.pointList[this.activePointIndex].id,
                school: this.$store.state.userInfo.schoolCode,
                opt: "ReadSelfOnlineRcd",
            };
            this.$api.jyzx.pointAction(req).then((res) => {
                if (res.taskRcds.length) {
                    for (let i in res.taskRcds) {
                        this.idArr.push(res.taskRcds[i].id);
                    }
                }
            });
        },
        //获取能力点下tree
        async getontree(id, code, name, status) {
            this.getStudyId();
            var sas = await this.$tools.getSchoolSas();
            this.$api.jyzx
                .getztree({
                    abilityId: id,
                    abilityCode: code,
                    scope: "school",
                })
                .then(
                    (res) => {
                        console.log(res,'返回的能力点下的tree')
                        this.chapterTotal = res.rnodeCount;
                        /*  this.treeData.title = name*/
                        var children = [];
                        for (var i = 0; i < res.tree.length; i++) {
                            let interiorData = res.tree[i].trees[0];
                            var bigData = {
                                title: res.tree[i].trees[0].title,
                                id: res.tree[i].trees[0].id,
                                pid: res.tree[i].trees[0].pid,
                                expand: true,
                                rnodes: res.tree[i].trees[0].rnodes,
                                children: [],
                                render: (h, { data }) => {
                                    return h("span", [
                                        h("span", [
                                            h(
                                                "span",
                                                {
                                                    style: {
                                                        display: "inline-block",
                                                        textOverflow:
                                                            "ellipsis",
                                                        overflow: "hidden",
                                                        whiteSpace: "nowrap",
                                                        maxWidth: "80%",
                                                    },
                                                    domProps: {
                                                        title: data.title,
                                                    },
                                                    title: data.title,
                                                },
                                                data.title
                                            ),
                                            h("Icon", {
                                                props: {
                                                    type: "ios-checkmark-circle",
                                                },
                                                style: {
                                                    marginTop: "10px",
                                                    float: "right",
                                                    opacity:
                                                        this.idArr.includes(
                                                            data.id
                                                        )
                                                            ? 1
                                                            : 0,
                                                    color: "#00C38D",
                                                },
                                            }),
                                            h("Icon", {
                                                props: {
                                                    type: "md-cube",
                                                },
                                                domProps: {
                                                    title: this.$t("jyzx.online.resources"),
                                                },
                                                style: {
                                                    marginLeft: "8px",
                                                    marginTop: "10px",
                                                    marginRight: "20px",
                                                    opacity: data.rnodes.length
                                                        ? 1
                                                        : 0,
                                                    float: "right",
                                                    color: "#1cc0f3",
                                                },
                                            }),
                                        ]),
                                    ]);
                                },
                            };
                            interiorData.children = this.childRender(
                                interiorData.children
                            );
                            bigData.children = interiorData.children;
                            children.push(bigData);
                        }
                        for (var t = 0; t < children.length; t++) {
                            var sData = children[t].children;
                            for (var s = 0; s < sData.length; s++) {
                                sData[s].expand = true;
                                if (sData[s].children.length != 0) {
                                    var qData = sData[s].children;
                                    for (var g = 0; g < qData.length; g++) {
                                        qData[g].expand = true;
                                    }
                                }
                            }
                        }
                        console.log(children, "tree的资源");
                        if (status) {
                            //防止学习完成重置
                            var newSas = this.$store.state.user
                            children[0].children[0].selected = true;
                            if (children[0].children[0].rnodes.length != 0) {
                                /* var cntrs = children[0].children[0].rnodes[0].cntr ? children[0].children[0].rnodes[0].cntr :'teammodelos';*/
                                var cntrs ='teammodelos'
                                console.log(cntrs, "cntrs");
                                var link = children[0].children[0].rnodes[0].link;
                                console.log(link, "link");
                                let urls =
                                    this.$evTools.getBlobHost() +
                                    "/" +
                                    cntrs +
                                    link + '?'
                                var urlInfos = urls + newSas.osblob_sas;
                                children[0].children[0].rnodes[0].formalUrl =
                                    urlInfos;
                                this.resourceInfo = children[0].children[0].rnodes;
                            }
                        }
                        this.treeData = children;
                    },
                    (error) => {}
                );
        },
        // 给子代添加图标
        childRender(datas) {
            for (let i in datas) {
                if (datas[i].children.length) {
                    datas[i].children = this.childRender(datas[i].children);
                } else {
                    datas[i].render = (h, { data }) => {
                        return h("span", [
                            h("span", [
                                h(
                                    "span",
                                    {
                                        style: {
                                            display: "inline-block",
                                            textOverflow: "ellipsis",
                                            overflow: "hidden",
                                            whiteSpace: "nowrap",
                                            maxWidth: "80%",
                                        },
                                        domProps: {
                                            title: data.title,
                                        },
                                        title: data.title,
                                    },
                                    data.title
                                ),
                                h("Icon", {
                                    props: {
                                        type: "ios-checkmark-circle",
                                    },
                                    style: {
                                        marginTop: "10px",
                                        float: "right",
                                        opacity: this.idArr.includes(data.id)
                                            ? 1
                                            : 0,
                                        color: "#00C38D",
                                    },
                                }),
                                h("Icon", {
                                    props: {
                                        type: "md-cube",
                                    },
                                    domProps: {
                                        title: this.$t("jyzx.online.resources"),
                                    },
                                    style: {
                                        marginLeft: "8px",
                                        marginTop: "10px",
                                        marginRight: "20px",
                                        opacity: data.rnodes.length ? 1 : 0,
                                        float: "right",
                                        color: "#1cc0f3",
                                    },
                                }),
                            ]),
                        ]);
                    };
                }
            }
            return datas;
        },
        // 获取所有能力点
        async getAllpoint() {
            let dimenArr = await this.$GLOBAL.DIMENSIONS();
            dimenArr.forEach((item) => {
                this.dimension.push(item);
            });
            let req = {
                scope: "school",
                code: this.$store.state.userInfo.schoolCode,
                dimension: "",
                status: 1,
            };
            this.$api.ability.FindVolumes(req).then((res) => {
                console.log(res)
                if (res.abilities.length) {
                    res.abilities.forEach((item) => {
                        for (let dim in dimenArr) {
                            if (dimenArr[dim].code == item.dimension) {
                                item.val = dimenArr[dim].val;
                                break;
                            }
                        }
                    })
                    res.abilities.sort((a, b) => {
                        if(a.compulsory) {
                            return -1
                        } else {
                            return 1
                        }
                    })
                    this.allPoint = res.abilities;
                    console.log(this.allPoint)
                }
            });
        },
        // 打开一个能力点
        getPoint(points, index, id, code, name) {
            console.log(id,'能力点的ID')
            this.activePointIndex = index;
            this.treeData = [];
            this.getontree(id, code, name, true);
            this.topstatus = false
            this.topsselect='name1'
        },
        // Modal——勾选能力点
        addPoint() {
            this.isAddPoint = true;
            this.selDimen = 0;
            this.selEnvi = "全部环境";
            // this.showPoint = this.allPoint
        },
        // API——勾选能力点
        setCheckPoint() {
            if (this.selected.length) {
                let ids = [];
                this.selected.forEach((item) => {
                    ids.push(item.id);
                });
                let req = {
                    tmdid: this.$store.state.userInfo.TEAMModelId,
                    abilityIds: ids,
                    school: this.$store.state.userInfo.schoolCode,
                };
                this.$api.jyzx.checkPoint(req).then((res) => {
                    if (res.abilityIds.length) {
                        if (res.abilityIds.length != this.pointList.length) {
                            this.$Message.success(this.$t("jyzx.online.message1"));
                            this.getAbility();
                        }
                    }
                });
            }
        },
        // 查看资源详情
        async viewdetails(type, url, vessel, title, index) {
            console.log(type);
            console.log(url);
            if (type === "video" || type === "audio") {
                return;
            }
            var fileName = title.toLowerCase();
            console.log(fileName, "转换大小写效果");
            this.previewFile.type = type;
            //this.previewStatus = true
            let link = url;
            let newSas=this.$store.state.user
            let sas = await this.$tools.getSchoolSas();
            let urls = this.$evTools.getBlobHost() + "/" + vessel + link+'?';
            let urlsas = urls + newSas.osblob_sas;
            this.previewFile.url = urlsas;
            if (
                fileName.split(".")[fileName.split(".").length - 1] === "pdf" ||
                fileName.split(".")[fileName.split(".").length - 1] === "PDF"
            ) {
                this.previewFile.type = "pdf";
                this.openPdf(this.previewFile.url);
                this.previewStatus = false;
            } else {
                return;
            }
            if (
                fileName.split(".")[fileName.split(".").length - 1] === "pptx"
            ) {
                this.previewStatus = false;
                return;
            }

            if (urls) {
                if (this.previewFile.type == "doc") {
                    this.escapeBlobUrl = encodeURIComponent(
                        (this.previewFile.url = urlsas)
                    );
                    this.previewStatus = false;
                } else {
                    this.previewFile.url = urlsas;
                }
            } else {
                this.previewFile.type = type;
                this.previewFile.url = urlsas;
            }
            this.resourceInfo[index].status = true;
            if (this.studyNum <= this.resourceInfo.length) {
                this.studyNum++;
            }
            if (
                this.studyNum == this.resourceInfo.length &&
                this.resourceInfo.length
            ) {
                this.submitChap();
            }
        },
        //pdf处理
        openPdf(url) {
            window.open("/web/viewer.html?file=" + encodeURIComponent(url));
        },
        // 选择维度、环境
        selAllPoint() {
            console.log(this.selDimen, this.selEnvi,'内容')
            let arr = [];
            if (!this.selDimen && this.selEnvi == "全部环境") {
                arr = this.allPoint;
            } else if (this.selEnvi == "全部环境") {
                arr = this.allPoint.filter((item) => {
                    return item.dimension == this.selDimen;
                });
            } else if (!this.selDimen) {
                arr = this.allPoint.filter((item) => {
                    return item.env == this.selEnvi;
                });
            } else {
                let newArr = [];
                newArr = this.allPoint.filter((item) => {
                    return item.dimension == this.selDimen;
                });
                arr = newArr.filter((item) => {
                    return item.env == this.selEnvi;
                });
            }
            this.showPoint = arr;
            console.log(arr, this.selected,'数据')
            this.showPoint.forEach((item) => {
                let ids = this.selected.map((i) => {
                    return i.id;
                });
                console.log(ids,'ids')
                if (ids.includes(item.id)) {
                    item._checked = true;
                } else {
                    //item._checked = true;
                }
            });
        },
        pointChange(selections) {
            console.log(this.selected, selections);
            // (selections) => {selected = selections;}
            this.selected = selections
            if(this.selected.length > selections.length) {

            }
        },
        // 不同文件显示不同背景色
        toolBg(type) {
            if (type == "image") {
                return "#E77B22";
            } else if (type == "video") {
                return "#8D2BDC";
            } else if (type == "audio") {
                return "#E0027B";
            } else {
                return "#F7BF06";
            }
        },
        getSuffix(name) {
            // return (name) => {
            console.log(name);
            return name.substr(name.lastIndexOf(".") + 1);
            // }
        },
        // 章节的关联资源
        async details(name) {
            console.log(name, "name的值");
            if (name.length) {
                // 只学习了部分资源
                let resArr = [];
                resArr = JSON.parse(localStorage.getItem("studyRes"));
                if (
                    !this.idArr.includes(this.chapterId) &&
                    this.studyNum &&
                    this.chapterId
                ) {
                    let ids = resArr.map((item) => {
                        return item.id;
                    });
                    this.resourceInfo.forEach((item) => {
                        if (!ids.includes(item.id) && item.status) {
                            resArr.push(item);
                        }
                    });
                    localStorage.setItem("studyRes", JSON.stringify(resArr));
                }
                var sas = await this.$tools.getSchoolSas(); //SAS
                var urlHost = this.$evTools.getBlobHost() + "/";
                this.studyNum = 0;
                this.chapterId = name[0].id;
                this.resourceInfo = [];
                var Data = this.treeData;
                var detailsData = [];
                var id = name[0].id;
                var forData = this.treeData;
                var newSas = this.$store.state.user
                console.log(newSas.osblob_sas,'授权码')
                //视频停止播放
                for (var r = 0; r < this.resourceInfo.length; r++) {
                    if (this.resourceInfo[r].type === "video") {
                        console.log(
                            document.getElementsByClassName(
                                "node-resource-item"
                            )
                        );
                    }
                }
                for (var i = 0; i < forData.length; i++) {
                    if (
                        id === forData[i].id &&
                        forData[i].children.length != 0
                    ) {
                        //查找章的所有数据
                        detailsData = forData[i].rnodes;
                        console.log(detailsData, "章的数据");
                        for (var q = 0; q < detailsData.length; q++) {
                            if (
                                detailsData[q].type === "video" ||
                                detailsData[q].type === "image" ||
                                detailsData[q].type === "audio" ||
                                detailsData[q].type === "doc" ||
                                detailsData[q].type === "docx"
                            ) {
                                if (
                                    detailsData[q].type === "doc" ||
                                    detailsData[q].type === "docx"
                                ) {
                                    var frontInfo =
                                        "https://view.officeapps.live.com/op/view.aspx?src=";
                                    var noencryption = encodeURIComponent(
                                            urlHost +
                                            detailsData[q].cntr +
                                            detailsData[q].link +'?'+
                                            newSas.osblob_sas
                                    );
                                    detailsData[q].formalUrl =
                                        frontInfo + noencryption;
                                } else {
                                    detailsData[q].formalUrl =
                                        urlHost +
                                        detailsData[q].cntr +
                                        detailsData[q].link +'?'+
                                        newSas.osblob_sas;
                                }
                            }
                        }
                        detailsData = detailsData;
                        console.log(detailsData, "这是章下面的资源");
                    } else {
                        //寻找下面节点
                        var nodeDrawing = forData[i].children;
                        for (var t = 0; t < nodeDrawing.length; t++) {
                            if (id === nodeDrawing[t].id) {
                                nodeDrawing[t].expand = true;
                                var temporaryDatainfo = nodeDrawing[t].rnodes;
                                for (
                                    var e = 0;
                                    e < temporaryDatainfo.length;
                                    e++
                                ) {
                                    if (
                                        temporaryDatainfo[e].type === "video" ||
                                        temporaryDatainfo[e].type === "image" ||
                                        temporaryDatainfo[e].type === "audio" ||
                                        temporaryDatainfo[e].type === "doc" ||
                                        temporaryDatainfo[e].type === "docx"
                                    ) {
                                        if (
                                            temporaryDatainfo[e].type ===
                                                "doc" ||
                                            temporaryDatainfo[e].type === "docx"
                                        ) {
                                            var frontInfo =
                                                "https://view.officeapps.live.com/op/view.aspx?src=";
                                            var noencryption =
                                                encodeURIComponent(
                                                    urlHost +
                                                        temporaryDatainfo[e]
                                                            .cntr +
                                                        temporaryDatainfo[e]
                                                            .link +'?'+
                                                    newSas.osblob_sas
                                                );
                                            temporaryDatainfo[e].formalUrl =
                                                frontInfo + noencryption;
                                        } else {
                                            temporaryDatainfo[e].formalUrl =
                                                urlHost +
                                                temporaryDatainfo[e].cntr +
                                                temporaryDatainfo[e].link +'?'+
                                                newSas.osblob_sas
                                        }
                                    }
                                }
                                detailsData = temporaryDatainfo;
                            } else {
                                //最底层（3）
                                var detailsInfos = nodeDrawing[t].children;
                                for (var a = 0; a < detailsInfos.length; a++) {
                                    if (id === detailsInfos[a].id) {
                                        detailsInfos[a].expand = true;
                                        var temporaryGround =
                                            detailsInfos[a].rnodes;
                                        console.log(
                                            detailsData,
                                            "这是最下面节点的资源"
                                        );
                                        for (
                                            var q = 0;
                                            q < temporaryGround.length;
                                            q++
                                        ) {
                                            if (
                                                temporaryGround[q].type ===
                                                    "video" ||
                                                temporaryGround[q].type ===
                                                    "image" ||
                                                temporaryGround[q].type ===
                                                    "audio" ||
                                                temporaryGround[q].type ===
                                                    "doc" ||
                                                temporaryGround[q].type ===
                                                    "docx"
                                            ) {
                                                if (
                                                    temporaryGround[q].type ===
                                                        "docx" ||
                                                    temporaryGround[q].type ===
                                                        "doc"
                                                ) {
                                                    var frontInfos =
                                                        "https://view.officeapps.live.com/op/view.aspx?src=";
                                                    var noencryptions =
                                                        encodeURIComponent(
                                                            urlHost +
                                                                temporaryGround[
                                                                    q
                                                                ].cntr +
                                                                temporaryGround[
                                                                    q
                                                                ].link +'?'+
                                                               newSas.osblob_sas
                                                        );
                                                    temporaryGround[
                                                        q
                                                    ].formalUrl =
                                                        frontInfos +
                                                        noencryptions;
                                                } else {
                                                    temporaryGround[
                                                        q
                                                    ].formalUrl =
                                                        urlHost +
                                                        temporaryGround[q]
                                                            .cntr +
                                                        temporaryGround[q]
                                                            .link +'?'+
                                                        newSas.osblob_sas
                                                }
                                            }
                                        }
                                        detailsData = temporaryGround;
                                    }
                                }
                            }
                        }
                        console.log(this.resourceInfo, "目录资源");
                        this.resourceInfo = detailsData;
                        //默认选择关联资源
                        this.topstatus = false
                        this.topsselect = 'name1'
                    }
                }
                // 判断学习状态
                if (this.idArr.includes(id)) {
                    // 该章节已学完
                    detailsData.map((item) => {
                        item.status = true;
                    });
                    // +1：表示学完了
                    this.studyNum = detailsData.length + 1;
                }
                detailsData.forEach((item) => {
                    for (let i in resArr) {
                        if (resArr[i].id == item.id) {
                            item.status = true;
                            this.studyNum++;
                        }
                    }
                });
                this.resourceInfo = detailsData;
                console.log(this.resourceInfo, "资源数据");
            }
            setTimeout(() => {
                if (
                    this.$refs.scroll.getBoundingClientRect().height < 800 &&
                    !this.idArr.includes(name[0].id)
                ) {
                    this.submitChap();
                }
            }, 2000);
        },
        // 滚动到底部
        handleReachBottom() {
            return new Promise((r) => {
                setTimeout(() => {
                    if (!this.idArr.includes(this.chapterId)) {
                        this.submitChap();
                    }
                    r();
                }, 1000);
            });
        },
        // 提交学完的章节
        submitChap() {
            let req = {
                tmdid: this.$store.state.userInfo.TEAMModelId,
                abilityId: this.pointList[this.activePointIndex].id,
                school: this.$store.state.userInfo.schoolCode,
                opt: "SaveLearnOnlineRcd",
                taskRcds: {
                    id: this.chapterId,
                    done: true,
                },
            };
            this.$api.jyzx.pointAction(req).then((res) => {
                if (res.status == 1) {
                    this.$Message.success(this.$t('jyzx.online.message2'));
                    this.idArr.push(this.chapterId);
                    let pointArr = this.pointList[this.activePointIndex];
                    if (this.chapterTotal <= res.taskRcds.length) {
                        console.log("已经完了");
                        this.submitAllChap();
                    } else {
                        console.log("还未完");
                    }
                    this.getontree(pointArr.id, pointArr.code, pointArr.name);
                    console.log(res.taskRcds.length);
                }
            });
        },
        // 所有章节都学完
        submitAllChap() {
            let req = {
                tmdid: this.$store.state.userInfo.TEAMModelId,
                abilityId: this.pointList[this.activePointIndex].id,
                school: this.$store.state.userInfo.schoolCode,
                opt: "SetOnlineDone",
            };
            this.$api.jyzx.pointAction(req).then((res) => {
                if (res.abilitySub.length) {
                    this.$Message.success(this.$t('jyzx.online.message3'));
                    this.pointList[this.activePointIndex].done = true;
                }
            });
        },
        clicktop() {
            console.log('获取到焦点触发')
        },
    },
    watch: {
        isAddPoint: {
            // 被选中的能力点——不能取消
            handler(n, o) {
                if (n) {
                    this.allPoint.map((item) => {
                        item._checked = false;
                        item._disabled = false;
                        if (item.compulsory === true) {
                            item._checked = true;
                            item._disabled = true;
                            this.selected.push(item)
                        }
                        for (let i = 0; i < this.pointList.length; i++) {
                            if (item.id == this.pointList[i].id) {
                                item._checked = true;
                                item._disabled = true;
                                this.selected.push(item)
                                console.log(item,'push')
                                break
                            }
                            else if (item.compulsory && i == this.pointList.length - 1) {
                                item._checked = true
                                item._disabled = true
                                this.selected.push(item)
                            }
                        }
                    });
                    let newAllpoint = JSON.stringify(this.allPoint)
                    this.showPoint = JSON.parse(newAllpoint)
                }
            },
        },
        // 监听视频播放
    },
};
</script>

<style lang="less">
.online-container {
    .ivu-tree {
        margin-left: 13px;
        margin-bottom: 50px;

        ul {
            font-size: 16px;
            font-weight: bold;
        }
    }

    .ivu-tree-title {
        width: 94%;
    }

    .ivu-tree-title-selected,
    .ivu-tree-title:hover {
        background-color: var(--active-item-start);
        // color: #fff;
    }

    .ivu-tree-arrow,
    .ivu-tree-title {
        line-height: 40px;
        height: 40px;
    }
}
</style>
<style lang="less" scoped>
@import "./index.less";
</style>
