<template>
    <!--Flop 翻牌-->
    <div class="flop">
        <!--cmy新写-->
        <!--初始页面-->
        <Row class="headerTollBox" v-if="fullscreen ==='0'">
            <Col span="2" /><button class="resetAns" @click="againanswer">重新作答</button></Col>
            <Col span="5" offset="5" v-if="Answerstatus === 0">
            <div class="triggerbox">
                <div :class='["allstudents",btnname ==="allstudents"? "pickonall":""]' v-if="status ==='default'|| status ==='list'" @click="accurate('allstudents')">全部人员:{{iconnum}}</div>
                <div :class='["unanswered-btn",btnname ==="unanswered-btn"? "pickonaun":""]' v-if="status ==='default' || status ==='list'" @click="accurate('unanswered-btn')">未答者:{{noanswernum}}</div>
                <div :class='["answerbtn",btnname ==="answerbtn"? "pickonaan":""]' v-if="status ==='default'|| status ==='list' " @click="accurate('answerbtn')">答题者:{{answernum}}</div>
            </div>
            </Col>
            <!--未设定答案之前 用户类别切换end-->
            <!--设定答案之后 用户类别切换-->
            <Col span="5" offset="5" v-if="Answerstatus === 1">
            <div class="triggerbox">
                <div :class='["result-allstudents",btnname ==="allstudents"? "pickonall":""]' v-if="status ==='default' || status ==='list'" @click="accurate('allstudents')">全部人员:{{iconnum}}</div>
                <div :class='["result-unanswered-btn",btnname ==="unanswered-btn"? "pickonaun":""]' v-if="status ==='default' || status ==='list' " @click="accurate('unanswered-btn')">未答者:{{noanswernum}}</div>
                <div :class='["result-answer-error",btnname ==="answer-error"? "pickonerror":""]' v-if="status ==='default'|| status ==='list' " @click="accurate('answer-error')">答错者:{{erroranswernum}}</div>
                <div :class='["result-answercorrect",btnname ==="answercorrect"? "pickonsuccess":""]' v-if="status ==='default'|| status ==='list' " @click="accurate('answercorrect')">答对者:{{rightanswernum}}</div>
            </div>
            </Col>
            <!--设定答案之后 用户类别切换end-->
            <Col span="1" offset="9" v-if="status ==='text' || status ==='num' || status ==='bar' || status ==='pie' || status ==='rank'"><div>&#32;</div></Col>
            <Col span="1" /><img :src="ShowHideanswer" v-if=" status ==='list'|| status ==='default'" :class="AnswerShowhide" @click="showhide(AnswerShowhide)" /></Col>
            <!--新用户提示icon end-->
            <!--点选后面的显示 全部人员 翻牌-->
            <Col span="6" :class="[statusshow?'thin':'']">
            <button @click="listbtn('list')" :class='["listicon",current ==="list"? "clickicon":""]'><svg-icon icon-class="switchover" /></button>
            <!-- <button @click="listbtn('text')" :class='["listicon",current ==="text"? "clickicon":""]'><svg-icon icon-class="Text-icons" /></button> -->
            <!--设定答案-->
            <Poptip placement="bottom" :popper-class="poptipStyle">
                <div :class='["listicon",current ==="num"? "clickicon":""]' @click="listbtn('num')" v-if="AnswerIconstyle ==='letter'"><svg-icon icon-class="SetAnsEn" /></div>
                <div :class='["listicon",current ==="num"? "clickicon":""]' @click="listbtn('num')" v-if="AnswerIconstyle ==='number'"><svg-icon icon-class="SetAns" /></div>
                <div class="api" slot="content">
                    <Result @poptipwidth="getpoptipwidth"></Result>
                </div>
            </Poptip>
            <!--设定答案end-->
            <div @click="listbtn('bar')" :class='["listicon",current ==="bar"? "clickicon":""]'><svg-icon icon-class="barchart" /></div>
            <div @click="listbtn('pie')" :class='["listicon",current ==="pie"? "clickicon":""]'><svg-icon icon-class="Piechart" /></div>
            <!--div @click="listbtn('rank')" :class='["listicon",current ==="rank"? "clickicon":""]'><svg-icon icon-class="rank" /></div-->
            </Col>
            <Col span="3" class="roller"><div classs="sliderbox" v-if="status ==='default'"><Slider v-model="value1"  :max="30" :step="5" show-stops @on-change="valuestyle()"></Slider></div></Col>
            <Col span="3">
            <div class="rightlisticon" @click="styleadjust(aspectRatio)"><svg-icon icon-class="full-screen" /></div>
            <div class="rightlisticon" @click="hiddenShow()"><svg-icon icon-class="Close" /></div>
            </Col>
            <Col span="24" offset="0">
            <ul class="studycard" v-if="status ==='default'" ref="getheight" :style="'height:'+ cssheightL +'px;'">
                <!--默认-->
                <li v-for="(item,index) in student" :key="index" :class="item.class" v-show="item.done && status ==='default'&& Answerstatus ===0" :style="'width:'+ widthvalue +'px;margin-left:'+ marginvalue +'px;height:'+widthvalue+'px;line-height:'+widthvalue+'px'">
                    <div :class="{'ans-show-stuno':AnswerShowhide === 'AnswerShow'&& item.option !== ''}">{{item.sort}}</div>
                    <div class="offimg" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
                    <!--作答答案-->
                    <div class="answer-default" v-if="AnswerShowhide === 'AnswerHide'&& item.option !== ''"><span>*</span></div>
                    <div class="answer-default-show" v-if="AnswerShowhide === 'AnswerShow'&& item.option !== ''"><span>{{item.option}}</span></div>
                    <div class="answer-default" v-if="item.option === ''"><span>   </span></div>
                    <!--作答答案end-->
                    <!--发言内容-->
                        <div class="q-pa-md">
                            <q-btn push class="statement-icon11" @click="angleshow()" v-if="item.statement !== ''">
                                <q-popup-proxy @before-hide="hideangleicon()" :offset="[65, -165]">
                                    <draggable class="list-group"
                                               @start="statementToimage"
                                               @end="stickupend"
                                               >
                                        <div class="pop-up" id="statementBox" @click="detailbtn($event)">
                                            {{item.statement}}
                                            <div class="statementInfo">--{{item.studentName}}</div>
                                        </div>
                                    </draggable>
                                </q-popup-proxy>
                            </q-btn>
                        </div>
                    <q-dialog v-model="alert" transition-show="rotate" transition-hide="rotate">
                        <q-card>
                            <q-card-section class="q-pt-none">
                                {{detailContent}}
                                <div class="detailbox">
                                    <div class="fr"><span>来自于：{{deatilName}}</span></div>
                                    <!--<div class="fr"><span>时间111：</span></div>-->
                                </div>
                            </q-card-section>
                        </q-card>
                    </q-dialog>
                    <!--发言内容end-->
                </li>
                <!--设定答案后的默认-->
                <li v-for="(item,index) in student" :key="index" :class="item.class" v-if="item.done && status ==='default'&& Answerstatus ===1 && AnswerShowhide === 'AnswerHide'" :style="'width:'+ widthvalue +'px;margin-left:'+ marginvalue +'px;height:'+widthvalue+'px;line-height:'+widthvalue+'px'">
                    <span>{{item.sort}}</span>
                    <div class="offimg" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
                    <!--作答答案-->
                    <div class="answer-default" v-if="AnswerShowhide === 'AnswerHide'&& item.option !== ''"><span>*</span></div>
                    <div class="answer-default" v-if="AnswerShowhide === 'AnswerShow'&& item.option !== ''"><span>{{item.option}}</span></div>
                    <div class="answer-default" v-if="item.option === ''"><span>   </span></div>
                    <!--作答答案end-->
                    <!--发言内容-->
                    <div class="q-pa-md">
                        <q-btn push class="statement-icon11" @click="angleshow()" v-if="item.statement !== ''">
                            <q-popup-proxy @before-hide="hideangleicon()" :offset="[65, -165]">
                                <draggable class="list-group"
                                           @start="statementToimage"
                                           @end="stickupend">
                                    <div class="pop-up" id="statementBox" @click="detailbtn($event)">
                                        {{item.statement}}
                                        <div class="statementInfo">--{{item.studentName}}</div>
                                    </div>
                                </draggable>
                            </q-popup-proxy>
                        </q-btn>
                    </div>
                    <q-dialog v-model="alert" transition-show="rotate" transition-hide="rotate">
                        <q-card>
                            <q-card-section class="q-pt-none">
                                {{detailContent}}
                                <div class="detailbox">
                                    <div class="fr"><span>来自于：{{deatilName}}</span></div>
                                    <!--<div class="fr"><span>时间111：</span></div>-->
                                </div>
                            </q-card-section>
                        </q-card>
                    </q-dialog>
                    <!--发言内容end-->
                </li>
                <li v-for="(item,index) in student" :key="index" :class="item.answerclass" v-if="item.done && status ==='default'&& Answerstatus===1 && AnswerShowhide ==='AnswerShow'" :style="'width:'+ widthvalue +'px;margin-left:'+ marginvalue +'px;height:'+widthvalue+'px;line-height:'+widthvalue+'px'">
                    <span>{{item.sort}}</span>
                    <div class="offimg" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
                    <!--作答答案 设定答案后-->
                    <div class="answer-default" v-if="AnswerShowhide === 'AnswerHide'&& item.option !== ''"><span>*</span></div>
                    <div class="answer-default" v-if="AnswerShowhide === 'AnswerShow'&& item.option !== ''"><span>{{item.option}}</span></div>
                    <div class="answer-default" v-if="item.option === ''"><span>   </span></div>
                    <!--作答答案 设定答案后end-->
                    <!--发言内容-->
                    <div class="q-pa-md">
                        <q-btn push class="statement-icon11" @click="angleshow()" v-if="item.statement !== ''">
                            <q-popup-proxy @before-hide="hideangleicon()" :offset="[65, -165]">
                                <draggable class="list-group"
                                           @start="statementToimage"
                                           @end="stickupend">
                                    <div class="pop-up" id="statementBox" @click="detailbtn($event)">
                                        {{item.statement}}
                                        <div class="statementInfo">--{{item.studentName}}</div>
                                    </div>
                                </draggable>
                            </q-popup-proxy>
                        </q-btn>
                    </div>
                    <q-dialog v-model="alert" transition-show="rotate" transition-hide="rotate">
                        <q-card>
                            <q-card-section class="q-pt-none">
                                {{detailContent}}
                                <div class="detailbox">
                                    <div class="fr"><span>来自于：{{deatilName}}</span></div>
                                    <!--<div class="fr"><span>时间111：</span></div>-->
                                </div>
                            </q-card-section>
                        </q-card>
                    </q-dialog>
                    <!--发言内容end-->
                </li>
            </ul>
            <!--名牌列表-->
            <ul class="vice-studyshowcard" v-if="status ==='list'" :style="'height:'+ cssheightL +'px;'">
                <!--未设置答案前-->
                <li :class="item.showcardclass" v-for="(item,index) in student" :key="index" v-if="item.done && status ==='list' && Answerstatus === 0">
                    <div class="leftimg">
                        <div class="idnumber">{{item.sort}}</div>
                        <div class="portrait"><img :src="item.headImg" /></div>
                        <div class="mpoff" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
                    </div>
                    <div class="righttext">
                        <div class="showhide-answer" v-if="AnswerShowhide === 'AnswerHide'&& item.option !== ''">*</div>
                        <div class="showhide-answer" v-if="AnswerShowhide === 'AnswerShow'&& item.option !== ''">{{item.option}}</div>
                        <div class="showhide-answer" v-if="item.option === ''">           </div>
                        <!--名牌发言-->
                        <div class="q-pa-md">
                            <q-btn push class="namebrand-pop" @click="angleshow()" v-if="item.statement !== ''">
                                <q-popup-proxy @before-hide="hideangleicon()" :offset="[90, -155]">
                                    <draggable class="list-group"
                                               @start="statementToimage"
                                               @end="stickupend">
                                        <div class="pop-up" id="statementBox" @click="detailbtn($event)">
                                            {{item.statement}}
                                            <div class="statementInfo">--{{item.studentName}}</div>
                                        </div>
                                    </draggable>
                                </q-popup-proxy>
                            </q-btn>
                        </div>
                        <q-dialog v-model="alert" transition-show="rotate" transition-hide="rotate">
                            <q-card>
                                <q-card-section class="q-pt-none">
                                    {{detailContent}}
                                    <div class="detailbox">
                                        <div class="fr"><span>来自于：{{deatilName}}</span></div>
                                        <!--<div class="fr"><span>时间111：</span></div>-->
                                    </div>
                                </q-card-section>
                            </q-card>
                        </q-dialog>
                        <!--名牌发言end-->
                        <div class="AnswerStudentname">{{item.studentName}}</div>
                    </div>
                </li>
                <!--未设置答案前end-->
                <!--设置答案后  答案隐藏-->
                <li :class="item.showcardclass" v-for="(item,index) in student" :key="index" v-if="item.done && status ==='list' && Answerstatus === 1 && AnswerShowhide === 'AnswerHide'">
                    <div class="leftimg">
                        <div class="idnumber">{{item.sort}}</div>
                        <div class="portrait"><img :src="item.headImg" /></div>
                        <div class="mpoff" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
                    </div>
                    <div class="righttext">
                        <div class="showhide-answer" v-if="AnswerShowhide === 'AnswerHide'&& item.option !== ''">*</div>
                        <div class="showhide-answer" v-if="AnswerShowhide === 'AnswerShow'&& item.option !== ''">{{item.option}}</div>
                        <div class="showhide-answer" v-if="item.option === ''">           </div>
                        <!--名牌发言-->
                        <div class="q-pa-md">
                            <q-btn push class="namebrand-pop" @click="angleshow()" v-if="item.statement !== ''">
                                <q-popup-proxy @before-hide="hideangleicon()" :offset="[90, -155]">
                                    <draggable class="list-group"
                                               @start="statementToimage"
                                               @end="stickupend">
                                        <div class="pop-up" id="statementBox" @click="detailbtn($event)">
                                            {{item.statement}}
                                            <div class="statementInfo">--{{item.studentName}}</div>
                                        </div>
                                    </draggable>
                                </q-popup-proxy>
                            </q-btn>
                        </div>
                        <q-dialog v-model="alert" transition-show="rotate" transition-hide="rotate">
                            <q-card>
                                <q-card-section class="q-pt-none">
                                    {{detailContent}}
                                    <div class="detailbox">
                                        <div class="fr"><span>来自于：{{deatilName}}</span></div>
                                        <!--<div class="fr"><span>时间111：</span></div>-->
                                    </div>
                                </q-card-section>
                            </q-card>
                        </q-dialog>
                        <!--名牌发言end-->
                        <div class="AnswerStudentname">{{item.studentName}}</div>
                    </div>
                </li>
                <!--设置答案后  答案隐藏end-->
                <!--设置答案后  答案显示-->
                <li :class="item.answerbrand" v-for="(item,index) in student" :key="item.id" v-if="item.done && status ==='list'&& Answerstatus == 1 && AnswerShowhide === 'AnswerShow'">
                    <div class="leftimg">
                        <div class="idnumber">{{item.sort}}</div>
                        <div class="portrait"><img :src="item.headImg" /></div>
                        <div class="mpoff" v-if="item.status === 'offline'"><img src="../../assets/img/offlineimg.png" /></div>
                    </div>
                    <div class="answer-righttext">
                        <div class="showhide-answer" v-if="AnswerShowhide === 'AnswerHide'&& item.option !== ''">*</div>
                        <div class="showhide-answer" v-if="AnswerShowhide === 'AnswerShow'&& item.option !== ''">{{item.option}}</div>
                        <div class="showhide-answer" v-if="item.option === ''">           </div>
                        <!--名牌发言 设定答案后-->
                        <div class="q-pa-md">
                            <q-btn push class="namebrand-pops" @click="angleshow()" v-if="item.statement !== ''">
                                <q-popup-proxy @before-hide="hideangleicon()" :offset="[80, -155]">
                                    <draggable class="list-group"
                                               @start="statementToimage"
                                               @end="stickupend">
                                        <div class="pop-up" id="statementBox" @click="detailbtn($event)">
                                            {{item.statement}}
                                            <div class="statementInfo">--{{item.studentName}}</div>
                                        </div>
                                    </draggable>
                                </q-popup-proxy>
                            </q-btn>
                        </div>
                        <q-dialog v-model="alert" transition-show="rotate" transition-hide="rotate">
                            <q-card>
                                <q-card-section class="q-pt-none">
                                    {{detailContent}}
                                    <div class="detailbox">
                                        <div class="fr"><span>来自于：{{deatilName}}</span></div>
                                        <!--<div class="fr"><span>时间111：</span></div>-->
                                    </div>
                                </q-card-section>
                            </q-card>
                        </q-dialog>
                        <!--名牌发言 设定答案后end-->
                        <p style="color:#fff">{{item.studentName}}</p>
                    </div>
                </li>
                <!--设置答案后end-->
            </ul>
            <!--文字模式收集-->
            <ul class="vice-studyshowcard" v-if="status ==='text'" :style="'height:'+ cssheightL +'px;'">
                <Textgather></Textgather>
            </ul>
            <!--文字模式收集end-->
            <!--柱状图-->
            <ul class="vice-studyshowcard" v-if="status ==='bar'" :style="'height:'+ cssheightL +'px;'">
                <div v-if="status ==='bar'">
                    <Bar :toBarAnswer="settinganswer" :cssoption="cssheightL"></Bar>
                </div>
            </ul>
            <!--饼图-->
            <ul class="vice-studyshowcard" v-if="status ==='pie'" :style="'height:'+ cssheightL +'px;'">
                <div v-if="status ==='pie'">
                    <Pie></Pie>
                </div>
            </ul>
            <!--排行榜-->
            <ul class="vice-studyshowcard" v-if="status ==='rank'" :style="'height:'+ cssheightL +'px;'">
                <li class="brand-rank" v-for="item in RankDatas" :key="item.id" v-if="item.done && status ==='rank'">
                    <div class="leftimg">
                        <div class="idnumber">{{item.sort}}</div>
                        <div class="portrait"><img :src="item.headImg" /></div>
                    </div>
                    <div class="rankright">
                        <div class="trophy" v-if="item.rank === '1'"><img src="@/statics/iconsvg/interaction/TrophyOne.svg" /></div>
                        <div class="trophy" v-if="item.rank === '2'"><img src="@/statics/iconsvg/interaction/TrophyTwo.svg" /></div>
                        <div class="trophy" v-if="item.rank === '3'"><img src="@/statics/iconsvg/interaction/TrophyThree.svg" /></div>
                        <div class="snbox">
                            <p class="sn-num">{{item.score}}</p>
                            <p class="sn-name">{{item.studentName}}</p>
                        </div>
                    </div>
                </li>
            </ul>
            </Col>
        </Row>
    </div>
