<template>
    <view class="page-live">
        <view class="video-container">
            <live-player
                id="livePlayer"
                @error="error"
                @statechange="statechange"
                mode="RTC"
                :src="isHD ? videoHDSrc : videoSrc"
                @tap.stop.prevent="onVideoTap"
                :muted="!openSound"
                :class="fullScreen ? 'video-item full-screen' : 'video-item'"
                @fullscreenchange="fullscreenChange"
                :object-fit="objectFit"
            >
                <!-- loading状态 -->
                <cover-view class="video-loading-container" @tap.stop.prevent="onVideoTap" v-if="videoLoadingStatus !== 100">
                    <cover-image class="video-loading-bg" src="../../static/live/images/live/live_loading_bg.png"></cover-image>
                    <!-- 停止状态 -->
                    <cover-view class="video-loaing video-ready" v-if="videoLoadingStatus === 0">
                        <cover-image class="loading-gif" src="../../static/live/images/live/landscape_play.png" @tap.stop.prevent="handlePlay"></cover-image>
                    </cover-view>
                    <!-- 加载资源中状态 -->
                    <cover-view class="video-loaing" v-if="!(videoLoadingStatus === 0 || videoNetWorkError)">
                        <cover-image class="loading-gif" src="../../static/live/images/live/loading_grey.gif"></cover-image>
                        <cover-view class="video-loading-text">视频安全传输中...{{ videoLoadingStatus }}%</cover-view>
                    </cover-view>
                </cover-view>
                <!-- 开启隐私遮蔽状态 -->
                <!-- <cover-view class="video-loading-container" hidden="{{!(panelStatus == 4)}}">
				<cover-image class="video-loading-bg" src="../live/images/live/live_loading_bg.png"></cover-image>
				<cover-view class="video-loaing">
					<cover-image class="loading-gif" src="../live/images/live/preview_fail_yinsi.png"></cover-image>
					<cover-view class="video-loading-text">已开启隐私遮蔽</cover-view>
				</cover-view>
			</cover-view> -->
                <!-- 加载资源失败状态 -->
                <cover-view class="video-loading-container" v-if="videoNetWorkError">
                    <cover-image class="video-loading-bg" src="../../static/live/images/live/live_loading_bg.png"></cover-image>
                    <cover-view class="video-loaing">
                        <cover-image class="loading-gif" src="../../static/live/images/live/preview_fail.png"></cover-image>
                        <cover-view class="video-loading-text">网络不稳定，加载失败</cover-view>
                        <cover-view class="video-loading-text reTry" ontap="handlePlay">重试</cover-view>
                    </cover-view>
                </cover-view>
                <!-- 设备不在线状态 -->
                <cover-view class="video-loading-container" v-if="deviceOffline">
                    <cover-image class="video-loading-bg" src="../../static/live/images/live/live_loading_bg.png"></cover-image>
                    <cover-view class="video-loaing">
                        <cover-image class="loading-gif" src="../../static/live/images/live/preview_fail_offline.png"></cover-image>
                        <cover-view class="video-loading-text">设备不在线</cover-view>
                        <cover-view class="video-loading-text">离线时间：{{ deviceOfflineTime }}</cover-view>
                    </cover-view>
                </cover-view>
                <!-- 清晰度 -->
                <!-- <cover-view class="{{showHDSelect ? 'hd-select' : 'hd-select hide'}}">
				<cover-view class="{{isHD ? 'hd-option active': 'hd-option'}}" catchtap="changeVideoHD">高清</cover-view>
				<cover-view class="{{!isHD ? 'hd-option active': 'hd-option'}}" catchtap="changeVideoNormal">标清</cover-view>
			</cover-view> -->
                <!-- 竖屏模式 -->
                <!-- <cover-view class="{{fullScreen ? 'hidden' : ''}} video-controls-container">
			</cover-view>
			<cover-view class="{{(fullScreen || !showVideoControls)  ? 'hidden' : ''}} video-controls-container">
				<cover-image class="controls-img" src='{{playVideo ? "../live/images/video_icon_stop.png":"../live/images/video_icon_play.png"}}' catchtap="{{playVideo ? 'handleStop': 'handlePlay'}}"></cover-image>
				<cover-image class="controls-img" src='{{!openSound ? "../live/images/video_icon_closesound.png":"../live/images/video_icon_opensound.png"}}' catchtap="handleSound"></cover-image>
				<cover-image class="controls-img hd" src="{{isHD ? '../live/images/video_icon_hd.png' : '../live/images/video_icon_bq.png' }}" catchtap="handleHD">
				</cover-image>
				<cover-image class="controls-img" catchtap="fullScreen" src="../live/images/video_icon_full.png"></cover-image>
			</cover-view> -->
                <!-- 横屏模式 -->
                <!-- <cover-view class="{{!fullScreen ? 'hidden' : '' }}' video-back-container">
				<cover-image class="back-img" src="../live/images/nav_icon_back_full.png" catchtap="unfullScreen"></cover-image>
				<cover-view class="back-device">{{deviceName}}</cover-view>
			</cover-view>
			<cover-view class="{{(!fullScreen || !showVideoControls) ? 'hidden' : '' }}' video-controls-container">
				<cover-image class="controls-img" src='{{playVideo ? "../live/images/live_icon_stop_full.png":"../live/images/live_icon_play_full.png"}}' catchtap="{{playVideo ? 'handleStop' : 'handlePlay'}}"></cover-image>
				<cover-image class="controls-img" src='{{!openSound ? "../live/images/live_icon_unsound_full.png":"../live/images/live_icon_sound_full.png"}}' catchtap="handleSound"></cover-image>
				<cover-image class="controls-img" catchtap="ToggleObjectFit" src="../live/images/live_icon_adapt_full.png"></cover-image>
			</cover-view> -->
                <!-- 云台超限 -->
                <!-- <cover-image class="ptz-limit right" src="../live/images/yuntai/ptz_limit_right.jpg">
			</cover-image> -->
                <!-- <cover-view class="ptz-limit {{ptzLimit ? ptzLimit : 'hidden'}}"></cover-view> -->
            </live-player>
        </view>
        <view class="controls-container">
            <view class="controls-item" @tap.stop.prevent="screenShoot">
                <image
                    class="item-img"
                    :src="playVideo && videoLoadingStatus == 100 ? '../../static/live/images/preview_cut_normal.png' : '../../static/live/images/preview_cut_disable.png'"
                ></image>
                <text :class="playVideo && videoLoadingStatus == 100 ? 'item-text' : 'item-text disabled'">截屏</text>
            </view>
            <button class="controls-item" open-type="share">
                <image class="item-img" src="../../static/live/images/preview_share_normal.png"></image>
                <text class="item-text">分享</text>
            </button>
        </view>

        <view class="cloudSwitch">
            <!-- 日期选择器 -->
            <view style="float: left; lineheight: 30px">{{ date }}</view>
            <picker mode="date" :value="date" @change="bindDateChange" start="2000-01-01" :end="toDay" style="float: left">
                <view class="picker">
                    <!-- 当前选择: {{date}} -->
                    <!-- 日期选择图标 -->
                    <image class="item-img" src="../../static/playback/images/datepicker.png"></image>
                </view>
            </picker>
            <!-- 云存储/本地录像选择 -->
            <view style="float: right">
                {{ switchText }}
                <switch :checked="switch1Checked" @change="switch1Change" />
            </view>
        </view>

        <!-- 时间轴 -->
        <view>
            <timeLine :inner-text="innerText" @getPalyParam="getPalyParam" :playCode="playCode" :dateLine="dateLine"></timeLine>
        </view>

        <!-- 返回直播 -->
        <view class="backToLiveIcon" style="position: fixed; bottom: 100rpx; right: 20rpx" v-if="page != 1">
            <button @tap.stop.prevent="goToLive" style="text-align: center; font-size: 14px; background: #ff8f42; padding: 8">
                <view>
                    <cover-image class="back-img" src="../../static/live/images/nav_icon_back_full.png"></cover-image>
                    回直播
                </view>
            </button>
        </view>

        <!-- 模态框 -->
        <mp-dialog :title="dialogTitle" :show="dialogShow" @buttontap="tapDialogButton" :buttons="buttons">
            <view>{{ dialogContent }}</view>
        </mp-dialog>
        <mp-dialog :title="dialogNodataTitle" :show="dialogNodataShow" @buttontap="tapDialogNodataButton" :buttons="buttons">
            <view>{{ dialogNodataContent }}</view>
        </mp-dialog>
    </view>
