<template>
    <div class="class-record-container" v-if="schoolSas && teacherSas">
        <vuescroll ref="pagewrap">
            <div style="padding: 1% 3% 0px 3%;">
                <!--头部信息-->
                <div class="class-record-header">
                    <span class="course-name">数学</span>
                    <span class="record-name">
                        速度与时间
                    </span>
                    <div style="float:right;">
                        <span class="label-text">
                            <Icon type="ios-person-outline" />
                            教师：
                        </span>
                        <span class="label-value">任敏</span>
                        <span class="label-text">
                            <Icon type="ios-clock-outline" />
                            班级：
                        </span>
                        <span class="label-value">一年级一班</span>
                        <span class="label-text">
                            <Icon type="ios-clock-outline" />
                            学生人数：
                        </span>
                        <span class="label-value">48人</span>
                        <span class="label-text">
                            <Icon type="ios-clock-outline" />
                            上课时间：
                        </span>
                        <span class="label-value">2020-09-02</span>
                        <Button type="info" size="small" @click="goBack">
                            <Icon custom="iconfont icon-arrow" size="12" style="vertical-align: baseline;" />
                            返回
                        </Button>
                    </div>
                </div>
                <!--上课内容-->
                <!--<h2 class="content-title">上课内容</h2>-->
                <div :class="moStatus ? 'class-content mouse-over-status':'class-content'" @mousemove="moStatus = true" @mouseleave="moStatus = false">
                    <div class="courseware-wrap">
                        <DrawHTEX :mapJson="mapJson"></DrawHTEX>
                        <div class="page-wrap">
                            <Page :total="120" size="small" :current.sync="curPage" show-elevator show-total @on-change="getCurHTEX">
                                <span>{{curPage}}/12</span>
                            </Page>
                            <Icon type="md-qr-scanner" class="full-screen-icon" @click="viewHtex"/>
                        </div>
                        <span class="cur-page-tag">{{curPage}}</span>
                    </div>
                    <video-player2 v-if="schoolSas" class="video-player-box" :markers="markers"
                                   ref="videoPlayer"
                                   :options="playerOptions"
                                   :playsinline="true"
                                   @getCurPage="getCurPage">
                    </video-player2>
                </div>

                <!--课堂互动记录-->
                <h2 class="content-title">互动记录</h2>
                <div class="interaction-record-wrap">
                    <div class="interaction-type-wrap">
                        <span style="border-bottom:5px solid #333335;display:block; margin-bottom:10px;padding-top:5px;">
                            <Icon size="22" :class="typeIndex == 'all' ? 'type-icon-active type-icon':'type-icon'" custom="iconfont icon-basic-setting" @click="filterType('all')" title="所有记录" />
                        </span>
                        <span :class="typeIndex == 'irs' ? 'type-icon-active type-icon':'type-icon'" style="font-size:32px;line-height:30px;" @click="filterType('irs')" title="即问即答">Q</span>
                        <Icon :class="typeIndex == 'msg' ? 'type-icon-active type-icon':'type-icon'" custom="iconfont icon-message" style="font-size:24px;" @click="filterType('msg')" title="飞讯" />
                        <Icon :class="typeIndex == 'img' ? 'type-icon-active type-icon':'type-icon'" type="ios-image" @click="filterType('img')" title="图片" />
                        <Icon :class="typeIndex == 'file' ? 'type-icon-active type-icon':'type-icon'" type="md-document" @click="filterType('file')" title="附件" />
                        <Icon :class="typeIndex == 'link' ? 'type-icon-active type-icon':'type-icon'" type="ios-link" @click="filterType('link')" title="超链接" />
                    </div>
                    <vuescroll ref="datawrap">
                        <div class="page-item" :key="index" v-for="(item,index) in recordDataShow" :id="'page'+item.pageNum">
                            <Icon v-if="item.showFilter" type="ios-funnel" class="page-filter-icon" :style="{color: filterStatus ? '#1cc0f3':'#FFFFFF'}" @click="filterPage()" />
                            <div class="page-info-wrap">
                                <span class="page-tag" @click="toVideo(item.pageNum,$event)"  :ref="'page'+item.pageNum">课件第{{item.pageNum}}页</span>
                                <img class="page-mini-img" @click="openViewer('https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/题目.png'+schoolSas)" :src="'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/题目.png'+schoolSas" />
                            </div>
                            <div class="record-data-wrap">
                                <div v-for="(rtItem, rtIndex) in item.pageRecorde" :key="rtIndex +''+index" class="record-data-item">
                                    <!--即问即答-->
                                    <div v-if="rtItem.type == 'irs' && (typeIndex == 'all' || typeIndex == 'irs')" class="record-split">
                                        <div class="answer-record-item">
                                            <div class="answer-data-wrap irs-data-wrap">
                                                <div class="tools-wrap animated fadeIn">
                                                    <Icon class="tools-icon" custom="iconfont icon-pie" title="数据统计" @click="toggleIrsView(index,rtIndex,0)" :style="{color: (recordData[index].pageRecorde[rtIndex].irsView == 0 || !recordData[index].pageRecorde[rtIndex].irsView)? '#1cc0f3':'white'}" />
                                                    <Icon class="tools-icon" custom="iconfont icon-flop" title="作答详情" @click="toggleIrsView(index,rtIndex,1)" :style="{color: recordData[index].pageRecorde[rtIndex].irsView == 1 ? '#1cc0f3':'white'}" />
                                                    <Icon class="tools-icon" custom="iconfont icon-mini-note" title="Mini-Note" @click="toggleIrsView(index,rtIndex,2)" :style="{color: recordData[index].pageRecorde[rtIndex].irsView == 2 ? '#1cc0f3':'white'}" />
                                                </div>
                                                <!--数据统计-->
                                                <div v-show="recordData[index].pageRecorde[rtIndex].irsView == 0 || !recordData[index].pageRecorde[rtIndex].irsView" class="animated fadeIn">
                                                    <OptionBar></OptionBar>
                                                    <CorrectRate></CorrectRate>
                                                </div>
                                                <!--作答详情-->
                                                <div v-show="recordData[index].pageRecorde[rtIndex].irsView == 1" class="animated fadeIn">
                                                    <div class="flop-student-item">
                                                        <span class="option-tag">A:</span>
                                                        <span class="student-tag" v-for="(item,index) in (pageNum + 22)" :key="index" title="李月林">{{index}}</span>
                                                    </div>
                                                    <div class="flop-student-item">
                                                        <span class="option-tag">B:</span>
                                                        <span class="student-tag" style="background:#1cc0f3;" :key="index" v-for="(item,index) in (pageNum + 22)" title="李月林">{{index}}</span>
                                                    </div>
                                                    <div class="flop-student-item">
                                                        <span class="option-tag">C:</span>
                                                        <span class="student-tag" v-for="(item,index) in (pageNum + 22)" :key="index" title="李月林">{{index}}</span>
                                                    </div>
                                                    <div class="flop-student-item">
                                                        <span class="option-tag">D:</span>
                                                        <span class="student-tag" :key="index" v-for="(item,index) in (pageNum + 22)" title="李月林">{{index}}</span>
                                                    </div>
                                                </div>
                                                <!--Mini-Note-->
                                                <div v-show="recordData[index].pageRecorde[rtIndex].irsView == 2" class="animated fadeIn">
                                                    <EmptyData textContent="没有学生提交Mini-Note"></EmptyData>
                                                </div>
                                                <span class="answer-time">00:03:58</span>

                                            </div>
                                            <Icon type="ios-people" class="question-icon" />
                                        </div>
                                    </div>
                                    <!--飞讯-->
                                    <div v-else-if="rtItem.type == 'msg' && (typeIndex == 'all' || typeIndex == 'msg')" class="record-split">
                                        <div class="question-record-item" style="display:none;">
                                            <span class="question-icon">Q</span>
                                            <div class="question-data-wrap">
                                                <span class="question-time">00:03:58</span>
                                            </div>
                                        </div>
                                        <div class="answer-record-item">
                                            <div class="answer-data-wrap msg-data-wrap">
                                                <vuescroll>
                                                    <p class="message-info" :key="index" v-for="(item,index) in (pageNum + 22)">
                                                        <span class="student-name">李月林：</span>
                                                        <span>犯得上广泛事故发生的广东省感到十分广东佛山古典风格的四个</span>
                                                    </p>
                                                </vuescroll>
                                            </div>
                                            <span class="question-icon">A</span>
                                        </div>
                                    </div>
                                    <!--图片-->
                                    <div v-else-if="rtItem.type == 'img' && (typeIndex == 'all' || typeIndex == 'img')" class="record-split">
                                        <div class="question-record-item">
                                            <span class="question-icon">Q</span>
                                            <div class="question-data-wrap">
                                                <p class="text-label">教師推送了一張圖: </p>
                                                <img height="200" src="https://teammodelostest.blob.core.chinacloudapi.cn/teammodelcontest/common/20200213/%E9%86%8D%E6%91%A9%E8%B1%86_%E8%B1%86%E5%AD%90%E5%BE%BD%E7%AB%A0_20200213154333.png" @click="openViewer('https://teammodelostest.blob.core.chinacloudapi.cn/teammodelcontest/common/20200213/%E9%86%8D%E6%91%A9%E8%B1%86_%E8%B1%86%E5%AD%90%E5%BE%BD%E7%AB%A0_20200213154333.png')" />
                                                <span class="question-time">00:03:58</span>
                                            </div>
                                        </div>
                                        <div class="answer-record-item">
                                            <div class="answer-data-wrap">
                                                <span class="answer-time">00:03:58</span>
                                                <p class="text-label">学生上传图片: </p>
                                                <div class="student-img-box">
                                                    <img @click="openViewer('https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas)" width="120" :src="'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas" />
                                                    <p class="img-info">第一组</p>
                                                </div>
                                                <div class="student-img-box">
                                                    <img @click="openViewer('https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas)" width="120" :src="'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas" />
                                                    <p class="img-info">第二组</p>
                                                </div>
                                                <div class="student-img-box">
                                                    <img @click="openViewer('https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas)" width="120" :src="'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas" />
                                                    <p class="img-info">第三组</p>
                                                </div>
                                                <div class="student-img-box">
                                                    <img @click="openViewer('https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas)" width="120" :src="'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas" />
                                                    <p class="img-info">第四组</p>
                                                </div>
                                                <div class="student-img-box">
                                                    <img @click="openViewer('https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas)" width="120" :src="'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas" />
                                                    <p class="img-info">第五组</p>
                                                </div>
                                                <div class="student-img-box">
                                                    <img @click="openViewer('https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas)" width="120" :src="'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas" />
                                                    <p class="img-info">第六组</p>
                                                </div>
                                            </div>
                                            <span class="question-icon">A</span>
                                        </div>
                                    </div>
                                    <!--链接-->
                                    <div v-else-if="rtItem.type == 'link' && (typeIndex == 'all' || typeIndex == 'link')" class="record-split">
                                        <div class="question-record-item">
                                            <span class="question-icon">Q</span>
                                            <div class="question-data-wrap">
                                                <span class="question-time">00:03:58</span>
                                                <p class="text-label">教師推送了一个链接: </p>
                                                <a target="_blank" href="https://www.habook.com.cn/">https://www.habook.com.cn/</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <EmptyData v-if="recordDataShow.length == 0"></EmptyData>
                    </vuescroll>
                </div>

            </div>
        </vuescroll>
        <div v-if="openImageViewer" class="image-viewer" @click="closeViewer()">
            <Icon type="md-close" class="close-icon" @click="closeViewer()" />
            <img :src="viewUrl" class="animated fadeIn" @click.stop />
        </div>
        <div v-if="openHtexViewer" class="image-viewer htex-viewer">
            <Icon type="md-close" class="close-icon" @click="openHtexViewer = false" />
            <DrawHTEX :mapJson="mapJson" class="animated fadeIn" :height="800" @click.stop></DrawHTEX>
            <div class="viewer-page-wrap animated fadeIn" :style="{width:(800 / mapJson.height * mapJson.width)+'px'}">
                <Page :total="120" size="small" :current.sync="curPage" show-elevator show-total @on-change="getCurHTEX">
                    <span>{{curPage}}/12</span>
                </Page>
            </div>
        </div>
        <Modal v-model="uploadStatus"
               title="上传附件"
               class-name="dark-iview-modal dark-iview-select">
            <span style="color:white;">附件类型：</span>
            <Select v-model="fileType" style="width:418px;" placeholder="请选择附件类型">
                <Option v-for="(item,index) in fileTypeList" :value="item" :key="index">{{ item }}</Option>
            </Select>
            <UploadFile class="upload-area" @successData="getFileUrl" :sasString="sasString" :urlString="urlString" :folder="folder" :containerName="containerName" :quality="1"></UploadFile>
        </Modal>
    </div>