</template>
<script>
    import Bar from './../Chart/Bar.vue'
    import Pie from './../Chart/Pie.vue'
    import Result from './../Chart/result.vue'
    import Textgather from './TextGather.vue'
    import draggable from "vuedraggable";
    import html2canvas from 'html2canvas';
    export default {
        components: {
            Bar,
            Pie,
            Result,
            Textgather,
            draggable
        },
        data() {
            return {
                visible: false,
                show: true,
                current: '',
                statusshow: false,//栏目显示状态值
                poptipStyle: 'poptipStyleWidth',
                selection: [],
                status: 'default',
                iconclass: 'allstudents',
                icontext: '全部人员',
                iconnum: '0',
                numClickIcon: 'listicon',
                idlernum: 15,
                Answerstatus: this.$store.state.answerstatus,
                //studentList: [
                //    { 'id': 1, 'name': '王明', 'option': 'A', done: true, 'score': '89', rank: '1', class: 'studybox', showcardclass: 'brand-answer', answerclass: 'answer-error', answerbrand: 'brand', imgUrl: require('../../assets/img/img01.jpg') },
                //    { 'id': 2, 'name': '陈曦', 'option': '', done: true, 'score': '80', rank: '2', class: 'studyboxone', showcardclass: 'brand', answerclass: 'studyboxone', answerbrand: 'brand', imgUrl: require('../../assets/img/img02.jpg') },
                //    { 'id': 3, 'name': '王涵', 'option': '', done: true, 'score': '72', rank: '3', class: 'studyboxone', showcardclass: 'brand', answerclass: 'studyboxone', answerbrand: 'brand', imgUrl: require('../../assets/img/img03.jpg') },
                //    { 'id': 4, 'name': '王明', 'option': 'B', done: true, 'score': '79', rank: '4', class: 'studybox', showcardclass: 'brand-answer', answerclass: 'answercorrect', answerbrand: 'brand', imgUrl: require('../../assets/img/img04.jpg') },
                //    { 'id': 5, 'name': '陈曦', 'option': '', done: true, 'score': '69', rank: '5', class: 'studyboxone', showcardclass: 'brand', answerclass: 'studyboxone', answerbrand: 'brand', imgUrl: require('../../assets/img/img05.jpg') },
                //    { 'id': 6, 'name': '陈曦', 'option': 'B', done: true, 'score': '68', rank: '6', class: 'studybox', showcardclass: 'brand-answer', answerclass: 'answercorrect', answerbrand: 'brand', imgUrl: require('../../assets/img/img01.jpg') },
                //    { 'id': 7, 'name': '王明', 'option': '', done: true, 'score': '95', rank: '7', class: 'studyboxone', showcardclass: 'brand', answerclass: 'studyboxone', answerbrand: 'brand', imgUrl: require('../../assets/img/img02.jpg') },
                //    { 'id': 8, 'name': '李毅', 'option': '', done: true, 'score': '99', rank: '8', class: 'studyboxone', showcardclass: 'brand', answerclass: 'studyboxone', answerbrand: 'brand', imgUrl: require('../../assets/img/img03.jpg') },
                //    { 'id': 9, 'name': '范志毅', 'option': '', done: true, 'score': '69', rank: '9', class: 'studyboxone', showcardclass: 'brand', answerclass: 'studyboxone', answerbrand: 'brand', imgUrl: require('../../assets/img/img04.jpg') },
                //    { 'id': 10, 'name': '李毅于', 'option': 'C', done: true, 'score': '59', rank: '10', class: 'studybox', showcardclass: 'brand-answer', answerclass: 'answer-error', answerbrand: 'brand', imgUrl: require('../../assets/img/img05.jpg') },
                //    { 'id': 11, 'name': '王治郅', 'option': '', done: true, 'score': '75', rank: '11', class: 'studyboxone', showcardclass: 'brand', answerclass: 'studyboxone', answerbrand: 'brand', imgUrl: require('../../assets/img/img01.jpg') },
                //    { 'id': 12, 'name': '王龙军', 'option': 'C', done: true, 'score': '79', rank: '12', class: 'studybox', showcardclass: 'brand-answer', answerclass: 'answer-error', answerbrand: 'brand', imgUrl: require('../../assets/img/img02.jpg') },
                //    { 'id': 13, 'name': '张明', 'option': '', done: true, 'score': '83', rank: '13', class: 'studyboxone', showcardclass: 'brand', answerclass: 'studyboxone', answerbrand: 'brand', imgUrl: require('../../assets/img/img03.jpg') },
                //    { 'id': 14, 'name': '王狗子', 'option': '', done: true, 'score': '80', rank: '14', class: 'studyboxone', showcardclass: 'brand', answerclass: 'studyboxone', answerbrand: 'brand', imgUrl: require('../../assets/img/img04.jpg') },
                //    { 'id': 15, 'name': '张三', 'option': 'A', done: true, 'score': '90', rank: '15', class: 'studybox', showcardclass: 'brand-answer', answerclass: 'answer-error', answerbrand: 'brand', imgUrl: require('../../assets/img/img05.jpg') }
                //],
                student: this.$store.state.students,
                changeList: ['status'],
                value1: 10,
                value1Max: Number(30),
                unansweredbtn: 'unanswered-btn',
                answerbtn: 'answerbtn',
                answersuccess: 'correct-btn',
                answererror: 'error-btn',
                hiddenbtn: '',
                NotanswerStatus: '',
                screenunanswered: 'unanswered-screen',
                screenanswer: 'screen-answer',
                aspectRatio: 'default',
                fullscreen: '0',
                styleObjDefault: {
                    isShow: true,
                    width: '100%',
                    height: '300px',
                    maxWidth: '1920px',
                    marginLeft: '0px',
                    marginTop: '0px',
                    backgroundColor: '#EDEDED',
                    componentIndex: 1,
                    isShowCard: true
                },
                styleObjScreen: {
                    isShow: true,
                    width: '100%',
                    height: '720px',
                    maxWidth: '1920px',
                    marginLeft: '0px',
                    marginTop: '0px',
                    backgroundColor: '#EDEDED',
                    componentIndex: 1,
                    isShowCard: true
                },
                settinganswer: '',
                answernum: '',
                noanswernum: '',
                rightanswernum: this.$store.state.rightanswernum,
                erroranswernum: this.$store.state.erroranswernum,
                /*名牌显示答案icon图表*/
                ShowHideanswer: require('../../assets/img/hide-answer.png'),
                AnswerShowhide: 'AnswerHide',
                /*阈值处理宽度样式*/
                dwidth: '',
                widthvalue: '',
                marginvalue: '',
                /*设定答案icon value*/
                AnswerIconstyle:'letter',
                /*poptip*/
                angleicon: false,
                poptipbox: false,
                /*当前状态值*/
                btnname: 'allstudents',
                //关联CSSvalue
                cssvalue: '0',
                cssheightL: '240',
                ulheight: '215',
                //排行榜
                RankDatas: [],
                //IRS开关
                irsswitch: true,
                second: this.$store.state.IRSswitch,
                confirm: false,
                //便利贴
                isDragging: false,
                alert: false,
                irsBack: this.$store.state.irsBack,
                studentToimageurl: '',
                //便利贴查看详情
                deatilName: '',
                detailContent:'',
            }
        },
        created() {
            this.studentss();
            //this.viewcontent();
        },
        mounted() {
            this.$nextTick(() => { // 页面渲染完成后的回调
                console.log(this.$refs.getheight.offsetWidth, 33)
                this.dwidth = this.$refs.getheight.offsetWidth
                this.valuestyle();
            })
        },
        computed: {
            watchStudents() {
                return this.$store.state.students
            },
            Answerstatusone() {
                return this.$store.state.answerstatus
            },
            watchAnswervalue() {
                return this.$store.state.answervalue
            },
            watchAnswernum() {
                return this.$store.state.answernum
            },
            watchNoAnswernum() {
                return this.$store.state.noanswernum
            },
            watchRightAnswernum() {
                return this.$store.state.rightanswernum
            },
            watchErrorAnswernum() {
                return this.$store.state.erroranswernum
            },
            watchAnswerpattern() {
                return this.$store.state.answerpattern
            }
        },
        methods: {
            close() {
                this.visible = false;
            },
            changeShow(e) {
                if (this.changeList[0] !== e) {
                    this.changeList = []
                    this.changeList.push(e)
                } else {
                    this.changeList = []
                }
            },
            hiddenShow: function () {
                this.$emit('close', 'false')
            },
            /*查看学生*/
            studentss() {
                let studentnum = this.$store.state.students
                this.iconnum = this.$store.state.students.length
                let i = '';
                let answerdata = [];
                let noanswerdata = [];
                for (i = 0; i < studentnum.length; i++) {
                    if (studentnum[i].option !== '' || studentnum[i].statement !=='') {
                        answerdata.push(studentnum[i]);
                    } else if (studentnum[i].option === '' && studentnum[i].statement === '') {
                        noanswerdata.push(studentnum[i])
                    }
                    studentnum[i].done = true
                }
                this.status === 'default'
                this.answernum = answerdata.length;
                this.noanswernum = noanswerdata.length;
                //this.viewcontent()
                //页面初始化 重整页面
                this.aspectRatio = 'default'
                this.current = ''
                this.status = 'default'
                this.statusshow = false
                this.fullscreen = '0'
                this.cssheightL = '240'
                this.$store.state.cssvalue = '0'
                //处理当前的答案模式
                this.answerpatterns()
            },
            //根据设定答案的模式 来显示字母或数字
            answerpatterns() {
                let pattern = this.$store.state.answerpattern
                let studentDatas = this.$store.state.students
                if (pattern === 'letter') {
                    for (var i = 0; i < studentDatas.length; i++) {
                        if (studentDatas[i].option === '1' || studentDatas[i].option === 'A') {
                            studentDatas[i].option = 'A'
                        } else if (studentDatas[i].option === '2' || studentDatas[i].option === 'B') {
                            studentDatas[i].option = 'B'
                        } else if (studentDatas[i].option === '3' || studentDatas[i].option === 'C') {
                            studentDatas[i].option = 'C'
                        } else if (studentDatas[i].option === '4' || studentDatas[i].option === 'D') {
                            studentDatas[i].option = 'D'
                        } else if (studentDatas[i].option === '5' || studentDatas[i].option === 'E') {
                            studentDatas[i].option = 'E'
                        } else if (studentDatas[i].option === '6' || studentDatas[i].option === 'F') {
                            studentDatas[i].option = 'F'
                        } else if (studentDatas[i].option === '7' || studentDatas[i].option === 'G') {
                            studentDatas[i].option = 'G'
                        } else if (studentDatas[i].option === '8' || studentDatas[i].option === 'H') {
                            studentDatas[i].option = 'H'
                        } else if (studentDatas[i].option === '9' || studentDatas[i].option === 'I') {
                            studentDatas[i].option = 'I'
                        } else if (studentDatas[i].option === '0' || studentDatas[i].option === 'J') {
                            studentDatas[i].option = 'J'
                        }
                    }
                } else if (pattern === 'number') {
                    for (var i = 0; i < studentDatas.length; i++) {
                        if (studentDatas[i].option === '1' || studentDatas[i].option === 'A') {
                            studentDatas[i].option = '1'
                        } else if (studentDatas[i].option === '2' || studentDatas[i].option === 'B') {
                            studentDatas[i].option = '2'
                        } else if (studentDatas[i].option === '3' || studentDatas[i].option === 'C') {
                            studentDatas[i].option = '3'
                        } else if (studentDatas[i].option === '4' || studentDatas[i].option === 'D') {
                            studentDatas[i].option = '4'
                        } else if (studentDatas[i].option === '5' || studentDatas[i].option === 'E') {
                            studentDatas[i].option = '5'
                        } else if (studentDatas[i].option === '6' || studentDatas[i].option === 'F') {
                            studentDatas[i].option = '6'
                        } else if (studentDatas[i].option === '7' || studentDatas[i].option === 'G') {
                            studentDatas[i].option = '7'
                        } else if (studentDatas[i].option === '8' || studentDatas[i].option === 'H') {
                            studentDatas[i].option = '8'
                        } else if (studentDatas[i].option === '9' || studentDatas[i].option === 'I') {
                            studentDatas[i].option = '9'
                        } else if (studentDatas[i].option === '0' || studentDatas[i].option === 'J') {
                            studentDatas[i].option = '0'
                        }
                    }
                }
                this.$store.state.students = studentDatas

            },
            //排行榜初始化
            //Rankinit(){
            //    let studentrank = this.$store.state.students

            //},
            //查看缓存是否有IRS和文字信息
            viewcontent() {
                this.student = this.$store.state.students
                let pagenum = this.$store.state.carouselSlide
                let historycontent = JSON.parse(localStorage.getItem('msgBody'))
            },
            // 标签现实隐藏切换btn
            cancelbtn() {
                let btnnames = this.btnname
                let studentArr = this.student
                let answerstatus = this.Answerstatus
                let i = ''
                if (btnnames === 'allstudents') {
                    //对下一步做数据处理(未答者)
                    this.btnname = 'unanswered-btn'
                    for (i = 0; i < studentArr.length; i++) {
                        if (studentArr[i].class === 'studyboxone') {
                            studentArr[i].done = true
                        } else {
                            studentArr[i].done = false
                        }
                    }
                } else if (btnnames === 'unanswered-btn') {
                    if (answerstatus === 0) {
                        //对下一步做数据处理(答题者)(未设定答案)
                        this.btnname = 'answerbtn'
                        for (i = 0; i < studentArr.length; i++) {
                            if (studentArr[i].class === 'studybox') {
                                studentArr[i].done = true
                            } else {
                                studentArr[i].done = false
                            }
                        }
                    } else if (answerstatus === 1) {
                        this.btnname = 'answer-error'
                        for (i = 0; i < studentArr.length; i++) {
                            if (studentArr[i].answerclass === 'answer-error') {
                                studentArr[i].done = true;
                            } else {
                                studentArr[i].done = false;
                            }
                        }
                    }
                } else if (btnnames === 'answerbtn') {
                    //对全部人员做数据处理
                    this.btnname = 'allstudents'
                    for (i = 0; i < studentArr.length; i++) {
                        studentArr[i].done = true
                    }
                } else if (btnnames === 'answer-error') {
                    //对答对者数据处理
                    this.btnname = 'answercorrect'
                    for (i = 0; i < studentArr.length; i++) {
                        if (studentArr[i].answerclass === 'answercorrect') {
                            studentArr[i].done = true
                        } else {
                            studentArr[i].done = false
                        }
                    }
                } else if (btnnames === 'answercorrect') {
                    this.btnname = 'allstudents'
                    for (i = 0; i < studentArr.length; i++) {
                        studentArr[i].done = true
                    }
                }
            },
            //精准学生人群
            accurate(e) {
                let studentArr = this.student
                let answerstatus = this.Answerstatus
                let i = ''
                if (e === 'allstudents') {
                    this.btnname = 'allstudents'
                    for (i = 0; i < studentArr.length; i++) {
                        studentArr[i].done = true
                    }
                } else if (e === 'unanswered-btn') {
                    this.btnname = 'unanswered-btn'
                    for (i = 0; i < studentArr.length; i++) {
                        if (studentArr[i].class === 'studyboxone') {
                            studentArr[i].done = true
                        } else {
                            studentArr[i].done = false
                        }
                    }
                } else if (e === 'answerbtn') {
                    this.btnname = 'answerbtn'
                    for (i = 0; i < studentArr.length; i++) {
                        if (studentArr[i].class === 'studybox') {
                            studentArr[i].done = true
                        } else {
                            studentArr[i].done = false
                        }
                    }
                } else if (e === 'answer-error') {
                    this.btnname = 'answer-error'
                    for (i = 0; i < studentArr.length; i++) {
                        if (studentArr[i].answerclass === 'answer-error') {
                            studentArr[i].done = true;
                        } else {
                            studentArr[i].done = false;
                        }
                    }
                } else if (e === 'answercorrect') {
                    this.btnname = 'answercorrect'
                    for (i = 0; i < studentArr.length; i++) {
                        if (studentArr[i].answerclass === 'answercorrect') {
                            studentArr[i].done = true
                        } else {
                            studentArr[i].done = false
                        }
                    }
                }
            },
            // 滑块数据变化
            sliderfunc(e) {
                this.idlernum = e
            },
            // 全屏按钮 样式变化
            styleadjust(e) {
                if (e === 'default') {
                    this.aspectRatio = 'screen'
                    this.current = ''
                    this.status = 'default'
                    this.statusshow = false
                    this.fullscreen = '0'
                    this.cssheightL = '660'
                    this.$store.state.cssvalue = '1'
                    this.$emit('styleObjScreen', this.styleObjScreen)
                } else if (e === 'screen') {
                    this.aspectRatio = 'default'
                    this.current = ''
                    this.status = 'default'
                    this.statusshow = false
                    this.fullscreen = '0'
                    this.cssheightL = '240'
                    this.$store.state.cssvalue = '0'
                    this.$emit('styleObjScreen', this.styleObjDefault)
                }
            },
            // 秀名牌||切换栏目
            listbtn(e) {
                if (e === 'rank') {
                    this.rankinit()
                } else {
                    let rankstudent = this.$store.state.students
                    rankstudent.sort(function (a, b) {
                        return a.sort - b.sort
                    })
                    this.$store.state.students = rankstudent
                }
                //if (e === 'num') {
                //    if (this.status === e) {
                //         this.statusshow = false
                //    }
                //}
                if (this.statusshow === false) {
                    if (e === 'text' || e === 'num' || e === 'bar' || e === 'pie' || e === 'rank') {
                        //console.log('进1')
                            this.statusshow = true
                        if (e === 'bar' || e === 'pie') {
                            this.$store.state.IRSswitch = false
                            this.second = false
                        }
                    } else if (e === 'default' || e === 'list') {
                        this.statusshow = false
                        //console.log('进2')
                    }
                } else {
                    if (this.current === e) {
                        if (e === 'text' || e === 'num' || e === 'bar' || e === 'pie' || e === 'rank') {
                              //console.log('进3')
                            this.statusshow = false
                        } else if (e === 'default' || e === 'list') {
                            this.statusshow = false
                        }
                    } else {
                        if (e === 'text' || e === 'num' || e === 'bar' || e === 'pie' || e === 'rank') {
                             //console.log('进4')
                            this.statusshow = true
                        } else if (e === 'default' || e === 'list') {
                            this.statusshow = false
                        }
                    }
                }
                if (this.current === e) {
                    this.current = ''
                    this.status = 'default'
                    this.statusshow = false
                } else {
                    this.current = e
                    this.status = e
                }
            },
            //处理学生排行榜数据
            rankinit() {
                let rankstudent = JSON.parse(localStorage.getItem('msgBody'))
                if (rankstudent) {
                    let namedata = []
                    let rankdata = []
                    for (var i = 0; i < rankstudent.length; i++) {
                        let irsstudent = rankstudent[i].totalirs
                        for (var j = 0; j < irsstudent.length; j++) {
                            namedata.push(irsstudent[j])
                        }
                    }
                    let studentData = JSON.parse(JSON.stringify(this.$store.state.students))
                    console.log(studentData,'进入到排行榜的学生信息')
                    for (var m = 0; m < studentData.length; m++) {
                        let dataid = studentData[m].sort
                        let filterArr = namedata.filter(item => item.sort === dataid).map(item => item.score);
                        let totalnum = filterArr.length > 1 ? filterArr.reduce((a, b) => a + b) : filterArr[0]
                        rankdata.push(studentData[m])
                        rankdata[m].score = totalnum
                    }
                    rankdata.sort(function (a, b) {
                        return b.score - a.score
                    })
                    if (rankdata.length > 3) {
                        rankdata[0].rank = '1'
                        rankdata[1].rank = '2'
                        rankdata[2].rank = '3'
                    }
                    this.RankDatas = rankdata
                } else {
                    this.RankDatas = this.$store.state.students
                }
            },
            // 设定答案后名牌变化
            ShowChangeCard() {
                let i = ''
                let student = this.$store.state.students
                for (i = 0; i < student.length; i++) {
                    if (student[i].option === 1) {
                        student[i].option = 'A'
                    } else if (student[i].option === 2) {
                        student[i].option = 'B'
                    } else if (student[i].option === 3) {
                        student[i].option = 'C'
                    } else if (student[i].option === 4) {
                        student[i].option = 'D'
                    }
                }
            },
            // 获取弹窗宽度大小
            getpoptipwidth(data) {
                this.poptipStyle = data
            },
            //名牌show学生答案
            showhide(e) {
                if (e === 'AnswerHide') {
                    this.ShowHideanswer = require('../../assets/img/show-answer.png')
                    this.AnswerShowhide = 'AnswerShow'
                    this.$store.state.IRSswitch = false
                    this.second = false
                } else if (e === 'AnswerShow') {
                    this.ShowHideanswer = require('../../assets/img/hide-answer.png')
                    this.AnswerShowhide = 'AnswerHide'
                    this.$store.state.IRSswitch = false
                    this.second = false
                }

            },
            //开关变化
            switchIRS(e) {
                if (e === true) {
                    this.second = true
                    this.$store.state.IRSswitch = true
                } else if (e === false) {
                    this.second = false
                    this.$store.state.IRSswitch = false
                }
            },
            //重新作答
            againanswer() {
                let nowstudent = this.$store.state.students
                console.log(nowstudent)
                //追查当页设定答案后 给学生的加分
                let answeryes = this.$store.state.answervalue;
                let status = this.$store.state.answerstatus;
                this.AnswerShowhide = 'AnswerHide'
                this.ShowHideanswer = require('../../assets/img/hide-answer.png')
                //获取当前页数 重置缓存内数据
                let pagenumber = this.$store.state.carouselSlide
                if (status === 1) {
                    for (var y = 0; y < nowstudent.length; y++) {
                        if (answeryes[0] == nowstudent[y].option) {
                            if (nowstudent[y].score !== 0) {
                                nowstudent[y].score = nowstudent[y].score - 1
                            }
                        }
                    }
                }
                //清理数据
                for (var i= 0; i < nowstudent.length; i++) {
                    nowstudent[i].option = ''
                    nowstudent[i].class = 'studyboxone'
                    nowstudent[i].showcardclass = 'brand'
                    nowstudent[i].answerclass = 'studyboxone'
                    nowstudent[i].answerbrand = 'brand'
                    //nowstudent[i].statement=''
                }
                //重设基础值
                this.$store.state.answerstatus = 0
                this.$store.state.noanswernum = nowstudent.length
                this.$store.state.answernum = '0'
                this.$store.state.erroranswernum = '0'
                this.$store.state.rightanswernum = '0'
                this.$store.state.students = nowstudent
                this.$parent.$parent.$parent.$parent.studentPercentages()
                this.$parent.$parent.$parent.$parent.answerSelect()
                this.status = 'default'
                this.current = ''
                this.statusshow = false
                this.$store.state.IRSswitch = true
                this.$store.state.answervalue = ''
                this.$parent.$parent.$parent.$parent.switchoverpdf(pagenumber)
                this.$Message.success('答案已重新开启！请重新作答')
            },
            //发言可变便利贴
            dragOptions1() {
                return {
                    animation: 0,
                    handleChange: '',
                    inputChanged: '',
                    activeNames: '',
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                };
            },
            statementToimage(val) {
                console.log('开始移动了')
                html2canvas(document.getElementById("statementBox"), {
                    //backgroundColor: null,
                }).then((canvas) => {
                    console.log(document.getElementById("statementBox"), '元素获取')
                    //document.getelementbyclassname(tableid).innerHTML = "";
                    const img = canvas.toDataURL();
                    var imageObj = new Image();
                    imageObj.src = img;
                    console.log(imageObj.src, '图片的值')
                    this.studentToimageurl = imageObj.src
                });
                this.isDragging == true
            },
            onMove() {
                console.log('在移动，在移动')
            },
            stickupend(val) {
                console.log(val, '这是前面页的X值')
                let positionw = val.originalEvent.x-125
                let positionh = val.originalEvent.y-50
                console.log(val.srcElement.innerText, '文本内容')
                console.log(positionw, positionh, '坐标位置')
                //this.$store.state.position.status = '1'
                //this.$store.state.position.x = positionw
                //this.$store.state.position.y = positionh
                let layers = this.$store.state.layer
                //let starme = val.item.innerText.split('\n')
                //console.log(starme, '分割的数组')
                //this.$store.state.position.name = starme[0]
                //this.$store.state.position.value = starme[1]

                var imageObj = new Image();
                imageObj.src = this.studentToimageurl
                imageObj.setAttribute('crossOrigin', 'anonymous');
                imageObj.onload = function () {
                    var stickyImage = new Konva.Image({
                        x: positionw,
                        y: positionh,
                        image: imageObj,
                        width: imageObj.width,
                        height: imageObj.height,
                        draggable: true,
                    });
                    // add the shape to the layer
                    //group.add(tableInfo);
                    layers.add(stickyImage);
                    //group.zIndex(paragraphall.index+1)
                    layers.batchDraw();
                    //group.batchDraw();
                };
                //获取便利贴数据
                let stickDatas = this.$store.state.stickyNoteDatas
                console.log(stickDatas,'便利贴Data')
                let textinfo = val.srcElement.innerText
                var timestamp = new Date().getTime();
                var stuName = textinfo.substr(textinfo.indexOf('--') + 2)
                var stuContent = textinfo.substr(0,textinfo.indexOf('--') - 1)
                console.log(stuName, '出现的位置', stuContent,'文本')
                if (stickDatas.length !== 0) {
                    for (var i = 0; i < stickDatas.length; i++) {
                        if (stickDatas[i].alltext !== textinfo) {
                            stickDatas.push({ "studentName": stuName, "textContent": stuContent, "alltext": textinfo,"time": timestamp })
                        }
                    }
                } else {
                    stickDatas.push({ "studentName": stuName, "textContent": stuContent, "alltext": textinfo, "time": timestamp })
                }
                this.$store.state.stickyNoteDatas = stickDatas
            },
            detailbtn(e) {
                console.log(e,'传输的内容')
                this.alert = true;
                var texttatal = e.target.innerText
                var name = texttatal.substr(texttatal.indexOf('--') + 2)
                var content = texttatal.substr(0, texttatal.indexOf('--') - 1)
                this.deatilName = name
                this.detailContent = content
                console.log(name, content,'内容')
                //let num = e;
                //let textdata = this.$store.state.irsBack
                //this.detailtext = textdata[num].value
                //this.detailname = textdata[num].studentName
                //this.detailtime = textdata[num].sendTime
            },
            //阈值样式
            valuestyle() {
                let value = this.value1
                let pwidth = ''
                let pmarginleft = ''
                if (value === 5) {
                    pwidth = 40
                    pmarginleft = 50
                } else if (value === 10) {
                    pwidth = 65
                    pmarginleft = 30
                } else if (value === 15) {
                    pwidth = 60
                    pmarginleft = 30
                } else if (value === 20) {
                    pwidth = 75
                    pmarginleft = 20

                } else if (value === 25) {
                    pwidth = 80
                    pmarginleft = 17
                } else if (value === 30) {
                    pwidth = 70
                    pmarginleft = 27

                }
                let widthpercent = pwidth / value
                let marginpercent = pmarginleft / value
                let valueone = (widthpercent / 100) * this.dwidth
                let valuetwo = (marginpercent / 100) * this.dwidth
                this.widthvalue = valueone
                this.marginvalue = valuetwo
            },
            //圆角样式
            angleshow() {
                this.angleicon = !this.angleicon
            },

            hideangleicon() {
                this.angleicon = false
            },
            watchcarouselSlide() {
                return that.$store.state.carouselSlide
            },
        },
        watch: {
            watchStudents: {
                handler(e) {
                    if (e) {
                        
                        console.log(e,'监听到学生变化')
                        this.student = this.$store.state.students
                        this.iconnum = this.$store.state.students.length
                        if (this.current === "") {
                            this.studentss()
                        }
                    }
                },
                deep:true,
            },
            /*监听答题状态*/
            Answerstatusone(a) {
                this.Answerstatus = a
                this.status = 'default'
                this.statusshow = false;
                this.second = false
                //this.ShowChangeCard()
            },
            /*监听设定正确答案*/
            watchAnswervalue(a) {
                this.settinganswer = a
            },
            /*检测答题人数*/
            watchAnswernum(e){
                    console.log(e,'监听到答题人数')
                    this.answernum = e;
            },
            /*检测未答题人数*/
            watchNoAnswernum(e){
                    console.log(e,'监听未答题人数')
                    this.noanswernum = e;
            },
            /*监听正确答案人数*/
            watchRightAnswernum(e) {
                this.rightanswernum = e
            },
            /*监听错误答案人数*/
            watchErrorAnswernum(e) {
                this.erroranswernum = e
            },
            /*监听poptipbox*/
            watchpoptip(e) {
                if (e === false) {
                    this.angleicon = false
                }
            },
            /*监听设定答案模式*/
            watchAnswerpattern(e) {
                this.AnswerIconstyle=e
            }
        }
    }
</script>
<style lang="less">
 @import '../../assets/css/OptionView.less';
</style>
