<template>
    <div class="liveing">
        <a-breadcrumb separator=">">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item href=""> Application Center </a-breadcrumb-item>
        <a-breadcrumb-item href=""> Application List </a-breadcrumb-item>
        <a-breadcrumb-item>An Application</a-breadcrumb-item>
        </a-breadcrumb>
        <div class="top">
        <div class="left">直播页面</div>
        <div class="right">
            <img src="@/static/images/liveshare.png" alt="" @click="qiehuan()" />
            <img src="@/static/images/liveend.png" alt="" />
        </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-10" 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 class="othersitem">
                <div class="watcher"></div>
                <div class="name">asdsada</div>
                <img src="" alt="" />
                </div>
            </div>
        </div>
    </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;
        .watcher {
            width: 228px;
            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 } from "vue";
import LivePlaying from "@/components/LivePlaying.vue";
import LiveingWatcher from "@/components/LiveingWatcher.vue";
import TRTC from "trtc-js-sdk"
import { usersig } from '@/api';

export default defineComponent({
    components: {
        LivePlaying,
        LiveingWatcher,
    },
    setup() {
        console.log(1);
        let client: any;
        let localStream: any;
        let statie = true;
        let userSing = '';
        let type = false;
        async function qiehuan(){
            // 1 屏幕分享 2 摄像头
            client.unpublish(localStream)
            localStream = type ? TRTC.createStream({ userid: 10, audio: true, screen: true }) : TRTC.createStream({ userId: 10, audio: true, video: true });
            type = !type;
            localStream.initialize().then(()=>{
                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('本地流发布成功');
                });
            });
            
        }
        function pingmu(){
            localStream = TRTC.createStream({ userid: 10, audio: true, screen: true });

            localStream
            .initialize()
            .catch((error: string) => {
                console.error('初始化本地流失败 ' + error);
            })
            .then(() => {
                console.log('初始化本地流成功');
                client
                .publish(localStream)
                .catch((error: string) => {
                    console.error('本地流发布失败 ' + error);
                })
                .then(() => {
                    localStream.play('local_stream');
                    console.log('本地流发布成功');
                });
            });
        }
        function shexiang(){
            localStream = TRTC.createStream({ userId: 10, audio: true, video: true });
            localStream
            .initialize()
            .catch((error: string) => {
                console.error('初始化本地流失败 ' + error);
            })
            .then(() => {
                console.log('初始化本地流成功');
                client
                .publish(localStream)
                .catch((error: string) => {
                    console.error('本地流发布失败 ' + error);
                })
                .then(() => {
                    localStream.play('local_stream');
                    console.log('本地流发布成功');
                });
            });
        }
        function init(fun: any, userSig: string){
            console.log(userSig)
            const el = document.querySelector("#local_stream");
            if(el){
                el.innerHTML = ""
            }
            client = TRTC.createClient({
                mode: 'rtc',
                sdkAppId: '1400400340',
                userId: 10,
                userSig: 'eJw1zMsKwjAUBNB-yVrqzatowaU7UcQgGNxEG5tLUGNSxQf*u7FWmM2cgXkRNVsVNxtJRVgBZNB1rO2pxQN2TP*aam9CwJpUVADkcAG-xd4DRptdSskAem3x*LUSOOdjoL0mbPLpvtx5rRbb4RIla86XBxNGKTePI391T64N6jQFgRu3ThPy-gBYczBk'
            });
            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.getId());
                // 播放远端流
                remoteStream.play('s-' + remoteStream.getId());
            });
            client
            .join({ roomId: 11 })
            .catch((error: string) => {
                console.error('进房失败 ' + error);
            })
            .then(() => {
                console.log('进房成功');
                fun()
            });
        }
        function fenxiang(){
            console.log(localStream)
           

            // client.unpublish(localStream).then(() => {
            //     // 关闭屏幕分享流
            //     console.log("关闭")
            //     client.leave().then(() => {
            //     // leaving room success
            //         console.log("关闭成功")
            //     }).catch((error: string) => {
            //         console.error('leaving room failed: ' + error);
            //     });
            // });
            init(statie ? shexiang : pingmu, userSing);
            statie = !statie;
        }

        onMounted(async ()=>{
            userSing = await usersig(10);
            
            init(pingmu, userSing);

        })
     
        return{
            fenxiang,
            qiehuan
        }
    },
});
</script>