<template>
    <div class="irsbox">
        <row>
            <Col span="24" class="usermsg">
            <div class="seat">{{seat}}</div>
            <div class="username">姓名：{{name}}</div>
            <div class="selector">
                <RadioGroup v-model="button1" type="button" @on-change="pattern">
                    <Radio label="IRS 模式"></Radio>
                    <Radio label="文本模式"></Radio>
                </RadioGroup>
            </div>
            </Col>
        </row>
        <row type="flex" justify="center" align="center" style="position: relative">
            <col span="6">
            <div id="LED" v-if="isShow">
                <div :class="clock">
                    <div class="v n1">
                        <div class="u"></div>
                        <div class="d"></div>
                    </div>
                    <div class="v n2">
                        <div class="u"></div>
                        <div class="d"></div>
                    </div>
                    <div class="h n3">
                        <div class="l"></div>
                        <div class="r"></div>
                    </div>
                    <div class="v n4">
                        <div class="u"></div>
                        <div class="d"></div>
                    </div>
                    <div class="v n5">
                        <div class="u"></div>
                        <div class="d"></div>
                    </div>
                    <div class="h n6">
                        <div class="l"></div>
                        <div class="r"></div>
                    </div>
                    <div class="h n7">
                        <div class="l"></div>
                        <div class="r"></div>
                    </div>
                </div>
            </div>
            <!--<div class="qiehuan" style="float: right">1231231231</div>-->
            </col>
        </row>
        <row type="flex" justify="center" v-if="isShow">
            <col span="6">
            <div>
                <SvgIcon class="vue-icon" name="ok" scale="6" original>
                </SvgIcon>
            </div>
            </col>
            <col span="6">
            <div>
                <SvgIcon class="vue-icon" name="irs" scale="6" original>
                </SvgIcon>
            </div>
            </col>
            <col span="6">
            <div>
                <SvgIcon class="vue-icon" name="back" scale="6" original>
                </SvgIcon>
            </div>
            </col>
        </row>
        <row type="flex" justify="center" v-if="isShow">
            <col span="6">
            <div @click="MQTTSendMsg(1,'A',1)" @touchend="startbtn('.one')"  class="one">
                <SvgIcon class="vue-icon" name="1" scale="6" original>
                </SvgIcon>
            </div>
            </col>
            <col span="6">
            <div @click="MQTTSendMsg(2,'B',1)" @touchend="startbtn('.two')" class="two">
                <SvgIcon class="vue-icon" name="2" scale="6" original>
                </SvgIcon>
            </div>
            </col>
            <col span="6">
            <div @click="MQTTSendMsg(3,'C',1)" @touchend="startbtn('.three')" class="three">
                <SvgIcon class="vue-icon" name="3" scale="6" original>
                </SvgIcon>
            </div>
            </col>
        </row>
        <row type="flex" justify="center" v-if="isShow">
            <col span="6">
            <div @click="MQTTSendMsg(4,'D',1)"   @touchend="startbtn('.four')" class="four">
                <SvgIcon class="vue-icon" name="4" scale="6" original>
                </SvgIcon>
            </div>
            </col>
            <col span="6">
            <div @click="MQTTSendMsg(5,'E',1)"  @touchend="startbtn('.five')" class="five">
                <SvgIcon class="vue-icon" name="5" scale="6" original>
                </SvgIcon>
            </div>
            </col>
            <col span="6">
            <div @click="MQTTSendMsg(6,'F',1)" @touchend="startbtn('.six')" class="six">
                <SvgIcon class="vue-icon" name="6" scale="6" original>
                </SvgIcon>
            </div>
            </col>
        </row>
        <row type="flex" justify="center" v-if="isShow" >
            <col span="6">
            <div @click="MQTTSendMsg(7,'G',1)" @touchend="startbtn('.seven')" class="seven">
                <SvgIcon class="vue-icon" name="7" scale="6" original>
                </SvgIcon>
            </div>
            </col>
            <col span="6">
            <div @click="MQTTSendMsg(8,'H',1)" @touchend="startbtn('.eight')" class="eight">
                <SvgIcon class="vue-icon" name="8" scale="6" original>
                </SvgIcon>
            </div>
            </col>
            <col span="6">
            <div @click="MQTTSendMsg(9,'I',1)" @touchend="startbtn('.nine')" class="nine">
                <SvgIcon class="vue-icon" name="9" scale="6" original>
                </SvgIcon>
            </div>
            </col>
        </row>
        <row type="flex" justify="center" v-if="isShow">
            <col span="6">
            <div>
                <SvgIcon class="vue-icon" name="last" scale="6" original>
                </SvgIcon>
            </div>
            </col>
            <col span="6">
            <div @click="MQTTSendMsg(0,'J',1)" @touchend="startbtn('.zero')" class="zero">
                <SvgIcon class="vue-icon" name="0" scale="6" original>
                </SvgIcon>
            </div>
            </col>
            <col span="6">
            <div>
                <SvgIcon class="vue-icon" name="next" scale="6" original>
                </SvgIcon>
            </div>
            </col>
        </row>
        <row v-if="textShow">
            <Col span="12" style="float:left"></Col>
            <Col span="12" class="content-text">
            <div class="text-box" v-for="item in textData">
                <div class="text-content"><div class="contents">{{item.value}}</div></div>
            </div>
            </Col>
            <Col span="24" class="input">
            <div class="input-box">
                <Input v-model="TextmodeValue" placeholder="" style="width:82%" />
                <img src="../assets/mobile/send.png" class="send-img" @click="textmode()">
            </div>
            </Col>
        </row>
        <!--<van-popup v-model="show">
        <div class="reconnection-box">
            <div class="reconnection-title">当前有加入的教室哦，接下来的操作？</div>
            <div class="reconnection-handle">
                <div class="comeback"><van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" round="true" @click="clickok()">回到互动页面</van-button></div>
                <div class="quitclass"><van-button color="linear-gradient(to right,#FF8888,#FF0000)" round="true" @click="cencel()">不，我要退出重新加入</van-button></div>
            </div>
        </div>
    </van-popup>-->
        <!--<row type="flex" justify="center">-->
        <!--<col>-->
        <!--<div style="font-size:24px;height:28px;width:100%">Message:{{msg}}</div>-->
        <!--</col>-->
        <!--</row>-->
        <!--<Button size="large" @click="MQTTconnect">連線教室</Button>
    <Button size="large" @click="MQTTconnectClose">連線關閉</Button>-->
    </div>
