<template>
    <div class="hiteachNote-content">
        <br />
            <EventBasicInfo from="hiteach" />
            <div class="title-rect-group">
                <div class="title-rect" />
                <h2 class="title-rect-name">{{$t('studentWeb.hiteachNote.material')}}</h2>
            </div>
            <div ref="pagewrap">


                <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 class="video-player-box" :markers="markers"
                                   ref="videoPlayer"
                                   :options="playerOptions"
                                   :playsinline="true"
                                   @getCurPage="getCurPage">
                    </video-player2>
                </div>
                <div class="title-rect-group">
                    <div class="title-rect" />
                    <h2 class="title-rect-name">
                        {{$t('studentWeb.hiteachNote.classInteractionRecord')}}
                        <span class="feedbackNum">10</span>
                    </h2>
                </div>
                <div class="dec">
                    <ul class="message-filter">
                        <li @click="showdoc()">
                            <Icon :class="{ 'select-filter': onlyShowdoc == true }" type="md-document" title="文件" />
                        </li>
                        <li @click="showImg()">
                            <Icon :class="{ 'select-filter': onlyShowImg == true }" type="ios-image" title="图片" />
                        </li>
                        <li @click="showShareLink()">
                            <Icon :class="{ 'select-filter': onlyShowShareLink == true }" type="ios-link" title="超链接" />
                        </li>
                        <li @click="showQa()">
                            <span :class="{ 'select-filter': onlyShowQA == true}" style="font-size:32px;line-height:30px;" title="即问即答">Q</span>
                        </li>
                    </ul>
                    <Row :gutter="0">
                        <i-col :xs="24" :sm="24" :md="24" :lg="24">
                            <vuescroll ref="datawrap">
                                <div class="message-area">
                                    <div v-if="openImageViewer == true" class="image-viewer">
                                        <Icon type="md-close" class="close-icon" @click="closeViewer()" />

                                        <img :src="`https://source.unsplash.com/random/?water${item}`" />
                                    </div>
                                    <div class="message-item" v-if="isSelected('Qa')|| showAll()">
                                        <img class="message-avatar"
                                             src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />

                                        <div class="message-content">
                                            <div class="messagetoPPT-tag" @click="toVideo(3,$event)">PDF第3頁</div>
                                            <div class="triangle"></div>
                                            <p class="user-name">Nancy Chen</p>
                                            <p class="message-text">
                                                即問即答(多選)：
                                                <br />
                                                <span class="answer-text wrong-ans">
                                                    ABC
                                                    <div class="divide-line" />
                                                </span>
                                                參考答案：
                                                <br />
                                                <span class="answer-text">BＤ</span>
                                            </p>

                                            <p class="message-time">00:20:58</p>
                                        </div>
                                    </div>
                                    <div class="teacher-item" v-if="isSelected('Nomal')|| showAll()">
                                        <div class="message-content">
                                            <div class="triangle"></div>
                                            <p class="user-name">Mary Wu (Teacher)</p>
                                            <p class="message-text">詳見課本Page31</p>
                                            <p class="message-time">00:20:58</p>
                                        </div>
                                        <img class="message-avatar"
                                             src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
                                    </div>
                                    <div class="message-item" v-if="isSelected('Qa')|| showAll()">
                                        <img class="message-avatar"
                                             src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                                        <div class="message-content">
                                            <div class="messagetoPPT-tag" @click="toVideo(8,$event)">PDF第8頁</div>
                                            <div class="triangle"></div>
                                            <p class="user-name">Nancy Chen</p>
                                            <p class="message-text">
                                                即問即答(多選)：
                                                <br />
                                                <span class="answer-text">
                                                    BCD<div class="divide-line" />
                                                    ✔︎ 答案正確！
                                                    <br />
                                                </span>
                                            </p>
                                            <p class="message-time">00:20:58</p>
                                        </div>
                                    </div>
                                    <div class="teacher-item" v-if="isSelected('doc')|| showAll()">
                                        <div class="message-content">
                                            <div class="triangle"></div>
                                            <p class="user-name">Mary Wu (Teacher)</p>
                                            <p class="message-text">
                                                <span class="message-link">
                                                    <svg-icon class="link-icon" icon-class="doc2" />teacher_shared.pdf
                                                </span>
                                            </p>
                                            <p class="message-time">00:20:58</p>
                                        </div>
                                        <img class="message-avatar"
                                             src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
                                    </div>
                                    <div class="message-item" v-if="isSelected('Img')||isSelected('Qa')|| showAll()">
                                        <img class="message-avatar"
                                             src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />

                                        <div class="message-content">
                                            <div class="messagetoPPT-tag" @click="toVideo(11,$event)">PDF第11頁</div>
                                            <div class="triangle"></div>
                                            <p class="user-name">Nancy Chen</p>
                                            <p class="message-text">
                                                即問即答：
                                                <br />
                                                <img @click="openViewer(item)"
                                                     src="https://source.unsplash.com/random/320x200/?water" />
                                                <span class='answer-text'>
                                                    <div class="divide-line" />
                                                    ✔︎ 答案正確！
                                                </span>
                                            </p>
                                            <p class="message-time">00:20:58</p>
                                        </div>
                                    </div>
                                    <div class="teacher-item" v-if="isSelected('Link')|| showAll()">
                                        <div class="message-content">
                                            <div class="triangle"></div>
                                            <p class="user-name">Mary Wu (Teacher)</p>
                                            <div class="message-text">
                                                <a class="message-link"
                                                   href="https://www.habook.com/zh-tw"
                                                   target="_blank">https://www.habook.com/zh-tw</a>

                                                <div class="link-item">
                                                    <ul class="link-content">
                                                        <li>
                                                            <img class="link-img" :src="`https://source.unsplash.com/random/300x200/?water${item}`" />
                                                        </li>
                                                        <li class="link-text">
                                                            <a href="https://www.habook.com/zh-tw" target="_blank">
                                                                <p class="title">分享連結 {{ item }}</p>
                                                                <p>https://www.habook.com/zh-tw</p>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <p class="message-time">00:20:58</p>
                                        </div>
                                        <img class="message-avatar"
                                             src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
                                    </div>
                                    <div class="message-item" v-if="isSelected('Qa')|| showAll()">
                                        <img class="message-avatar"
                                             src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />

                                        <div class="message-content">
                                            <div class="triangle"></div>
                                            <p class="user-name">Nancy Chen</p>
                                            <p class="message-text">
                                                即問即答(多選)：
                                                <br />
                                                <span class="answer-text">
                                                    AD
                                                    <div class="divide-line" />
                                                    ✔︎ 答案正確！
                                                </span>
                                            </p>
                                            <p class="message-time">00:20:58</p>
                                        </div>
                                    </div>
                                    <div class="teacher-item" v-if="isSelected('Img')|| showAll()">
                                        <div class="message-content">
                                            <div class="triangle"></div>
                                            <p class="user-name">Mary Wu (Teacher)</p>
                                            <p class="message-text">
                                                教師從Hiteach推送了一張圖:
                                                <br />
                                                <img @click="openViewer(item)"
                                                     src="https://source.unsplash.com/random/320x200/?line" />
                                            </p>
                                            <p class="message-time">00:20:58</p>
                                        </div>
                                        <img class="message-avatar"
                                             src="https://images.unsplash.com/photo-1578635374554-b07c9b1619b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
                                    </div>
                                    <div class="message-item group-item" v-if="isSelected('Qa')|| showAll()">
                                        <div class="group-avatar">
                                            <svg-icon icon-class="group" class="group-icon" />
                                        </div>

                                        <div class="message-content">
                                            <div class="triangle"></div>
                                            <p class="user-name">Group 5</p>
                                            <p class="message-text">
                                                分組即問即答(多選)：
                                                <br />
                                                <span class="answer-text">
                                                    ADE
                                                    <div class="divide-line" />
                                                    ✔︎ 答案正確！
                                                </span>
                                            </p>
                                            <p class="message-time">00:20:58</p>
                                        </div>
                                    </div>
                                    <div class="message-item" v-if="isSelected('Nomal')|| showAll()">
                                        <img class="message-avatar"
                                             src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />

                                        <div class="message-content">
                                            <div class="triangle"></div>
                                            <p class="user-name">Nancy Chen</p>
                                            <p class="message-text">
                                                問題討論第28題答案有誤？
                                                <br />
                                            </p>
                                            <p class="message-time">00:20:58</p>
                                        </div>
                                    </div>
                                </div>
                            </vuescroll>
                        </i-col>
                    </Row>
                </div>
            </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 style="margin-top:5px;color:#ffffff" :total="120" size="small" :current.sync="curPage" show-elevator show-total @on-change="getCurHTEX">
                        <span>{{curPage}}/12</span>
                    </Page>
                </div>
            </div>
