<template>
    <div>
        <live-pusher id='livePusher' ref="livePusher" class="livePusher" :url="url"
        mode="FHD" :muted="false" :enable-camera="true" :auto-focus="true" :beauty="meiyan + 1" whiteness="0"
        aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
        :style="{'height':height + 'px'}"
        ></live-pusher>
        <div class="bottom" :style="{'height':height }" v-if="show" @click="show = false">
            <div class="tanchuceng" @click="zuzhi">
                <div class="head">
                    <div style="flex-direction: row;align-items:center">
                        <text class="title">全部商品</text>
                        <text class="num">2件</text>
                    </div>
                    <!-- <div class="add">
                        <text style="font-size:28rpx;color: #fff;text-align:center">添加/管理商品</text>
                    </div> -->
                </div>
                <list class="list">
                <cell class="item" v-for="(i,j) in list" @click="xuanzhong(j)">
                    <image class="shopimg" :src="i.goods_image"></image>
                    <div class="info">
                        <div>
                            <text style="font-size:26rpx;colro:#333;margin-top:12rpx;lines:1;text-overflow:ellipsis">{{i.goods_name}}</text>
                            <text style="font-size:24rpx;color:#333;margin-top:14rpx;lines:1;text-overflow:ellipsis">{{i.goods_advword}}</text>
                        </div>
                        <div style="flex-direction: row; align-items: flex-end;">
                            <text style="font-size:28rpx;color:#FF3131">￥{{i.goods_price}}</text>
                            <text style="font-size:26rpx;color:#999">￥{{i.goods_marketprice}}</text>
                        </div>
                    </div>
                        <image :src="'../../static/image/release/' + (i.putaway == 1 ? 'on' : 'off') + '.png'" style="width:55rpx;height:35rpx;margin-top:120rpx;margin-left:150rpx"></image>
                </cell>
            </list>
            </div>
            
        </div>
        <div class="user">
        </div>
        <div style="position: fixed;top: 60rpx;left: 30rpx;flex-direction: row;align-items:center">
            <image class="userhead" :src="info.member_avatar"></image>
            <div class="userinfo">
                <text class="username">{{info.member_name}}</text>
                <text class="username" style="font-size:20rpx">{{time}} | sadasdas</text>
            </div>
        </div>
        <image class="closeimg" src="../../static/image/close.png" @click="closes"></image>
        <image class="menuimg" src="../../static/image/menu.png" @click="tool = true"></image>
        <image class="shoptapimg" @click="xianshi" src="../../static/image/shop.png"></image>
        <text style="font-size:26rpx;color:#fff;width:512rpx;position:fixed;left:30rpx;top:793rpx">德铭阳光在线绿色直播，请遵循相关法律法规，警察叔叔24小时巡查哦。为了保障直播系统稳定，现将全局开放防主播沉迷功能。主播积累直播16小时将自动下播休息2小时后方可继续开播。请大家注意休息/避免空播。
        </text>
        <div class="danmulist">
            <text class="danmuitem" v-for="(i,j) in danmulist" :key="j">{{i.senderNickname}}:{{i.content}}</text>
            
        </div>
        <div class="bottom" :style="{'height':height + 'px'}" v-if="tool" @click="tool = false">
        <view class="menu" @click="zuzhi">
            <view class="menuback"></view>
            <text class="menutitle">直播工具</text>
            <view class="menutool">
                <view class="menutoolitem" @click="switchCamera">
                    <image class="menutoolitemimg"></image>
                    <text class="menutoolitemtitle">翻转</text>
                </view>
                 <picker @change="bindPickerChange" :value="meiyan" :range="[1,2,3,4,5,6,7,8,9]">
                        <view class="menutoolitem">
                            <image class="menutoolitemimg"></image>
                            <text class="menutoolitemtitle">美颜</text>
                        </view>
                </picker>
               
            </view>
        </view>
        </div>
        <!-- <button class="btn" @click="start">开始推流1</button>
        <button class="btn" @click="pause">暂停推流</button>
        <button class="btn" @click="resume">resume</button>
        <button class="btn" @click="stop">停止推流</button>
        <button class="btn" @click="snapshot">快照</button>
        <button class="btn" @click="startPrediv">开启摄像头预览</button>
        <button class="btn" @click="stopPrediv">关闭摄像头预览</button>
        rtmp://107268.livepush.myqcloud.com/live/26?txSecret=826e36f52669ebf9290644b82a1d8b33&txTime=5F1A84E4
        <button class="btn" @click="switchCamera">切换摄像头</button> -->
    </div>