</template>
<script>
    import OptionBar from './OptionCount.vue'
    import CorrectRate from './CorrectRate.vue'
    import DrawHTEX from './DrawHTEX.vue'
    export default {
        components: {
            OptionBar, CorrectRate, DrawHTEX
        },
        data() {
            return {
                mapJson: {},
                moStatus: false,
                markers: [
                    { time: 1, text: "第1页", page: 1 },
                    { time: 100, text: "第2页", page: 2 },
                    { time: 300, text: "第3页", page: 3 },
                    { time: 400, text: "第4页", page: 4 },
                    { time: 450, text: "第2页", page: 2 },
                    { time: 600, text: "第5页", page: 5 },
                    { time: 650, text: "第6页", page: 6 },
                    { time: 900, text: "第7页", page: 7 },
                    { time: 1000, text: "第8页", page: 8 },
                    { time: 1090, text: "第9页", page: 9 },
                    { time: 1400, text: "第10页", page: 10 },
                    { time: 1500, text: "第11页", page: 11 },
                    { time: 2000, text: "第12页", page: 12 },
                ],
                curPage: 1,
                schoolSas: '',
                teacherSas: '',
                viewUrl: '',
                openHtexViewer: false,
                openImageViewer: false,
                irsView: 0,
                recordDataShow: [],
                recordData: [
                    {
                        pageNum: 1,
                        showFilter: true,
                        pageRecorde: [
                            {
                                type: 'irs',
                                img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/题目.png?sv=2019-07-07&st=2020-09-10T01%3A52%3A29Z&se=2020-09-11T02%3A22%3A29Z&sr=c&sp=rcwl&sig=8ctTVWXl3y%2B70iGFbs5o2ZTtQQpkWDN28GaMsNRmdhg%3D',
                                optionData: {

                                },
                                correctData: {

                                },
                                miniNote: {

                                },
                                students: [

                                ]
                            },
                            {
                                type: 'img',
                                push: [
                                    'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/res/20170822170818_d41d8cd98f00b204e9800998ecf8427e_8.jpeg?' + this.schoolSas
                                ],
                                receive: [
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第一组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第二组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第三组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第四组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第五组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第六组'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        pageNum: 2,
                        showFilter: true,
                        pageRecorde: [
                            {
                                type: 'irs',
                                img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/题目.png?sv=2019-07-07&st=2020-09-10T01%3A52%3A29Z&se=2020-09-11T02%3A22%3A29Z&sr=c&sp=rcwl&sig=8ctTVWXl3y%2B70iGFbs5o2ZTtQQpkWDN28GaMsNRmdhg%3D',
                                optionData: {

                                },
                                correctData: {

                                },
                                miniNote: {

                                },
                                students: [

                                ]
                            },
                            {
                                type: 'img',
                                push: [
                                    'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/res/20170822170818_d41d8cd98f00b204e9800998ecf8427e_8.jpeg?' + this.schoolSas
                                ],
                                receive: [
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第一组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第二组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第三组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第四组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第五组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第六组'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        pageNum: 4,
                        pageRecorde: [
                            {
                                type: 'msg',
                                push: '',
                                receive: [
                                    {
                                        name: '李月林',
                                        text: '为加速培养醍摩豆智慧教育专业人才，醍摩豆课程体系函盖醍摩豆、智连环、教师专业发展、醍摩豆AI智慧学校、智慧教育理念等五大系列课程，以培养醍摩豆智慧教育技术专家、智慧课堂教学专家、AI智慧学校辅导专家，以及促进智慧教师专业发展，提升智慧教育理念为核心目标。'
                                    },
                                    {
                                        name: '李月林',
                                        text: '为加速培养醍摩豆智慧教育专业人才，醍摩豆课程体系函盖醍摩豆、智连环、教师专业发展、醍摩豆AI智慧学校、智慧教育理念等五大系列课程，以培养醍摩豆智慧教育技术专家、智慧课堂教学专家、AI智慧学校辅导专家，以及促进智慧教师专业发展，提升智慧教育理念为核心目标。'
                                    },
                                    {
                                        name: '李月林',
                                        text: '为加速培养醍摩豆智慧教育专业人才，醍摩豆课程体系函盖醍摩豆、智连环、教师专业发展、醍摩豆AI智慧学校、智慧教育理念等五大系列课程，以培养醍摩豆智慧教育技术专家、智慧课堂教学专家、AI智慧学校辅导专家，以及促进智慧教师专业发展，提升智慧教育理念为核心目标。'
                                    },
                                    {
                                        name: '李月林',
                                        text: '为加速培养醍摩豆智慧教育专业人才，醍摩豆课程体系函盖醍摩豆、智连环、教师专业发展、醍摩豆AI智慧学校、智慧教育理念等五大系列课程，以培养醍摩豆智慧教育技术专家、智慧课堂教学专家、AI智慧学校辅导专家，以及促进智慧教师专业发展，提升智慧教育理念为核心目标。'
                                    }
                                ]
                            },
                            {
                                type: 'link',
                                push: [
                                    'https://www.habook.com.cn/course.php'
                                ],
                                receive: [

                                ]
                            }
                        ]
                    },
                    {
                        pageNum: 2,
                        showFilter: true,
                        pageRecorde: [
                            {
                                type: 'irs',
                                img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/题目.png?sv=2019-07-07&st=2020-09-10T01%3A52%3A29Z&se=2020-09-11T02%3A22%3A29Z&sr=c&sp=rcwl&sig=8ctTVWXl3y%2B70iGFbs5o2ZTtQQpkWDN28GaMsNRmdhg%3D',
                                optionData: {

                                },
                                correctData: {

                                },
                                miniNote: {

                                },
                                students: [

                                ]
                            },
                            {
                                type: 'irs',
                                img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/题目.png?sv=2019-07-07&st=2020-09-10T01%3A52%3A29Z&se=2020-09-11T02%3A22%3A29Z&sr=c&sp=rcwl&sig=8ctTVWXl3y%2B70iGFbs5o2ZTtQQpkWDN28GaMsNRmdhg%3D',
                                optionData: {

                                },
                                correctData: {

                                },
                                miniNote: {

                                },
                                students: [

                                ]
                            }
                        ]
                    },
                    {
                        pageNum: 6,
                        pageRecorde: [
                            {
                                type: 'irs',
                                img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/题目.png?sv=2019-07-07&st=2020-09-10T01%3A52%3A29Z&se=2020-09-11T02%3A22%3A29Z&sr=c&sp=rcwl&sig=8ctTVWXl3y%2B70iGFbs5o2ZTtQQpkWDN28GaMsNRmdhg%3D',
                                optionData: {

                                },
                                correctData: {

                                },
                                miniNote: {

                                },
                                students: [

                                ]
                            },
                            {
                                type: 'img',
                                push: [
                                    'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/res/20170822170818_d41d8cd98f00b204e9800998ecf8427e_8.jpeg?' + this.schoolSas
                                ],
                                receive: [
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第一组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第二组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第三组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第四组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第五组'
                                    },
                                    {
                                        img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg?' + this.schoolSas,
                                        label: '第六组'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        pageNum: 8,
                        pageRecorde: [
                            {
                                type: 'msg',
                                push: '',
                                receive: [
                                    {
                                        name: '李月林',
                                        text: '为加速培养醍摩豆智慧教育专业人才，醍摩豆课程体系函盖醍摩豆、智连环、教师专业发展、醍摩豆AI智慧学校、智慧教育理念等五大系列课程，以培养醍摩豆智慧教育技术专家、智慧课堂教学专家、AI智慧学校辅导专家，以及促进智慧教师专业发展，提升智慧教育理念为核心目标。'
                                    },
                                    {
                                        name: '李月林',
                                        text: '为加速培养醍摩豆智慧教育专业人才，醍摩豆课程体系函盖醍摩豆、智连环、教师专业发展、醍摩豆AI智慧学校、智慧教育理念等五大系列课程，以培养醍摩豆智慧教育技术专家、智慧课堂教学专家、AI智慧学校辅导专家，以及促进智慧教师专业发展，提升智慧教育理念为核心目标。'
                                    },
                                    {
                                        name: '李月林',
                                        text: '为加速培养醍摩豆智慧教育专业人才，醍摩豆课程体系函盖醍摩豆、智连环、教师专业发展、醍摩豆AI智慧学校、智慧教育理念等五大系列课程，以培养醍摩豆智慧教育技术专家、智慧课堂教学专家、AI智慧学校辅导专家，以及促进智慧教师专业发展，提升智慧教育理念为核心目标。'
                                    },
                                    {
                                        name: '李月林',
                                        text: '为加速培养醍摩豆智慧教育专业人才，醍摩豆课程体系函盖醍摩豆、智连环、教师专业发展、醍摩豆AI智慧学校、智慧教育理念等五大系列课程，以培养醍摩豆智慧教育技术专家、智慧课堂教学专家、AI智慧学校辅导专家，以及促进智慧教师专业发展，提升智慧教育理念为核心目标。'
                                    }
                                ]
                            },
                            {
                                type: 'link',
                                push: [
                                    'https://www.habook.com.cn/course.php'
                                ],
                                receive: [

                                ]
                            }
                        ]
                    },
                    {
                        pageNum: 10,
                        pageRecorde: [
                            {
                                type: 'irs',
                                img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/题目.png?sv=2019-07-07&st=2020-09-10T01%3A52%3A29Z&se=2020-09-11T02%3A22%3A29Z&sr=c&sp=rcwl&sig=8ctTVWXl3y%2B70iGFbs5o2ZTtQQpkWDN28GaMsNRmdhg%3D',
                                optionData: {

                                },
                                correctData: {

                                },
                                miniNote: {

                                },
                                students: [

                                ]
                            },
                            {
                                type: 'irs',
                                img: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/题目.png?sv=2019-07-07&st=2020-09-10T01%3A52%3A29Z&se=2020-09-11T02%3A22%3A29Z&sr=c&sp=rcwl&sig=8ctTVWXl3y%2B70iGFbs5o2ZTtQQpkWDN28GaMsNRmdhg%3D',
                                optionData: {

                                },
                                correctData: {

                                },
                                miniNote: {

                                },
                                students: [

                                ]
                            }
                        ]
                    }
                ],
                fileType: '',
                fileTypeList: [
                    '课件',
                    '教案',
                    '其他'
                ],
                sasString: '',
                urlString: '',
                folder: '',
                containerName: '',
                filterStatus: false,
                uploadStatus: false,
                typeIndex: 'all',
                pageNum: 10,
                playerOptions: {
                    height: "450px",
                    controlBar: {
                        durationDisplay: true, // 总时间
                        currentTimeDisplay: true, 
                       
                    },
                    html5: {
                         nativeControlsForTouch: true,
                    },
                    inactivityTimeout: 1,
                    nativeVideoTracks: false,
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    controls: true, //控制条
                    preload: 'auto', //视频预加载
                    muted: false, //默认情况下将会消除任何音频。
                    loop: false, //导致视频一结束就重新开始。
                    language: 'zh-CN',
                    //aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    //fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        src: 'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/math.mp4'
                    }],
                    notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                },
            }
        },
        methods: {
            viewHtex() {
                this.openHtexViewer = true
                this.$refs.videoPlayer.player.pause()
            },
            //点击视频切片
            getCurPage(page) {
                this.mapJson = require('./data/' + page + '.json')
                this.$refs["datawrap"].scrollIntoView('#page' + page, 500)
                this.$refs.videoPlayer.player.play()
                this.curPage = page
            },
            //点击课件page
            getCurHTEX(page) {
                this.mapJson = require('./data/' + page + '.json')
                //视频时间定位
                let pageInfo = this.markers.filter(item => {
                        return item.page == page
                    })
                    this.$refs.videoPlayer.player.currentTime(pageInfo[0].time)
                if (!this.openHtexViewer) {
                    this.$refs.videoPlayer.player.play()
                } else {
                    this.$refs.videoPlayer.player.pause()
                }
                //互动记录滚动
                this.$refs["datawrap"].scrollIntoView('#page' + page, 500)
            },
            //点击互动记录页面tag
            toVideo(page, e) {
                //页面滚动
                let dataLoacation = this.$refs["datawrap"].getPosition()
                let pageLocaltion = this.$refs["pagewrap"].getPosition()
                let y = e.pageY - 665 + pageLocaltion.scrollTop + dataLoacation.scrollTop
                this.$nextTick(() => {
                    this.$refs["pagewrap"].scrollTo(
                        {
                            x: 0,
                            y: 0
                        }
                    )
                    this.$refs["datawrap"].scrollTo(
                        {
                            x: 0,
                            y: y
                        }
                    )
                })
                //视频时间定位
                let pageInfo = this.markers.filter(item => {
                    return item.page == page
                })
                this.$refs.videoPlayer.player.currentTime(pageInfo[0].time)
                //课件页面定位
                this.mapJson = require('./data/' + page + '.json')
            },
            /**
             * 获取blob授权信息
             * */
            async getSasStr() {
                //let sasRes1 = await this.$tools.getSchoolSas()
                //let sasRes2 = await this.$tools.getPrivateSas()

                //if (sasRes1) {
                //    this.schoolSas = sasRes1.sas
                //    this.playerOptions.sources[0].src += this.schoolSas
                //} else {
                //    this.$Message.error('获取Blob授权失败')
                //}
                //if (sasRes2) {
                //    this.teacherSas = sasRes2.sas
                //} else {
                //    this.$Message.error('获取Blob授权失败')
                //}
                this.$api.blob.blobSasRCW({
                    name: "1595321354",
                    role: 'teacher'
                }).then(
                    (res) => {
                        if (!res.error) {
                            res.sas = '?' + res.sas
                            this.teacherSas = res.sas
                        } else {
                            this.$Message.error('获取Blob授权失败')
                        }
                    },
                    (err) => {
                        this.$Message.error('获取Blob授权失败')
                    }
                )

                this.$api.blob.blobSasRCW({
                    name: 'hbcn',
                    role: 'school'
                }).then(
                    (res) => {
                        if (!res.error) {
                            res.sas = '?' + res.sas
                            this.schoolSas = res.sas
                            this.playerOptions.sources[0].src += this.schoolSas
                        } else {
                            this.$Message.error('获取Blob授权失败')
                        }
                    },
                    (err) => {
                        this.$Message.error('获取Blob授权失败')
                    }
                )
            },
            //互动类型筛选
            filterType(type) {
                this.typeIndex = type
                if (type != 'all') {
                    this.recordDataShow.length = 0
                    for (let item of this.recordData) {
                        let res = item.pageRecorde.filter(item => {
                            return item.type == type
                        })
                        if (res.length > 0) {
                            this.recordDataShow.push(item)
                        } else {
                            continue
                        }
                    }
                } else {
                    this.recordDataShow = JSON.parse(JSON.stringify(this.recordData))
                }

            },
            //页面筛选
            filterPage() {
                this.filterStatus = !this.filterStatus
                if (this.filterStatus) {
                    this.recordDataShow = this.recordData.filter(item => {
                        return item.pageNum == 2
                    })
                } else {
                    this.recordDataShow = JSON.parse(JSON.stringify(this.recordData))
                }
            },
            //查看图片
            openViewer(url) {
                this.openImageViewer = true
                this.viewUrl = url
            },
            closeViewer() {
                this.openImageViewer = false
            },
            //切换irs呈现内容
            toggleIrsView(pageIndex, recordIndex, type) {
                this.$set(this.recordData[pageIndex].pageRecorde[recordIndex], 'irsView', type)
            },
            getFileUrl() {

            },
            goBack() {
                this.$router.push({
                    path: '/home/myCourse'
                })
            },
        },
        created() {
            this.recordDataShow = JSON.parse(JSON.stringify(this.recordData))
            this.getSasStr()
            this.mapJson = require('./data/1.json')
            console.log(this.mapJson)
        }
    }
</script>
<style lang="less" scoped>
    @import "./ClassRecord.less";
</style>
<style>
    .class-content .vjs-progress-holder {
        font-size:10px !important;
    }
    .mouse-over-status .vjs-control-bar {
        opacity: 1 !important;
    }

    .interaction-record-wrap .__view {
        padding: 40px 100px 20px 50px;
    }

    .class-content .video-js .vjs-big-play-button {
        top: 50%;
        left: 50%;
        margin-left: -40px;
        margin-top: -20px;
    }

    .class-content .vjs_video_3-dimensions.vjs-fluid {
        padding-top: 0;
    }

    .class-content .video-js.vjs-fluid, .class-content .video-js.vjs-16-9, .class-content .video-js.vjs-4-3 {
        height: 450px;
    }

    .upload-area .ivu-upload-drag {
        background: none;
        box-shadow: 5px 5px 500px #606060 inset;
        color: white;
    }

    .upload-area .upload-text {
        margin-bottom: 30px;
        font-size: 25px;
    }

    .upload-area .upload-icon {
        margin-top: 30px;
        font-size: 50px;
    }

    .video-player-box .vjs-volume-panel {
        display:none;
    }
    
    .page-wrap .ivu-page-next a, .page-wrap .ivu-page-prev a, .page-wrap .ivu-page-item a {
        color: white;
    }

    .page-wrap .ivu-page-item, .page-wrap .ivu-page-next, .page-wrap .ivu-page-prev {
        background: unset;
    }

        .page-wrap .ivu-page-item-active a, .page-wrap .ivu-page-item:hover a {
            color: #2d8cf0;
        }
</style>