<template>
    <div class="liveing">
      
        <div class="top">
        <div class="left">直播页面</div>
        <div class="right">
            <img src="@/static/images/liveshare.png" alt="" @click="fenxiang()" />
            <img src="@/static/images/liveend.png" alt="" @click="visible = true" />
        </div>
        </div>
        <div class="info">
            <LiveingWatcher></LiveingWatcher>
            <div class="LivePlaying">
                <LivePlaying></LivePlaying>
                <div class="comment">
                <div class="commentitem">
                    <span>13:32:30</span>
                    <span class="name"> Andy ： </span>
                    <span> 老师，这个部分可以讲的慢一些吗？ </span>
                </div>
                <div class="commentitem">
                    <span>13:32:30</span>
                    <span class="name"> Andy ： </span>
                    <span> 老师，这个部分可以讲的慢一些吗？ </span>
                </div>
                <div class="commentitem">
                    <span>13:32:30</span>
                    <span class="name"> Andy ： </span>
                    <span> 老师，这个部分可以讲的慢一些吗？ </span>
                </div>
                </div>
            </div>
            <div class="others">
                <div :id="'s-' + item.memberid" class="othersitem" v-for="(item, index) in roominfo.studentlist" :key="index">
                    <div class="watcher"></div>
                    <div class="name">{{item.name}}</div>
                <!-- <img src="" alt="" /> -->
                </div>
                <!-- <div class="othersitem">
                <div class="watcher"></div>
                <div class="name">asdsada</div>
                <img src="" alt="" />
                </div>
                <div class="othersitem">
                <div class="watcher"></div>
                <div class="name">asdsada</div>
                <img src="" alt="" />
                </div>
                <div class="othersitem">
                <div class="watcher"></div>
                <div class="name">asdsada</div>
                <img src="" alt="" />
                </div> -->
                
               
            </div>
        </div>
        <a-modal v-model:visible="visible" title="Basic Modal" @ok="guanbi">
            <p>您确认关闭直播吗</p>
        </a-modal>
    </div>
</template>
<style lang="scss" scoped>
.liveing ::v-deep(.ant-breadcrumb) > span:last-child {
  color: #08ae98;
}
.liveing {
    width: 1320px;
    height: 563px;
    .top {
        width: 1321px;
        height: 57px;
        background: white;
        border-radius: 18px;
        margin-top: 23px;
        margin-bottom: 29px;
        display: flex;
        justify-content: space-between;
        color: #121212;
        font-size: 13px;
        align-items: center;
        .left {
        margin-left: 40px;
        font-weight: bold;
        }
        .right {
        margin-right: 27px;
        > img {
            margin-right: 10px;
        }
        }
    }
    .info {
        display: flex;
        justify-content: space-between;
        .LivePlaying {
        border-radius: 18px;
        margin: 0 35px;
        .comment {
            width: 797px;
            height: 153px;
            background: white;
            border-radius: 18px;
            margin-top: 29px;
            padding: 30px;
            font-size: 12px;

            color: #121212;

            .commentitem {
            margin-bottom: 17px;
            .name {
                margin-left: 28px;
                color: #08ae98;
                font-weight: bold;
            }
            }
        }
        .liveinfo {
            display: flex;
            justify-content: space-between;
            height: 58px;
            align-items: center;
            .left {
            display: flex;
            color: #121212;
            font-size: 13px;
            margin-left: 29px;
            > div {
                margin-right: 57px;
            }
            .icon {
                width: 25px;
                height: 24px;
                margin-right: 6px;
            }
            }
            .right {
            width: 74px;
            height: 29px;
            border: 1px solid #08ae98;
            border-radius: 3px;
            margin-right: 29px;
            color: #08ae98;
            font-size: 13px;
            line-height: 29px;
            font-weight: bold;
            text-align: center;
            }
        }
        }
    }
    .others {
        width: 252px;
        height: 630px;
        display: flex;
        flex-direction: column;
        .othersitem {
            position: relative;
            width: 100%;
            height: 132px;
            margin-bottom: 35px;
            background-color: #eee;
            border-radius: 18px 18px 0px 0px;
            overflow: hidden;
            .watcher {
                width: 100%;
                height: 29px;
                background: #000000;
                color: white;
                position: absolute;
                opacity: 0.1;
                border-radius: 18px 18px 0px 0px;
                top: 0;
            }
            > img {
                width: 228px;
                height: 132px;
                border-radius: 18px;
            }
            .name {
                position: absolute;
                top: 9px;
                left: 28px;
                font-size: 12px;
                color: #fff;
            }
        }
    }
}
</style>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import LivePlaying from "@/components/LivePlaying.vue";
import LiveingWatcher from "@/components/LiveingWatcher.vue";
import TRTC from "trtc-js-sdk"
import { getliveinfo, livestop, luzhi, usersig } from '@/api';
import { useRoute } from 'vue-router';
import store from '@/store';
import { message } from 'ant-design-vue';