</template>
<style lang="scss" scoped>
.shoptapimg{
    width: 65rpx;
    height: 65rpx;
    position: fixed;
    right: 26rpx;
    bottom: 24rpx;
}
.menuimg{
    width: 60rpx;
    height: 55rpx;
    position: fixed;
    left: 26rpx;
    bottom: 24rpx;
}
.closeimg{
    position: fixed;
    top: 70rpx;
    right: 31rpx;
    width: 31rpx;
    height: 31rpx;
}
.username{
    font-size: 24rpx;
    color: #fff;
    lines:1;
    text-overflow:ellipsis
}
.userinfo{
    height: 60rpx;
    margin-left: 20rpx;
    justify-content: space-between;
    width: 200rpx;
}
.userhead{
    width: 70rpx;
    height: 70rpx;
    // position: fixed;
    // top: 60rpx;
    // left: 30rpx;
    border-radius: 35rpx;
}
.user{
    width: 308rpx;
    height: 70rpx;
    border-radius: 35rpx;
    background-color: #000;
    opacity:0.2;
    position: fixed;
    top: 60rpx;
    left: 30rpx;
    

}
.info{
    height: 160rpx;
    justify-content: space-between;
    margin-left: 10rpx;
    width: 304rpx;
}
.shopimg{
    width: 160rpx;
    height: 160rpx;
    

}
.item{
    width: 690rpx;
    height: 200rpx;
     border-bottom-width: 2rpx;
    border-style: solid;
    border-color: #ECECEC;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.list{
    width: 750rpx;
    height: 694rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.add{
    width: 221rpx;
    height: 40rpx;
    background-color: #FF780F;
    border-radius: 20rpx;
    justify-content: center;
    margin-right: 30rpx;
}
.num{
    font-size: 26rpx;
    color: #FF3131;
    margin-left: 30rpx;
}
.bottom{
    width: 750rpx;
    position: fixed;
    top:0;
    z-index: 10;
}
.head{
    width: 750rpx;
    height: 88rpx;
    border-bottom-width: 2rpx;
    border-style: solid;
    border-color: #ECECEC;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.title{
    font-size: 30rpx;
    color:#333;
    margin-left: 30rpx;
}
.tanchuceng{
    width: 750rpx;
    height: 782rpx;
    position: fixed;
    bottom: 0;
    border-top-left-radius:20rpx;
    border-top-left-radius:20rpx;
    background-color: #fff;
    transition: bottom 0.5s;
    z-index: 20;
    
}
.menu{
    width: 750rpx;
    height: 335rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
}
.menuback{
    background-color: #000;
    opacity: 0.8;
    position: absolute;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 335rpx;
}
.menutitle{
    font-size: 30rpx;
    color: #fff;
    margin-left: 30rpx;
    margin-top: 30rpx;
}
.menutool{
    flex-direction: row;
    margin-top: 59rpx;
    margin-left: 30rpx;
}
.menutoolitem{
    align-items: center;
    margin-right: 60rpx;
}
.menutoolitemtitle{
    margin-top: 30rpx;
    font-size: 28rpx;
    color: #fff;
}
.menutoolitemimg{
    width: 100rpx;
    height: 100rpx;
}
.danmulist{
    position: fixed;
    left: 30rpx;
    bottom: 118rpx;
}
.danmuitem{
    font-size: 26rpx;
    color: #fff;
    flex-direction: column-reverse;
}
.livePusher{
    width: 750rpx;
}
</style>
<script>
    const ChatRoomService =require('../../static/chatservice');
    export default {
        data: {
            fil: true,
            url:'',
            height:0,
            show:false,
            list:[],
            info:{},
            im:{},
            chatroom_id:0,
            live_id:0,
            tool:false,
            meiyan:0,
            time:'00:00:00',
            room:{},
            chatRoomService:{},
            danmulist:[]
        },
        onLaunch: function() {
            console.log('App Launch');
        },
        onShow: function() {
            this.stop()
            this.startPreview()
            this.start()
        },
        onHide: function() {
            console.log('App Hide');
        },
        //模拟onshow生命周期
        created() {
            //监听当前窗口显示 
            currentWebview.addEventListener('show',e=>{
                console.log('search show');
                this.startPreview()
                this.start()
            })
        },
        
        //摧毁之前的声明周期
        beforeDestroy() {
            //移除监听事件
            console.log(123)
            currentWebview.removeEventListener('show',e=>{})
        },
        onReady() {
            // 注意：需要在onReady中 或 onLoad 延时
            let that = this
            setTimeout(()=>{
                 uni.getSystemInfo({
                    success(a){
                        console.log(a.windowHeight,1212)
                        that.height = a.windowHeight
                        // that.start()
                        setTimeout(()=>{
                            that.context = uni.createLivePusherContext("livePusher", that);
                        that.startPreview()
                           
                        
                        
                        },500)
                        
                    }
                })
               
               
            },500)
            
        },
        
        onLoad(a){
		    console.log(getApp().globalData.im)

            this.url = a.url.replace("*","&")
            let that = this
            const token = uni.getStorageSync('token');
            console.log('Bearer' + " " + token)
            this.chatroom_id = a.id
            this.live_id = a.live_id
            uni.request({
                url:"https://dmmall.sdbairui.com/storeapi/Streaming/liveStreamList",
                method:"POST",
                header:{
                    'Authorization' : 'Bearer' + " " + token
                },
                success(res){
                    console.log(res)
                    that.list= res.data.data
                }
            })
             uni.request({
                url:"https://dmmall.sdbairui.com/storeapi/member/memberInfo",
                method:"POST",
                header:{
                    'Authorization' : 'Bearer' + " " + token
                },
                success(res){
                    console.log(res.data)
                    that.info = res.data.data.memberInfo
                    
                    console.log(uni.getStorageSync('userinfo'),123)
                    //当前用户
                    var currentUser = {
                        id : Date.parse(new Date()) + "",
                        nickname : res.data.data.memberInfo.member_nickname + "",
                        avatar: res.data.data.memberInfo.member_avatar
                    };

                    var room = {
                        id : a.id + "",
                        name : a.id + ""
                    };
                    that.chatRoomService = getApp().globalData.im
                    console.log(room,currentUser)
                    //构造chatRoomService
                    that.chatRoomService.subscribeRoomMessage(room,currentUser)
                    that.chatRoomService.initialWhenNewMessage(that.whenNewMessage);
                    //获取当前聊天室数据
                    that.room = that.chatRoomService.room;
                }
            })
            let shi = 0;
            let fen = 0;
            let miao = 0;
            setInterval(() => {
                shi = parseInt(shi)
                fen = parseInt(fen)
                miao = parseInt(miao)
                miao = miao + 1 
                // console.log(miao)
                if(miao == 60){
                    miao = 0;
                    fen +=1
                }
                if(fen == 60){
                    shi += 1
                    fen = 0
                }
                if(shi < 10){
                    shi = '0' + shi
                }
                if(fen < 10){
                    fen = '0' + fen
                }
                if(miao < 10){
                    miao = '0' + miao
                }
                that.time = shi + ":" + fen + ":" + miao
            }, 1000);
            // var roomToken = JSON.parse(options.roomToken);
	

			// //获取当前聊天室数据
            // this.room = this.chatRoomService.room;
            // var config = {
            //     appkey: 'mgb7ka1',
            //     debug:true
            // };
            // var im = RongIMLib.init(config);
            // var conversationList = []; // 当前已存在的会话列表
            // im.watch({
            //     conversation: function(event){
            //         var updatedConversationList = event.updatedConversationList; // 更新的会话列表
            //         console.log('更新会话汇总:', updatedConversationList);
            //         console.log('最新会话列表:', im.Conversation.merge({
            //         conversationList,
            //         updatedConversationList
            //         }));
            //     },
            //     message: function(event){
            //         var message = event.message;
            //         console.log('收到新消息:', message);
            //     },
            //     status: function(event){
            //         var status = event.status;
            //         console.log('连接状态码:', status);
            //     }
            // });
            // var user = {
            //     token: uni.getStorageSync('rongyun')
            // };
            // console.log(user,123)
            // im.connect(user).then(function(user) {
            //     console.log('链接成功, 链接用户 id 为: ', user.id);
            // }).catch(function(error) {
            //     console.log('链接失败: ', error.code, error);
            // });
            // var chatRoom = im.ChatRoom.get({
            //     id: a.id
            // })
            // chatRoom.join({
            //     count: 20 // 进入后, 自动拉取 20 条聊天室最新消息
            // }).then(function() {
            //     console.log('加入聊天室成功');
            // }).catch((err)=>{
            //     console.log(err,262)
            // })

        },  
        methods: {
            whenNewMessage (message) {//新消息监听
				// if(message.type == this.room.MessageType.PROP){
				// 	this.propAnimation(parseInt(message.content))
				// }
				// setTimeout(() => {
				// 	this.contentPosition = 'message-box'+(this.room.messages.length-1);
                // }, 300)
				console.log(message)
                this.danmulist.push(message)
                if(this.danmulist.length > 7){
                    this.danmulist = this.danmulist.slice(this.danmulist.length - 7)
                }
			},
            bindPickerChange(a){
                console.log(a.detail.value)
                this.meiyan = a.detail.value
                uni.showToast({
                    title: '切换成功',
                    duration: 2000
                });
            },
            closes(){
                const token = uni.getStorageSync('token');
                let that = this
                console.log(that.url)
                uni.showModal({
                    title: '提示',
                    content: '是否关闭直播',
                    success: function (res) {
                        if (res.confirm) {
                             uni.request({
                                url:"https://dmmall.sdbairui.com/storeapi/Streaming/destroyChatRoom",
                                data:{
                                    chatroom_id:that.chatroom_id,
                                    live_id:that.live_id,
                                    url: that.url
                                },
                                method:"POST",
                                header:{
                                    "Authorization" : 'Bearer' + " " + token
                                },
                                success(res){
                                    console.log(res)
                                    uni.navigateBack({
                                        delta: 1
                                    });
                                    // that.list= res.data.data
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                }); 
            },
            statechange(e) {
                console.log("statechange:" + JSON.stringify(e));
                console.log(e)
            },
            netstatus(e) {
                // console.log("netstatus:" + JSON.stringify(e));
            },
            error(e) {
                console.log("error:" + JSON.stringify(e));
            },
            start: function() {
                console.log("开始")
                console.log(this.url)
                this.context.start({
                    success: (a) => {
                        console.log("livePusher.start:" + JSON.stringify(a));
                    }
                });
            },
            close: function() {
                this.context.close({
                    success: (a) => {
                        console.log("livePusher.close:" + JSON.stringify(a));
                    }
                });
            },
            snapshot: function() {
                this.context.snapshot({
                    success: (e) => {
                        console.log(JSON.stringify(e));
                    }
                });
            },
            resume: function() {

                this.context.resume({
                    success: (a) => {
                console.log(this.url + '12')

                        console.log("livePusher.resume:" + JSON.stringify(a));
                    }
                });
            },
            pause: function() {
                this.context.pause({
                    success: (a) => {
                        console.log("livePusher.pause:" + JSON.stringify(a));
                    }
                });
            },
            stop: function() {
                this.context.stop({
                    success: (a) => {
                        console.log(JSON.stringify(a));
                    }
                });
            },
            switchCamera: function() {
                this.context.switchCamera({
                    success: (a) => {
                        console.log("livePusher.switchCamera:" + JSON.stringify(a));
                    }
                });
            },
            startPreview: function() {
                let that = this
                this.context.startPreview({
                    success: (a) => {
                        console.log("livePusher.startPreview:" + JSON.stringify(a));
                        that.start()

                    }
                });
            },
            stopPreview: function() {
                this.context.stopPreview({
                    success: (a) => {
                        console.log("livePusher.stopPreview:" + JSON.stringify(a));
                    }
                });
            },
            xianshi(){
                this.show = true;
                console.log(111)
            },
            guanbi(){
                this.show = false
                console.log(123)
            },
            zuzhi(event){
               event.stopPropagation();  
            },
            xuanzhong(i){
                this.list[i].putaway =  this.list[i].putaway == 0 ? 1 : 0
                const token = uni.getStorageSync('token');
                let arr = []
                for(let i in this.list){
                    if(this.list[i].putaway == 1){
                        arr.push(this.list[i].goods_id)
                    }
                }
                let that = this
                uni.request({
                    url:"https://dmmall.sdbairui.com/storeapi/Streaming/updateGoods",
                    method:"POST",
                    data:{
                        goods_id:arr.join(',')
                    },
                    header:{
                        'Authorization' : 'Bearer' + " " + token
                    },
                    success(res){
                        console.log(res)
                        uni.request({
                            url:"https://dmmall.sdbairui.com//storeapi/Streaming/liveStreamList",
                            method:"POST",
                            header:{
                                'Authorization' : 'Bearer' + " " + token
                            },
                            success(res){
                                console.log(res)
                                that.list= res.data.data
                            }
                        })
                    }
                })
            }
        }
    }
</script>