</template>

<script>
    // import api from '@/api/http.js'
    import Vue from 'vue'
    import '@/assets/mobile/svg'
    import SvgIcon from 'vue-svgicon'
    import cookie  from 'vue-cookies'
    Vue.prototype.$cookie = cookie;
    import {
        Button,
        Toast,
        Row,
        Col,
        Icon,
        Popup,
        Dialog 
    } from 'vant'
    Vue.use(Popup);
    window.irsVue = {
        name: 'tab2',
        components: {
            Button,
            Toast,
            Row,
            Col,
            Icon,
            SvgIcon,
            Dialog 
        },
        data() {
         return {
             connectIcon: false,
             clock: 'clock c0',
             msg: '',
             button1: 'IRS 模式',
             isShow: true,
             textShow: false,
             TextmodeValue: '',
             client: '',
             sendmsg:'',
             accepterId: '',
             mobilemqtt:'',
             mobiledeviceId:'',
             textData: [
                
             ],
             name: '',
             seat:'',
             isPwd: true,
             show: false,
             clickbtn1:false,
         }
        },
        created() {
            this.seatnum()
            this.uiinit();
        },
        mounted() {
            this.init()
             //关闭窗口清楚localstorage
              window.onbeforeunload = function (e) {
                var storage = window.localStorage;
                  //storage.removeItem('mobiledeviceId') 
                  //storage.removeItem('mobiletoken')
                  //storage.removeItem('mobileclassnum')
                  //storage.removeItem('seatnum')
            }
            
        },
        //当页面销毁的时候将事件监听销毁，以免影响其他内容
        destroyed: function () {
            window.onpopstate = null
            console.log('12316565464')
        },
        beforeRouteLeave(to, from, next) {
                Dialog.confirm({
                    title: '温馨提示',
                    message: '是否离开当前教室？离开会断开连接'
                }).then(() => {
                    // on confirm
                    next()
                }).catch(() => {
                    // on cancel
                    next(false)
                });
         },
        methods: {
            
            SetClock(num) {
                this.clock = 'clock c' + num
            },
            addtopic(msg) {
                this.msg = msg
            },
            seatnum() {
                if (localStorage.getItem('seatnum')) {
                     this.seat = localStorage.getItem('seatnum')
                }
            },
            init() {
                this.accepterId = this.$route.query.accepterid
                this.sendmsg = this.$route.query.sendmsginfos
                this.mobiledeviceId = localStorage.getItem('mobiledeviceId')
                this.mobilemqtt = this.$route.query.mobilemqtts
                this.seat = this.$route.query.seatnum
                console.log(this.$route.query.seatnum,'传输的座位号')
                console.log(this.accepterId, '接收者')
                console.log(this.sendmsg, 'sendmsg')
                console.log(this.mobiledeviceId, 'deviceid值')
                console.log(this.mobilemqtt, '连线资讯')
                /*进场判断用户*/
                if (localStorage.getItem('mobiledeviceId') !== '') {
                    this.name = localStorage.getItem('username');
                    this.seat = localStorage.getItem('seatnum');
                }
                /*存用户信息*/
                let CookieMobiledeviceId = localStorage.getItem('mobiledeviceId')
                let MobileToken = localStorage.getItem('mobiletoken')
                let CookieUsername = localStorage.getItem('username')
                let CookieSeatnum = localStorage.getItem('seatnum')
                let CookieClassnum = localStorage.getItem('mobileclassnum')
                let Cookietime = localStorage.getItem('timeefficiency')
                this.$cookie.set('mobiledeviceId', CookieMobiledeviceId, 60 * 60 * 3);
                this.$cookie.set('token', MobileToken, 60 * 60 * 3);
                this.$cookie.set('username', CookieUsername, 60 * 60 * 3);
                this.$cookie.set('seatnum', CookieSeatnum, 60 * 60 * 3);
                this.$cookie.set('classnum', CookieClassnum, 60 * 60 * 3);
                this.$cookie.set('timeefficiency', Cookietime, 60 * 60 * 3);
            },
            /**
             * /发送消息
             * @param msgs
             */
            MQTTSendMsg(msgs,value,typeid) {
                console.log(msgs)
                this.SetClock(msgs)   
                this.addtopic(msgs)
                let payload = ''
                let deviceId = this.mobiledeviceId
                let name=this.name
                    let msg = {"value":value,"id":deviceId}
                    let directMethod = this.accepterId
                    let senmsginfo = this.sendmsg
                const timestamp = Math.floor(Date.now() / 1000)
                if (typeid === 1) {
                    var irsmsgconfig = {
                        'Action': 'IRS.Answer',
                        'Sender': name,
                        'TypeId': typeid,
                        'Timestamp': timestamp,
                        'Payload': {
                            "Answer": msg,
                            "GroupAPI-Version": 0.0,
                            "GroupMemberNum": 0,
                            "Host-Software-Version": 0,
                            "MemberID": 0,
                            "Pincode": 0,
                        }
                    }
                    payload = JSON.stringify(irsmsgconfig)
                } else {
                    var textmsgconfig = {
                        'Action': 'Text.Messages',
                        'Sender': name,
                        'TypeId': typeid,
                        'Timestamp': timestamp,
                        'Payload': {
                            "TextContent": msg,
                            "GroupAPI-Version": 0.0,
                            "GroupMemberNum": 0,
                            "Host-Software-Version": 0,
                            "MemberID": 0,
                            "Pincode": 0,
                        }
                    }
                    payload = JSON.stringify(textmsgconfig)
                }
                    let receiveId = {
                        'directMethod': directMethod
                    }
                    let pubTopic = senmsginfo + '&$.to=' + JSON.stringify(receiveId)
                    console.log('发送内容：' + payload)
                    console.log('发送主题：' + pubTopic)
                    //let client = this.client
                    this.$connect.publish(pubTopic, payload, { qos: 0 }, (error) => {
                        if (!error) {
                            console.log('发布成功')
                            if (typeid === 3) {
                                let onetext = { id: msg.id,studentName:name,value:value}
                                this.textData.push(onetext)
                                console.log(this.textData)
                                this.TextmodeValue = '';
                                this.$Message.success('发送成功！');
                            }
                        } else {
                            console.log('发布失败')
                        }
                    })
            },
            pattern(e) {
               if (e === '文本模式') {
                   this.isShow = false
                   this.textShow = true
               }
               if (e === 'IRS 模式') {
                   this.isShow = true
                   this.textShow = false
               }
            },
        /*文字模式发送文字*/
            textmode() {
                let text = this.TextmodeValue
                this.MQTTSendMsg('',text,3)
            },
            uiinit() {
                function setRem() {
                    var whdef = 100 / 750;// 表示1920的设计图,使用100PX的默认值
                    var bodyWidth = document.body.clientWidth;// 当前窗口的宽度
                    var rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
                    document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
                }
                window.addEventListener('load', setRem);
                window.addEventListener('resize', setRem);
            },
            startbtn(e) {
                if (e === '.one') {
                    document.querySelector('.one').setAttribute('style', 'background:#fff')
                    document.querySelector('.one path').setAttribute('style', 'fill:#3399ff')
                    setTimeout(() => {
                        document.querySelector('.one path').setAttribute('style', 'fill:#fff')
                    }, 800);
                } else if (e === '.two') {
                    document.querySelector('.two').setAttribute('style', 'background:#fff')
                    document.querySelector('.two path').setAttribute('style','fill:#3399ff')
                    setTimeout(() => {
                        document.querySelector('.two path').setAttribute('style','fill:#fff')
                    }, 800);
                } else if (e === '.three') {
                    document.querySelector('.three').setAttribute('style', 'background:#fff')
                    document.querySelector('.three path').setAttribute('style', 'fill:#3399ff')
                    setTimeout(() => {
                        document.querySelector('.three path').setAttribute('style', 'fill:#fff')
                    }, 800);
                } else if (e === '.four') {
                    document.querySelector('.four').setAttribute('style', 'background:#fff')
                    document.querySelector('.four path').setAttribute('style', 'fill:#3399ff')
                    setTimeout(() => {
                        document.querySelector('.four path').setAttribute('style', 'fill:#fff')
                    }, 800);
                } else if (e === '.five') {
                    document.querySelector('.five').setAttribute('style', 'background:#fff')
                    document.querySelector('.five path').setAttribute('style', 'fill:#3399ff')
                    setTimeout(() => {
                        document.querySelector('.five path').setAttribute('style', 'fill:#fff')
                    }, 800);
                } else if (e === '.six') {
                    document.querySelector('.six').setAttribute('style', 'background:#fff')
                    document.querySelector('.six path').setAttribute('style', 'fill:#3399ff')
                    setTimeout(() => {
                        document.querySelector('.six path').setAttribute('style', 'fill:#fff')
                    }, 800);
                } else if (e === '.seven') {
                    document.querySelector('.seven').setAttribute('style', 'background:#fff')
                    document.querySelector('.seven path').setAttribute('style', 'fill:#3399ff')
                    setTimeout(() => {
                        document.querySelector('.seven path').setAttribute('style', 'fill:#fff')
                    }, 800);
                } else if (e === '.eight') {
                    document.querySelector('.eight').setAttribute('style', 'background:#fff')
                    document.querySelector('.eight path').setAttribute('style', 'fill:#3399ff')
                    setTimeout(() => {
                        document.querySelector('.eight path').setAttribute('style', 'fill:#fff')
                    }, 800);
                } else if (e === '.nine') {
                    document.querySelector('.nine').setAttribute('style', 'background:#fff')
                    document.querySelector('.nine path').setAttribute('style', 'fill:#3399ff')
                    setTimeout(() => {
                        document.querySelector('.nine path').setAttribute('style', 'fill:#fff')
                    }, 800);
                } else if (e === '.zero') {
                    document.querySelector('.zero').setAttribute('style', 'background:#fff')
                    document.querySelector('.zero path').setAttribute('style', 'fill:#3399ff')
                    setTimeout(() => {
                        document.querySelector('.zero path').setAttribute('style', 'fill:#fff')
                    }, 800);
                }
               
               
                }
            }
    }
    export default window.irsVue