</div>

</template>

<script>
    import VideoPlayer from "./VideoPlayer";
    import EventBasicInfo from "../EventBasicInfo";
    import { Random } from "mockjs";
    import DrawHTEX from '@/view/classrecord/DrawHTEX.vue'
    export default {
        name: "HiteachNoteContent",
        data() {
            return {
                moStatus:false,
                openHtexViewer: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,
                mapJson: {},
                schoolSas: '',
                playerOptions: {
                    height: "450px",
                    controlBar: {
                        durationDisplay: true, // 总时间
                        currentTimeDisplay: true,
                    },
                    html5: {
                        nativeControlsForTouch: true,
                    },
                    inactivityTimeout: 1,
                    nativeVideoTracks: false,
                    playbackRates: [0.5, 1.0, 1.25, 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无法播放媒体源时显示的默认信息。
                },
                //新增数据
                currentfilterType: "",
                onlyShowdoc: false,
                onlyShowImg: false,
                onlyShowShareLink: false,
                onlyShowQA: false,
                onlyShowQARight: false,
                onlyShowQAWrong: false,
                openImageViewer: false,
                pageNow: 0,
                item: ""
            };
        },
        watch: {},
        components: {
            EventBasicInfo,
            VideoPlayer,
            DrawHTEX
        },
        created() {
            this.mapJson = require('./data/1.json')
            console.log(this.mapJson)
            this.getSasStr()
        },
        methods: {
            toVideo(page, e) {
                //页面滚动
                console.log(this.$refs)
                //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')
            },
            //点击视频切片
            getCurPage(page) {
                this.mapJson = require('./data/' + page + '.json')
                this.$refs["datawrap"].scrollIntoView('#page' + page, 500)
                this.$refs.videoPlayer.player.play()
                this.curPage = page
            },
            //展示HTEX文件
            viewHtex() {
                this.openHtexViewer = true
                this.$refs.videoPlayer.player.pause()
            },
            //点击课件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)
            },
            /**
             * 获取blob授权信息
             * */
            async getSasStr() {
                console.log(this.$store.state)
                let sasRes1 = await this.$tools.getSchoolSas()
                let sasRes2 = await this.$tools.getPrivateSas()
                console.log(sasRes1, sasRes2)
                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授权失败')
                }
            },
            //新增功能
            isSelected(type) {
                if (type == this.currentfilterType) {
                    //console.log(type);

                    return true;
                } else return false;
            },
            showAll() {
                if (
                    this.onlyShowdoc == false &&
                    this.onlyShowImg == false &&
                    this.onlyShowShareLink == false &&
                    (this.onlyShowQA == false && this.onlyShowQAWrong == false && this.onlyShowQARight == false)
                ) {
                    return true;
                } else return false;
            },
            showdoc() {
                this.onlyShowdoc = !this.onlyShowdoc;
                this.onlyShowImg = false;
                this.onlyShowShareLink = false;
                this.onlyShowQA = false;
                this.onlyShowQAWrong = false;
                this.onlyShowQARight = false;
                this.currentfilterType = "doc";
            },
            showImg() {
                this.onlyShowImg = !this.onlyShowImg;
                this.currentfilterType = "Img";
                this.onlyShowdoc = false;
                this.onlyShowShareLink = false;
                this.onlyShowQA = false;
                this.onlyShowQAWrong = false;
                this.onlyShowQARight = false;
            },
            showShareLink() {
                this.onlyShowShareLink = !this.onlyShowShareLink;
                this.currentfilterType = "Link";
                this.onlyShowImg = false;
                this.onlyShowdoc = false;
                this.onlyShowQA = false;
                this.onlyShowQAWrong = false;
                this.onlyShowQARight = false;
            },
            showQa() {
                this.onlyShowQA = !this.onlyShowQA;
                this.currentfilterType = "Qa";
                this.onlyShowImg = false;
                this.onlyShowShareLink = false;
                this.onlyShowdoc = false;
                this.onlyShowQARight = this.onlyShowQA;
                this.onlyShowQAWrong = this.onlyShowQA;

            },
            showQaRignt() {
                this.onlyShowQA = true;
                this.currentfilterType = "QaRight";
                this.onlyShowImg = false;
                this.onlyShowShareLink = false;
                this.onlyShowdoc = false;
                this.onlyShowQARight = this.onlyShowQA;
                this.onlyShowQAWrong = !this.onlyShowQA;


            },
            showQaWrong() {
                this.onlyShowQA = true;
                this.currentfilterType = "QaWrong";
                this.onlyShowImg = false;
                this.onlyShowShareLink = false;
                this.onlyShowdoc = false;
                this.onlyShowQAWrong = this.onlyShowQA;
                this.onlyShowQARight = !this.onlyShowQA;
            },


            onMessageMarkerClick(page) {
                console.log(page)
                //this.$store.commit("ChangeCurrentPdfPage", page);
                //document
                //    .querySelectorAll(".hiteachNote-content")[0]
                //    .scrollBy({ left: 0, top: -window.innerHeight, behavior: "smooth" }); //點擊信息的時間戳捲動回投影片的位置
            },
            openViewer: function (item) {
                this.openImageViewer = true;
                this.item = item;
            },
            closeViewer() {
                this.openImageViewer = false;
            },
            name: function () {
                return Random.name();
            },
        },
    };
</script>

<style scoped>
@import "~@/assets/student-web/component_styles/hiteachNote-content.less";

.hiteachNote-content .video-js {
  margin-top: 10px;
  border-radius: 4px;
  outline: none;
  width: 100%;
}
.vjs-marker {
  z-index: 10;
  /*改善與圖片檢視器彈窗之圖層先後*/
}
.slider {
  height: 400px;
  background-color: rgb(85, 85, 85);
  color: white;
  font-size: 40px;
  padding: 20px;
}

/*新增样式*/
    .mouse-over-status .vjs-control-bar {
        opacity: 1 !important;
    }


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

    .video-player-box .vjs-volume-panel {
        display: none;
    }

</style>
