<template>
<div>
    <el-card shadow="hover" class="m-b-20">
        <div class="flex-between">
            <el-page-header @back="goBack" :content="systemName"></el-page-header>
        </div>
    </el-card>
    <el-card shadow="hover" class="m-b-20">
        <el-row :gutter="20" style="padding-top: 20px;">
            <el-col :span="24">
                <el-col :span="18">
                    <div class="cover">
                        <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
                        <template v-else-if="iframeSrc">
                            <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
                            <template v-if="showMask">
                                <div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
                                <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
                            </template>
                            <template v-if="showMask1">
                                <div class="word-mask" style="height: 40px;"></div>
                                <div class="word-mask2"
                                     style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
                            </template>
                            <template v-if="showMask2">
                                <div class="excel-mask1" style="height: 48px;"></div>
                            </template>
                        </template>
                        <div class="pdf inner" v-else-if="pdfSrc">
                            <pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
                        </div>
                        <div v-else>
                            <video ref="video" controls class="video_wid" :src="videoSrc"
                                   controlsList="nodownload"></video>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="catalog">
                        <div class="btns">
                            <el-button type="primary" @click="goSubSystem">进入实验</el-button>
                        </div>
                        <div class="list_he">
                            <h4 class="list_title">学习资源</h4>
                            <template v-if="systemId == 1">
                                <div v-for="(item,index) in videoList1" :key="index">
                                    <div class="flex-between list_catalog">
                                        <p class="experimental_title" :class="{active: curLink == item.title}"
                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
                                    </div>
                                </div>
                            </template>
                            <template v-else-if="systemId == 4">
                                <div v-for="(item,index) in videoList4" :key="index">
                                    <div class="flex-between list_catalog">
                                        <p class="experimental_title" :class="{active: curLink == item.title}"
                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
                                    </div>
                                </div>
                            </template>
                            <template v-else-if="systemId == 5">
                                <div v-for="(item,index) in videoList5" :key="index">
                                    <div class="flex-between list_catalog">
                                        <p class="experimental_title" :class="{active: curLink == item.title}"
                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
                                    </div>
                                </div>
                            </template>
                            <template v-else-if="systemId == 6">
                                <div v-for="(item,index) in videoList6" :key="index">
                                    <div class="flex-between list_catalog">
                                        <p class="experimental_title" :class="{active: curLink == item.title}"
                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
                                    </div>
                                </div>
                            </template>
                            <template v-else-if="systemId == 7">
                                <div v-for="(item,index) in videoList7" :key="index">
                                    <div class="flex-between list_catalog">
                                        <p class="experimental_title" :class="{active: curLink == item.title}"
                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
                                    </div>
                                </div>
                            </template>
                            <template v-else-if="systemId == 8">
                                <div v-for="(item,index) in videoList8" :key="index">
                                    <div class="flex-between list_catalog">
                                        <p class="experimental_title" :class="{active: curLink == item.title}"
                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
                                    </div>
                                </div>
                            </template>
                            <template v-else-if="systemId == 9">
                                <div v-for="(item,index) in videoList9" :key="index">
                                    <div class="flex-between list_catalog">
                                        <p class="experimental_title" :class="{active: curLink == item.title}"
                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
                                    </div>
                                </div>
                            </template>
                            <template v-else-if="systemId == 10">
                                <div v-for="(item,index) in videoList10" :key="index">
                                    <div class="flex-between list_catalog">
                                        <p class="experimental_title" :class="{active: curLink == item.title}"
                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                <div v-for="(item,index) in videoList1" :key="index">
                                    <div class="flex-between list_catalog">
                                        <p class="experimental_title" :class="{active: curLink == item.title}"
                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </el-col>
            </el-col>
        </el-row>
    </el-card>

    <el-card shadow="hover" class="m-b-20">
        <div>课程简介</div>
        <p>课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介</p>
    </el-card>
    <el-card shadow="hover" class="m-b-20">
        <div>课程目标</div>
        <p>课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介</p>
    </el-card>
    <el-card shadow="hover" class="m-b-20">
        <div>课程进度</div>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
    </el-card>