</template>

<script>
import timeLine from '../../component/timeLine/timeLine';
import mpDialog from '../../component/dialog/dialog';
// pages/playback/playback.js
import { OPEN_DOMAIN } from '../../config/config';
let livePlayerContext;
var init;
export default {
    components: {
        timeLine,
        mpDialog
    },
    data() {
        return {
            accessToken: '',
            deviceSerial: '',
            channelNo: '',
            videoSrc:
                'rtmp://xyrtmp.ys7.com:1935/v3/openpb/C78957921_1_1?begin=20211110061910&end=20211110061931&expire=1636615248&id=378564661994004480&rec=cloud&t=7920d6711740bfe795e9f06ceff646a6345d059b8fc14152acde1478468ccdbf&ev=100&ownerId=openteam&streamer=cloud.ys7.com:32723&VideoType=2&StorageVersion=2',
            coverDisabled: true,
            coverInterval: false,
            showVideoControls: true,
            autoHideTimer: undefined,
            videoLoadingStatus: 0,
            playVideo: false,
            videoNetWorkError: false,
            objectFit: 'contain',
            openSound: true,
            isHD: false,
            showHDSelect: false,
            fullScreen: false,
            deviceOffline: false,
            deviceOfflineTime: new Date(),
            deviceName: '',
            dialogTitle: '',
            dialogContent: '',

            buttons: [
                {
                    text: '知道了'
                }
            ],

            dialogShow: false,
            dialogNodataTitle: '',
            dialogNodataContent: '',
            dialogNodataShow: false,
            cloudPalayParam: null,
            playCode: 0,

            // 当前播放错误码，
            switch1Checked: true,

            recType: 2,

            // 1-云存储，2-本地录像
            type: 2,

            // 2-本地录像回放，3-云存储录像回放
            switchText: '本地',

            param: {},

            // 获取播放片段参数
            date: '',

            // 当前选择日期
            dateLine: [],

            // 时间片段
            contentItemShow: false,

            // 暂无数据
            toDay: '',

            // 今日日期
            // 当前页面层级
            page: 1,

            panelStatus: 0,
            list: '',
            videoHDSrc: '',
            innerText: ''
        };
    },
    onLoad: function (options) {
        livePlayerContext = uni.createLivePlayerContext('livePlayer');
        console.log('获取参数', options);
        // 获取当前页面栈
        const currentPage = getCurrentPages();
        console.log(currentPage.nv_length);

        // 获取url携带的参数
        const { accessToken, deviceSerial, channelNo, date, switch1Checked } = options;
            this.playVideo=true,
            this.accessToken=accessToken,
            this.deviceSerial=deviceSerial,
            this.channelNo=channelNo,
            this.page=currentPage.nv_length
        console.log(date);
        // 通过分享今日指定日期
        if (date) {
                this.date=date,
                this.toDay=date
        } else {
            // 获取当前日期
            this.getTodayDate();
        }
        if (switch1Checked == 'false') {
                this.switchText='云存储',
                this.switch1Checked=false,
                this.recType=1,
                this.type=3
        }
        // 获取包含播放片段的时间片段
        this.getTimeLine();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (res) {
        const { accessToken, deviceSerial, channelNo, date, switch1Checked } = this;
        console.log(switch1Checked);
        if (res.from === 'button') {
            // 来自页面内转发按钮
            console.log(res.target);
                this.panelStatus=0
        }
        return {
            title: '小程序',
            path:
                '/pages/playback/playback?accessToken=' +
                accessToken +
                '&deviceSerial=' +
                deviceSerial +
                '&channelNo=' +
                channelNo +
                '&date=' +
                date +
                '&switch1Checked=' +
                switch1Checked
        };
    },
    methods: {
        // 模态框按钮
        tapDialogButton(e) {
                this.dialogShow=false
            uni.navigateBack({
                delta: 1
            });
        },

        // 无时间片段数据时
        tapDialogNodataButton() {
                this.dialogNodataShow=false
        },

        // 获取存储类型
        switch1Change: function (e) {
            console.log('当前存储类型', e.detail);
            if (e.detail.value == false) {
                    this.switchText='云存储',
                    this.switch1Checked=false,
                    this.recType=1,
                    this.type=3
                this.getTimeLine();
            } else {
                    this.switchText='本地',
                    this.switch1Checked=true,
                    this.recType=2,
                    this.type=2
                this.getTimeLine();
            }
        },

        // 获取当天日期
        getTodayDate: function () {
            const that = this;
            let type = null;
            var time = new Date();
            var h = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            let date = (h > 9 ? h : '0' + h) + '-' + (m > 9 ? m : '0' + m) + '-' + (d > 9 ? d : '0' + d);
                this.date=date
            // 获取当前操作系统类型
            uni.getSystemInfo({
                success(res) {
                    console.log('当前操作系统：', res.system);
                    const sys = res.system;
                    type = sys.split(' ');
                    console.log(type);
                    if (type[0] == 'iOS') {
                            that.toDay=date.replace(/\-/g, '/')
                    } else {
                            that.toDay=date
                    }
                }
            });
        },

        format: function (now) {
            var time = new Date(now);
            var h = time.getHours(); //返回日期中的小时数（0到23）
            var m = time.getMinutes(); //返回日期中的分钟数（0到59）
            var s = time.getSeconds(); //返回日期中的秒数（0到59）
            return (h > 9 ? h : '0' + h) + ':' + (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
        },

        // 获取时间轴
        getTimeLine: function () {
            const { recType, date, accessToken, deviceSerial, channelNo, timelineTimer, currentTimer } = this;
            console.log('获取到的accessToken, accessToken', accessToken);
            var that = this;
            let currentDate = null;
            let timestampCurrent = null;
            let timestampToday = null;
            // 时间戳转换：Date.parse(new Date("2020-09-23 12:13:56"))
            if (date) {
                currentDate = date;
                const time = currentDate + ' ' + '00:00:00';
                const endTime = currentDate + ' ' + '23:59:59';
                timestampToday = Date.parse(new Date(time.replace(/\-/g, '/'))); // 选择日期凌晨时间戳
                timestampCurrent = Date.parse(new Date(endTime.replace(/\-/g, '/'))); // 选择日期时间戳
            }

            uni.request({
                url: `${OPEN_DOMAIN}/api/lapp/video/by/time`,
                method: 'POST',
                data: {
                    accessToken: accessToken,
                    deviceSerial: deviceSerial,
                    channelNo: channelNo,
                    recType: recType,
                    startTime: timestampToday,
                    endTime: timestampCurrent
                },
                header: {
                    'content-type': 'application/x-www-form-urlencoded' // 默认值
                },

                success: (res) => {
                    console.log('获取播放时间片段', res.data);
                    if (res.data.code == 200) {
                        if (res.data.data != null) {
                            var result = res.data.data;
                            const len = result.length;
                            let availArr = [];
                            for (let i = len - 1; i >= 0; i--) {
                                let res = result[i];
                                let et = null;
                                let st = null;
                                // 最近片段可能存在endTime超过当前时间
                                if (i == len - 1 && res.endTime > timestampCurrent) {
                                    et = this.format(timestampCurrent);
                                } else {
                                    et = this.format(res.endTime);
                                }
                                // 存在startTime可能为前一天的时间
                                if (i == 0 && res.startTime < timestampToday) {
                                    st = this.format(timestampToday);
                                } else {
                                    st = this.format(res.startTime);
                                }
                                availArr.push({
                                    st: st,
                                    et: et
                                });
                            }
                            console.log('availArr:', availArr);
                                this.dateLine=availArr
                        } else {
                                this.dialogNodataTitle='暂无数据',
                                this.dialogNodataContent=' 暂无录像片段',
                                this.dialogNodataShow=true,
                                this.dateLine=[]
                            this.handleStop();
                        }
                    } else if (res.data.code == '10002') {
                            this.dialogTitle='',
                            this.dialogContent='accessToken过期或异常',
                            this.dialogShow=true,
                            this.dateLine=[]
                    } else if (res.data.code == '20002') {
                            this.dialogTitle='获取播放时间片段失败',
                            this.dialogContent='设备不存在',
                            this.dialogShow=true,
                            this.dateLine=[]
                    } else if (res.data.code == '20007') {
                            this.dialogTitle='获取播放时间片段失败',
                            this.dialogContent='设备不在线',
                            this.dialogShow=true,
                            this.dateLine=[]
                    } else {
                            this.dialogTitle='获取播放时间片段失败',
                            this.dialogContent=res.data.msg,
                            this.dialogShow=true,
                            this.dateLine=[]
                    }
                }
            });
        },

        // 获取播放时间片段
        getPalyParam: function (e) {
            let stTime = e.detail.stTime;
            let etTime = e.detail.etTime;
            const { type, date, accessToken, deviceSerial, channelNo, videoSrc } = this;
            console.log('当前播放时间', stTime, etTime);
            let startTime = null;
            let stopTime = null;
            startTime = date + ' ' + stTime;
            stopTime = date + ' ' + etTime;
            const param = {
                accessToken: accessToken,
                channelNo: channelNo,
                deviceSerial: deviceSerial,
                protocol: 3,
                // 流播放协议，1-ezopen、2-hls、3-rtmp
                startTime: startTime,
                stopTime: stopTime,
                type: type,
                // 由页面按钮传入值
                expireTime: 86400
            };
            // 获取播放地址
            this.getPlayUrl(param);
                this.param=param
        },

        // 获取播放地址
        getPlayUrl(param) {
            var _this = this;
            uni.request({
                url: `${OPEN_DOMAIN}/api/lapp/v2/live/address/get`,
                method: 'POST',
                data: param,
                header: {
                    'content-type': 'application/x-www-form-urlencoded' // 默认值
                },

                success: (res) => {
                    console.log('获取到的播放地址：', res.data);
                    if (res.data.code == '200' && res.data.data && res.data.data.url) {
                        const playUrl = res.data.data.url;
                            this.videoSrc=playUrl
                        // 先停止
                        this.handleStop();
                        // 开始播放
                        this.handlePlay();
                        console.log('当前播放地址：', this.videoSrc);
                    } else if (res.data.code == '20007') {
                        debugger;
                            this.dialogTitle='获取播放地址失败',
                            this.dialogContent='设备不在线',
                            this.dialogShow=true
                    } else if (res.data.code == '20002') {
                            this.dialogTitle='获取播放地址失败',
                            this.dialogContent='设备不存在',
                            this.dialogShow=true
                    } else if (res.data.code == '20001') {
                            this.dialogTitle='获取播放地址失败',
                            this.dialogContent='摄像头不存在',
                            this.dialogShow=true
                    } else if (res.data.code == '20018') {
                            this.dialogTitle='获取播放地址失败',
                            this.dialogContent='用户不拥有该设备',
                            this.dialogShow=true
                    } else if (res.data.code == '10001') {
                            this.dialogTitle='获取播放地址失败',
                            this.dialogContent='参数错误',
                            this.dialogShow=true
                    } else if (res.data.code == '60019') {
                            this.dialogTitle='获取播放地址失败',
                            this.dialogContent='设备已被加密，无法继续查看，请前往萤石云app解密。',
                            this.dialogShow=true
                    } else {
                            this.dialogTitle='获取播放地址失败',
                            this.dialogContent=res.data.msg,
                            this.dialogShow=true
                        console.log('获取rtmp播放地址失败');
                    }
                }
            });
        },

        checkNetWork() {
            const _this = this;
            uni.getNetworkType({
                success(res) {
                    const networkType = res.networkType;
                    if (!networkType || networkType === 'none') {
                        uni.showToast({
                            title: '当前网络异常',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                }
            });
        },

        fullScreenFun() {
            var _this = this;
            livePlayerContext.requestFullScreen({
                direction: 90,
                success: function () {
                        _this.fullScreen=true
                }
            });
            console.log('开启全屏');
        },

        unfullScreen() {
            var _this = this;
            livePlayerContext.exitFullScreen({
                success: function () {
                        _this.fullScreen=false
                }
            });
            console.log('开启全屏');
        },

        ToggleObjectFit() {
            var objectFit = this.objectFit;
            if(objectFit === 'contain'){
            	this.objectFit = 'fillCrop'
            }else{
            	this.objectFit = 'contain'
            }
        },

        fullscreenChange(event) {
            console.log('监听到全屏变化', event);
        },

        handlePlay(callback) {
            console.log('handelPlay', this.playVideo, this.isHD);
            this.checkNetWork();
            livePlayerContext.play({
                success: () => {
                   // playVideo: true,
                   this.showVideoControls=true,
                   // videoLoadingStatus: 100,
                   this.videoNetWorkError=false
                    if (callback && typeof callback === 'function') {
                        callback();
                    }
                },
                fail: (error) => {
                    this.checkNetWork();
                    uni.showToast({
                        title: '网络异常',
                        icon: 'none'
                    });
                    console.log('开始播放失败');
                        this.videoNetWorkError=true
                        this.showVideoControls=false
                        this.videoLoadingStatus=100
                }
            });
        },

        handleStop(callback) {
            console.log('stop');
            const { list } = this;
            livePlayerContext.stop({
                success: () => {
                   this.playVideo=false
                   this.videoLoadingStatus=0
                   this.list=list
                   this.panelStatus=0
                    if (callback && typeof callback === 'function') {
                        callback();
                    }
                },
                fail: (error) => {
                    console.log('停止播放失败');
                }
            });
        },

        autoHideControl() {
            console.log('showHdSelect', this.showHDSelect);
            const _this = this;
            clearTimeout(this.autoHideTimer);
            this.autoHideTimer = setTimeout(() => {
                const { showHDSelect } = _this;
                if (!showHDSelect) {
                    this.showVideoControls=false
                }
            }, 5000);
        },

        handleSound(e) {
            var openSound = this.openSound;
            this.openSound=!openSound
        },

        handleHD(e) {
            var showHDSelect = this.showHDSelect;
            console.log('handleHD', showHDSelect);
            this.showHDSelect=!showHDSelect
        },

        changeVideoHD(e) {
            var _this = this;
            this.showHDSelect=false,
            this.isHD=true
            this.handleStop(_this.handlePlay);
        },

        changeVideoNormal(e) {
            this.showHDSelect=false,
            this.isHD=false
            this.handleStop(this.handlePlay);
        },

        statechange(e) {
            console.log('live-player code:', e.detail.code, e.detail);
            const { code } = e.detail;
            let { videoLoadingStatus, list, panelStatus } = this;
            switch (code) {
                case 2007:
                    //启动loading
                    videoLoadingStatus = 0;
                   this.playVideo=true,
                   this.videoLoadingStatus=0
                    break;
                case 2001:
                    //连接服务器
                    videoLoadingStatus = 20 + Math.floor(Math.random() * 10 + 1);
                    break;
                case 2002:
                    //已经连接 RTMP 服务器,开始拉流
                    videoLoadingStatus = 40 + Math.floor(Math.random() * 10 + 1);
                    break;
                case 2008:
                    // 解码器启动
                    break;
                case 2009:
                    //视频分辨率改动
                    break;
                case 2004:
                    // 视频播放开始
                    videoLoadingStatus = 80 + Math.floor(Math.random() * 10 + 1);
                    break;
                case 2003:
                    //网络接收到首个视频数据包(IDR)
                    videoLoadingStatus = 100;
                    this.playVideo=true,
                    this.autoHideControl();
                    break;
                case 2103:
                    //网络断连, 已启动自动重连（本小程序不自动重连）
                    break;
                case 3001:
                case 3002:
                case 3003:
                case 3005:
                    // 播放失败
                    videoLoadingStatus = 100;
                    this.checkNetWork();
                    this.handleStop(this.playError);
                    this.showVideoControls=false,
                    this.videoNetWorkError=true,
                    this.videoLoadingStatus=100
                    break;
                case -2301:
                    // 经多次重连抢救无效，更多重试请自行重启播放
                    videoLoadingStatus = 100;
                   this.showVideoControls=false,
                   this.videoNetWorkError=true,
                   this.videoLoadingStatus=100
                    break;
            }
            this.videoLoadingStatus=videoLoadingStatus
                this.playCode=code
        },

        playError() {
           this.showVideoControls=false,
           this.videoNetWorkError=true,
           this.videoLoadingStatus=100
        },

        error(e) {
            console.log('live-player', e);
            console.error('live-player error:', e.detail.errMsg);
            if (e.detail.errCode == 10001) {
                uni.showToast({
                    title: '视频直播对讲需要你手机授权微信录音或麦克风权限',
                    icon: 'none',
                    duration: 3000
                });
            }
        },

        onVideoTap(e) {
            console.log('点击视频');
            const { deviceOffline, showVideoControls, panelStatus, videoNetWorkError } = this;
            if (deviceOffline || panelStatus === 4 || videoNetWorkError) {
                return false;
            }
            if (showVideoControls) {
                this.showVideoControls=false
                clearTimeout(this.autoHideTimer);
            } else {
                this.showVideoControls=true
                this.autoHideControl();
            }
        },

        screenShoot(e) {
            const { playVideo, videoLoadingStatus } = this;
            if (!playVideo || videoLoadingStatus != 100) {
                console.log('非播放状态下点击截图');
                return false;
            }
            console.log('开始截图');
            // livePlayerContext.snapshot('raw');
            let that = this;
            uni.getSetting({
                success(res) {
                    if (res.authSetting['scope.writePhotosAlbum']) {
                        that.saveImg();
                    } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
                        uni.authorize({
                            scope: 'scope.writePhotosAlbum',
                            success() {
                                that.saveImg();
                            },
                            fail() {
                                that.authConfirm();
                            }
                        });
                    } else {
                        that.authConfirm();
                    }
                }
            });
        },

        saveImg() {
            livePlayerContext
                .snapshot('raw')
                .then((data) => {
                    console.log('data', data);
                    if (data) {
                        console.log(data);
                        uni.saveImageToPhotosAlbum({
                            filePath: data.tempImagePath,
                            success(res) {
                                console.log('保存成功', res);
                                uni.showToast({
                                    title: '截图已保存至手机相册',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                })
                .catch((err) => {
                    console.log('err', err);
                });
        },

        // 授权拒绝后，再次授权提示弹窗
        authConfirm() {
            let that = this;
            uni.showModal({
                content: '您没打开保存图片权限，是否去设置打开？',
                confirmText: '确认',
                cancelText: '取消',
                success: function (res) {
                    if (res.confirm) {
                        uni.openSetting({
                            success: (res) => {
                                if (res.authSetting['scope.writePhotosAlbum']) {
                                    that.saveImg();
                                } else {
                                    uni.showToast({
                                        title: '您没有授权，无法保存到相册',
                                        icon: 'none'
                                    });
                                }
                            }
                        });
                    } else {
                        uni.showToast({
                            title: '您没有授权，无法保存到相册',
                            icon: 'none'
                        });
                    }
                }
            });
        },

        tapDialogButton(e) {
                this.dialogShow=false
            this.pageBack();
        },

        pageBack() {
            uni.navigateBack({
                delta: 1
            });
        },

        // 时间选择器
        bindDateChange: function (e) {
            console.log('picker发送选择改变，携带值为', e.detail.value);
                this.date=e.detail.value
            this.getTimeLine();
        },

        // 返回直播
        goToLive() {
            const { accessToken, deviceSerial, channelNo } = this;
            let url = '/packDetail1/pages/device/index1?accessToken=' + accessToken + '&deviceSerial=' + deviceSerial + '&channelNo=' + channelNo;
            uni.navigateTo({
                url: url
            });
        }
    }
};
</script>
<style>
@import './playback.css';
</style>