export default defineComponent({
    components: {
        LivePlaying,
        LiveingWatcher,
    },
    setup() {
        console.log(1);
        let client: any;
        let localStream: any;
        let statie = true;
        let userSing = '';
        let type = false;
        const visible = ref(false); 
        const roominfo = ref<any>([]);
        console.log(useRoute())
        const id = useRoute().query.id;
        TRTC.checkSystemRequirements().then((result: any) => {
            if(!result) {
                message.error("您的浏览器不支持视频通话，请下载新版chrome浏览器")
            }
        })
        async function qiehuan(){
            // 1 屏幕分享 2 摄像头
            client.unpublish(localStream)
            localStream = type ? TRTC.createStream({ userid: store.state.userinfo.memberid, audio: true, screen: true }) : TRTC.createStream({ userId: 10, audio: false, video: true });
            type = !type;
            localStream.initialize().then(()=>{
                client
                .publish(localStream)
                .catch((error: string) => {
                    console.error('本地流发布失败 ' + error);
                })
                .then(() => {
                    
                    localStream.play('local_stream');
                    console.log('本地流发布成功');
                });
            });
            
        }
        async function shexiang(){
            localStream = TRTC.createStream({ userId: store.state.userinfo.memberid, audio: true, video: true });
            const id = localStream.getId();
            await localStream
            .initialize()
            .catch((error: string) => {
                console.error('初始化本地流失败 ' + error);
            })
            .then(() => {
                console.log('初始化本地流成功');
                client
                .publish(localStream)
                .catch((error: string) => {
                    console.error('本地流发布失败 ' + error);
                })
                .then(() => {
                    const el = document.querySelector("#local_stream");
                    if(el){
                        el.innerHTML = ""
                    }
                    localStream.play('local_stream');
                    console.log('本地流发布成功');
                    console.log(id, 123)
                });
            });
        }

        async function pingmu(){
            const result = await TRTC.checkSystemRequirements()
            console.log(result,11111)
            if(!result) {
                message.error("您的浏览器不支持屏幕分享，请下载新版chrome");
                shexiang()
                return ;
            }
            
            localStream = TRTC.createStream({ userid: store.state.userinfo.memberid, audio: true, screen: true });
            const id = localStream.getId();
            await localStream
            .initialize()
            .catch((error: string) => {
                console.error('初始化本地流失败 ' + error);
                message.error("请选择分享的内容")
                
                setTimeout(()=>{
                    pingmu()
                }, 1000)
            })
            .then(() => {
                console.log('初始化本地流成功');
                client
                .publish(localStream)
                .catch((error: string) => {
                    console.log('本地流发布失败 ' + error);
                    
                })
                .then(() => {
                    const el = document.querySelector("#local_stream");
                    if(el){
                        el.innerHTML = ""
                    }
                    localStream.play('local_stream');
                    console.log('本地流发布成功');
                    console.log(id , 123)
                });
            });
        }
        
        async function init(fun: any, userSig: string): Promise<void>{
            console.log(userSig)
            const el = document.querySelector("#local_stream");
            if(el){
                el.innerHTML = ""
            }
            if (typeof id == "string") {
                roominfo.value = await getliveinfo(parseInt(id))
                console.log(roominfo.value)
            }

            
            client = TRTC.createClient({
                mode: 'rtc',
                sdkAppId: '1400400340',
                userId: store.state.userinfo.memberid,
                userSig: userSig
            });
            client.on('stream-added', (event: { stream: any }) => {
                const remoteStream = event.stream;
                console.log('远端流增加: ' + remoteStream.getId());
                //订阅远端流
                client.subscribe(remoteStream);
            });
            client.on('stream-subscribed', (event: { stream: any }) => {
                const remoteStream = event.stream;
                console.log(remoteStream);
                // 播放远端流
                remoteStream.play('s-' + remoteStream.userId_);
            });
            client
            .join({ roomId: roominfo.value.roomid})
            .catch((error: string) => {
                console.error('进房失败 ' + error);
            })
            .then(() => {
                console.log('进房成功');
                // if(typeof id == "string"){
                luzhi(roominfo.value.roomid)
                // }
                fun()
            });
        }
        async function fenxiang(){
            console.log(localStream)
           

            await client.unpublish(localStream).then(() => {
                // 关闭屏幕分享流
                console.log("关闭")
                // client.leave().then(() => {
                // // leaving room success
                //     console.log("关闭成功")
                // }).catch((error: string) => {
                //     console.error('leaving room failed: ' + error);
                // });
                const el = document.querySelector("#local_stream");
                if(el){
                    el.innerHTML = ""
                }
            });
            statie ? await shexiang() : await pingmu();
            statie = !statie;
            console.log(localStream.getId())
        }

        function guanbi(){
            client.leave().then(() => {
                // leaving room success
                visible.value = false;
                if(typeof id == "string"){
                    livestop(id, roominfo.value.roomid)
                }
            }).catch((error: string) => {
                message.error('关闭失败: ' + error);
            });
        }

        onMounted(async ()=>{
            const si = setInterval(async ()=>{
                if(store.state.userinfo.memberid != 0 && store.state.userinfo.memberid){
                    clearInterval(si);
                    userSing = await usersig(store.state.userinfo.memberid);
                    init(pingmu, userSing);
                   
                }
            })
            
        })
     
        return{
            fenxiang,
            qiehuan,
            roominfo,
            guanbi,
            visible
        }
    },
});
</script>