</div>
</template>

<script>
import util from "@/libs/util";
import Setting from "@/setting";
import pdf from "@/components/pdf";
import { videoList1, videoList4, videoList5, videoList6, videoList7, videoList8 } from "@/libs/videoList";
import { mapState } from "vuex";
export default {
    components: { pdf },
    data() {
        return {
            systemId: this.$route.query.systemId,
            systemName: this.$route.query.systemName,
            video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4",
            videoSrc: "",
            curLink: "",
            videoList1,
            videoList4,
            videoList5,
            videoList6,
            videoList7,
            videoList8,
            coverUrl: "",
            playAuth: "",
            player: null,
            previewImg: "",
            iframeSrc: "",
            isWord: false,
            isPPT: false,
            isExcel: false,
            showMask: false,
            showMask1: false,
            showMask2: false,
            closePosi: {
                top: "80px"
            },
            pdfVisible: false,
            pdfSrc: ""
        }
    },
    computed: {
        ...mapState("user", [
            "userId", "schoolId", "studentId", "roleId", "userName"
        ])
    },
    mounted() {
        this.insertScript();
        this.preview(this[`videoList${this.systemId}`][0]);
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        preview(row) { // 预览
            let url = row.links;
            this.videoSrc = "";
            this.coverUrl = "";
            this.pdfSrc = "";
            this.iframeSrc = "";
            this.curLink = row.title;
            let ext = util.getFileExt(url);
            if (util.isVideo(ext)) {
                this.videoSrc = url;
            } else if (ext == "pdf") {
                this.pdfSrc = url;
                this.pdfVisible = true;
            } else if (util.isImg(ext)) {
                window.open(url);
            } else if (util.isDoc(ext)) {
                if (ext == "pptx") {
                    this.isPPT = true;
                    this.isWord = false;
                    this.isExcel = false;
                } else if (ext == "doc" || ext == "docx") {
                    this.isPPT = false;
                    this.isWord = true;
                    this.isExcel = false;
                } else if (ext == "xls" || ext == "xlsx") {
                    this.isExcel = true;
                    this.isPPT = false;
                    this.isWord = false;
                } else {
                    this.isPPT = false;
                    this.isWord = false;
                    this.isExcel = false;
                }
                if (this.isPPT) {
                    this.showMask = true;
                } else {
                    this.showMask = false;
                }
                if (this.isWord) {
                    this.showMask1 = true;
                } else {
                    this.showMask1 = false;
                }
                if (this.isExcel) {
                    this.showMask2 = true;
                } else {
                    this.showMask2 = false;
                }
                this.iframeSrc = `https://view.officeapps.live.com/op/view.aspx?src=${url}`;
            }
        },
        // 插入阿里云播放器脚本
        insertScript() {
            const linkTag = document.createElement("link");
            linkTag.id = "aliplayerLink";
            linkTag.rel = "stylesheet";
            linkTag.href = "https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css";
            document.body.appendChild(linkTag);

            const scriptTag = document.createElement("script");
            scriptTag.id = "aliplayerScript";
            scriptTag.type = "text/javascript";
            scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js";
            document.body.appendChild(scriptTag);
            this.$once("hook:beforeDestroy", function() {
                document.body.removeChild(document.querySelector("#aliplayerLink"));
                document.body.removeChild(document.querySelector("#aliplayerScript"));
            });
        },
        goSubSystem() {
            let type = this.systemId;
            let host = Setting.apiBaseURL;
            let href = "";

            let roleId = this.roleId == 4 ? 0 : 1;
            let userName = window.btoa(encodeURIComponent(this.userName));

            if (type == 1) {
                href = `${host}pyTrials/#/`;
                // if(process.env.NODE_ENV === 'development') href = 'http://120.78.198.231/'
            } else if (type == 4) {
                href = `${host}pyFinance/#/`;
            } else if (type == 5) {
                href = `${host}pyProjects/#/`;
            } else if (type == 6) {
                href = `${host}pyRandom/#/`;
            } else if (type == 7) {
                href = `${host}pyQuantification/#/`;
            } else if (type == 8) {
                href = `${host}pyAnalysis/#/`;
            } else if (type == 9) {
                href = `${host}pyDataclean/#/`;
            } else if (type == 10) {
                href = `${host}pyAcquisition/#/`;
            } else if (type == 21) {
                window.open(`http://121.37.29.24:80/yyyflogin?userId=${this.userId}&userName=${userName}&userType=${roleId}&reqType=1&reqId=3989a0ad671849b99dcbdcc208782333&caseId=9681f86902314b10bc752909121f9ab9&authorization=87DIVy348Oxzj3ha&classId=1876&courserId=7ff5d4715b114b7398b6f26c20fac460`);
            } else if (type == 22) {
                window.open(`https://danbao.czcyedu.com/#/loginFromYyyf?userId=${this.userId}&userName=${userName}&userType=${roleId}&reqType=1&reqId=eb7d8355119d449184c548b07dc01ed9&caseId=1198241070647873538&authorization=87DIVy348Oxzj3ha&classId=1876&courserId=faaedd82adb9444285a5785e4a3dd4f9`);
            }

            if (type != 21 && type != 22) {
                util.cookies.set("userId", this.userId);
                util.cookies.set("studentId", this.studentId);
                util.cookies.set("schoolId", this.schoolId);
                util.cookies.set("assessmentId", "", -1);
                util.cookies.set("projectId", "", -1);
                util.cookies.set("startTime", "", -1);
                util.cookies.set("stopTime", "", -1);
                location.href = href;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
$height: 650px;
.cover {
    position: relative;
    height: $height;
    border: 0;

    .fileIframe {
        width: 100%;
        height: $height !important;
    }
}
.video_wid {
    width: 100%;
    height: 650px;
    border: 0;
}

.video_wid:focus {
    outline: none;
}

.title_view {
    background-color: #2F3236;
    padding: 12px 10px;
}

h3 {
    color: #9076FF;
    margin-bottom: 10px;
}

.catalog .title_view .el-button {
    padding: 8px 20px;
}

.btns {
    display: flex;
    justify-content: space-between;
    .el-button {
        flex: 1;
        height: 90px;
        font-size: 30px;
        background: transparent url(../../../assets/img/ques1.png) 0 0/100% 100% no-repeat;
        border: 0;
    }
}

.list_he {
    height: 550px;
    overflow-y: auto;
    padding: 20px 12px;
    background: #3f4449;
    margin-top: 10px;
}

.list_he ul {
    padding: 20px 0;
}

.list_he ul li:first-child {
    margin-top: 0;
}

.list_he ul li {
    margin-top: 10px;
    font-size: 14px;
}

.list_title {
    color: #9278FF;
    font-size: 20px;
    margin-left: 12px;
}

.list_catalog {
    padding: 0 8px;
    font-size: 14px;
    margin-top: 15px;
    cursor: pointer;
}

.mar0 {
    margin-top: 0;
}

.list_catalog .catalog_button .el-button {
    background-color: #2F3236;
    border: 1px solid rgba(144, 118, 255, 1);
    color: #9278FF;
    padding: 6px 8px;
}

.experimental_title {
    color: #fff;
    word-wrap: break-word;

    &.active {
        color: #9278FF;
    }
}

.experimental_status {
    margin-right: 10px;
    color: #7A7A7A;
}

.curriculum_name {
    color: #fff;
}

.curriculum_name i {
    margin-left: 5px;
    margin-right: 5px;
}

.curriculum_status {
    color: #7A7A7A;
}


.mask {
    z-index: 9;
    position: absolute;
    background-color: rgb(57, 58, 61);
}

.word-mask {
    z-index: 9;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    background-color: rgb(243, 242, 241);
}

.word-mask1 {
    z-index: 9;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    background-color: #185abd;
}

.word-mask2 {
    z-index: 9;
    position: absolute;
    background-color: transparent;
}

.excel-mask1 {
    z-index: 9;
    position: absolute;
    top: 0;
    left: 20%;
    width: 60%;
    background-color: #107c41;
}

</style>