</script>
<style>
    .ivu-radio-group-button .ivu-radio-wrapper {
        padding:0 10px !important;
    }
</style>
<style scoped>
    /* recommended css code for vue-svgicon */
    .irsbox {
     max-width: 750px;
        margin: 0 auto;
        background: #fff;
        min-height: 100vh;
    }
    .svg-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        color: inherit;
        vertical-align: middle;
        fill: none;
        stroke: currentColor;
    }

    .svg-fill {
        fill: currentColor;
        stroke: none;
    }

    .svg-up {
        /* default */
        transform: rotate(0deg);
    }

    .svg-right {
        transform: rotate(90deg);
    }

    .svg-down {
        transform: rotate(180deg);
    }

    .svg-left {
        transform: rotate(-90deg);
    }

    .vue-icon:hover path[pid="0"] {
        fill: #dcdcdc;
    }

    .vue-icon:active path[pid="0"] {
        fill: #aae6e5;
    }

    /* LED */

    #IDE {
        margin: auto auto;
        width: 600px;
    }

    .clock {
        font-size: 6px;
        width: 8.5em;
        height: 11em;
        border: 1px solid #ddd;
        position: relative;
    }

        .clock div {
            position: absolute;
            border-style: solid;
        }

        .clock .l,
        .clock .r,
        .clock .u,
        .clock .d {
            width: 0;
            height: 0;
            overflow: hidden;
        }

        .clock .v {
            width: 0;
            height: 3.5em;
            border-width: 0 0.5em;
            border-color: #565656;
        }

            .clock .v .u {
                border-style: dotted dotted solid dotted;
                border-width: 0 0.5em 0.5em;
                border-color: transparent transparent #565656 transparent;
                top: -0.5em;
                left: -0.5em;
            }

            .clock .v .d {
                border-style: solid dotted dotted dotted;
                border-width: 0.5em 0.5em 0 0.5em;
                border-color: #565656 transparent transparent transparent;
                left: -0.5em;
                bottom: -0.5em
            }

        .clock .h {
            width: 5em;
            height: 0;
            border-width: 0.5em 0;
            border-color: #565656;
        }

            .clock .h .l {
                border-style: dotted solid dotted dotted;
                border-width: 0.5em 0.5em 0.5em 0;
                border-color: transparent #565656 transparent transparent;
                top: -0.5em;
                left: -0.5em;
            }

            .clock .h .r {
                border-style: dotted dotted dotted solid;
                border-width: 0.5em 0 0.5em 0.5em;
                border-color: transparent transparent transparent #565656;
                top: -0.5em;
                right: -0.5em;
            }

        .clock .n1 {
            left: 0.5em;
            top: 1.4em;
        }

        .clock .n2 {
            left: 0.5em;
            top: 5.9em;
        }

        .clock .n4 {
            left: 7em;
            top: 5.9em;
        }

        .clock .n5 {
            left: 7em;
            top: 1.4em;
        }

        .clock .n6 {
            top: 0.4em;
            left: 1.8em;
        }

        .clock .n3 {
            top: 9.6em;
            left: 1.8em;
        }

        .clock .n7 {
            top: 4.9em;
            left: 1.8em;
        }

    .c1 .n1,
    .c1 .n2,
    .c1 .n3,
    .c1 .n6,
    .c1 .n7 {
        display: none
    }

    .c2 .n1,
    .c2 .n4 {
        display: none
    }

    .c3 .n1,
    .c3 .n2 {
        display: none
    }

    .c4 .n2,
    .c4 .n3,
    .c4 .n6 {
        display: none
    }

    .c5 .n2,
    .c5 .n5 {
        display: none
    }

    .c6 .n5 {
        display: none
    }

    .c7 .n1,
    .c7 .n2,
    .c7 .n3,
    .c7 .n7 {
        display: none
    }

    .c8 {
    }

    .c9 .n2 {
        display: none
    }

    .c0 .n7 {
        display: none
    }

    .selector {
        width: 40%;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .title-box {
        width: 100%;
        background-color: #1296db;
        height: 0.9rem;
        border-radius: 30px;
    }

    .title {
        width: 50%;
        margin: 0 auto;
        display: block;
        text-align: center;
        font-size: 0.5rem;
        color: #fff;
        line-height: 0.9rem;
    }

    .content-text {
        height: 100%;
        overflow-y: auto;
        margin-bottom: 50px;
        float:right;
    }

    .text-box {
        color: #fff;
        width: 100%;
        height: auto;
        text-align: right;
        display: block;
        margin-top: 5px;
        float:right;
    }

    .text-content {
        display: inline-block;
        float: right;
        text-align:right;
         background-color: #fff;
    }
    .contents {
        margin: 5px 8px 10px 0px;
        padding: 5px 10px;
        background-color: #1296db;
        border-radius: 15px;
        word-break: break-all;
    }
    .input {
        position: fixed;
        left: 0px;
        bottom: 0px;
    }

    .input-box {
        width: 100%;
        padding: 2%;
        background-color: #1296db;
    }

    .send-img {
        width: 30px;
        height: 30px;
        float: right;
        margin: 1% 4% 0% 1%;
    }

    .usermsg {
        width: 100%;
        background-color: #5DCBF3;
        line-height: 1.1rem;
        margin-bottom: 2%;
        position:relative;
        /*position:fixed;*/
    }
    .username {
        width: 40%;
        text-align: left;
        float: left;
        font-size: 0.35rem;
        /*margin-left:20%;*/
        color:#fff;
        margin-left:3%;
    }
    .numss {
        width: 30%;
        text-align: center;
        float: left;
        font-size: 0.3rem;
    }
    .seat {
       width:13%;
       /*padding:0% 2%;*/
       height:0.9rem;
       float: left;
       background-color:#FF5121;
       line-height:0.9rem;
       text-align:center;
       font-weight:bold;
       border-radius:50%;
       font-size:0.4rem;
       color:#fff;
       margin-left:3%;
       margin-top:1.5%;
    }
    .vue-icon {
        width:90px !important;
        height:85px !important;
    }
    /*弹出层样式*/
    .reconnection-box {
        width:6rem;
        height:3rem;
        background-color:#F7F8FA;
        padding:5% 1%;
        text-align:center;
    }
    .reconnection-title {
       width:100%;
       font-size:0.3rem;
       word-wrap:break-word;
       font-weight:bold;
    }
    .reconnection-handle {
        width:100%;
        height:auto;
        padding:2%;
        float:left;
        margin-top:10%;
    }
    .comeback {
        float:left;
        width:43%;
        height:auto;
    }
    .quitclass {
        float:left;
        width:57%;
        height:auto;
    }
</style>
