<template>
    <div>
        <el-row :gutter="20" style="margin-bottom: 16px">
            <el-col :span="1.5">
                <el-select v-model="channelId" :placeholder="$t('views.components.player.deviceLiveStream.48750-1')" @change="changeChannel" style="width: 190px">
                    <el-option v-for="option in channelList" :key="option.value" :label="option.label" :value="option.value"></el-option>
                </el-select>
            </el-col>
            <el-col :span="1.5">
                <el-date-picker v-model="queryDate" type="date" value-format="yyyy-MM-dd" clearable :placeholder="$t('views.components.player.deviceVideo.808340-3')" style="width: 150px; margin-right: 10px" />
            </el-col>
            <el-col :span="1.5" style="margin-right: 30px">
                <el-button type="primary" :title="$t('views.components.player.deviceVideo.808340-4')" @click="loadDevRecord()" :disabled="channelId === '' || !queryDate">
                    <i class="el-icon-video-camera" />
                    {{ $t('views.components.player.deviceVideo.808340-5') }}
                </el-button>
            </el-col>

            <el-col :span="1.5">
                <el-time-picker
                    is-range
                    v-model="timeRange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :range-separator="$t('views.components.player.deviceVideo.808340-7')"
                    :start-placeholder="$t('views.components.player.deviceVideo.808340-8')"
                    :end-placeholder="$t('views.components.player.deviceVideo.808340-9')"
                    :placeholder="$t('views.components.player.deviceVideo.808340-10')"
                    :disabled="channelId === '' || !queryDate"
                    @change="timePickerChange"
                    style="width: 210px; margin-right: 10px"
                ></el-time-picker>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" :title="$t('views.components.player.deviceVideo.808340-11')" @click="downloadRecord()" :disabled="channelId === '' || !timeRange">
                    <i class="el-icon-download" />
                    {{ $t('views.components.player.deviceVideo.808340-12') }}
                </el-button>
            </el-col>
        </el-row>

        <player ref="playbacker" :playerinfo="playinfo"></player>
    </div>
</template>
<script>
import player from '@/views/components/player/player.vue';
import { listChannel, playback, closeStream, playbackSeek } from '@/api/iot/channel';
import { getDevRecord, startDownloadRecord } from '@/api/iot/record';

export default {
    name: 'DeviceVideo',
    components: {
        player,
    },
    data() {
        return {
            deviceId: '',
            channelId: '',
            streamId: '',
            ssrc: '',
            playurl: '',
            queryDate: '',
            playing: false,
            vodData: {},
            hisData: [],
            playinfo: {},
            channelList: [],
            playbackinfo: {},
            timeRange: null,
            startTime: null,
            endTime: null,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deviceSipId: null,
                channelSipId: null,
            },
        };
    },
    props: {
        device: {
            type: Object,
            default: null,
        },
    },
    watch: {
        // 获取到父组件传递的device后
        device: function (newVal, oldVal) {
            this.deviceInfo = newVal;
            if (this.deviceInfo && this.deviceInfo.deviceId !== 0) {
                this.queryParams.deviceSipId = this.deviceInfo.serialNumber;
                this.deviceId = this.device.serialNumber;
            }
        },
    },
    created() {
        this.queryParams.deviceSipId = this.device.serialNumber;
        this.deviceId = this.device.serialNumber;
        this.getList();
        this.playinfo = {
            playtype: 'playback',
            deviceId: this.device.serialNumber,
        };
    },
    beforeDestroy() {
        this.closeStream();
    },
    methods: {
        /** 查询监控设备通道信息列表 */
        getList() {
            this.loading = true;
            listChannel(this.queryParams).then((response) => {
                this.channelList = response.rows.map((item) => {
                    return { value: item.channelSipId, label: item.channelName };
                });
            });
        },
        // 改变通道
        changeChannel() {
            this.playinfo.channelId = this.channelId;
        },
        initUrl(data) {
            if (data) {
                this.streamId = data.ssrc;
                this.ssrc = data.ssrc;
                this.playurl = data.playurl;
            } else {
                this.streamId = '';
                this.ssrc = '';
                this.playurl = '';
            }
        },
        getBeijingTime(queryDate) {
            // 计算与UTC的时区差，对于北京时间来说是8小时
            let offset = 8 * 60 * 60 * 1000;
            // 加上时区差，得到北京时间
            let beijingTime = new Date(new Date(queryDate).getTime() - offset);
            return beijingTime.getTime();
        },
        // 录像控制
        loadDevRecord() {
            this.$refs.playbacker.registercallback('playbackSeek', this.seekPlay);
            if (this.queryDate === '' || this.queryDate === null) {
                this.$message.error(this.$t('views.components.player.deviceVideo.808340-13'));
                return;
            }
            if (this.deviceId && this.channelId) {
                const date = this.getBeijingTime(this.queryDate);
                const start = date / 1000;
                const end = Math.floor((date + 24 * 60 * 60 * 1000 - 1) / 1000);
                const query = {
                    start: start,
                    end: end,
                };
                this.vodData = {
                    start: start,
                    end: end,
                    base: start,
                };
                this.setTime(this.queryDate + ' 00:00:00', this.queryDate + ' 23:59:59');
                getDevRecord(this.deviceId, this.channelId, query).then((res) => {
                    this.hisData = res.data.recordItems;
                    if (res.data.recordItems) {
                        const len = this.hisData.length;
                        if (len > 0) {
                            if (this.hisData[0].start < start) {
                                this.hisData[0].start = start;
                                this.vodData.start = start;
                            } else {
                                this.vodData.start = this.hisData[0].start;
                            }
                            if (this.hisData[0].end !== 0 && this.hisData[0].end < end) {
                                this.vodData.end = this.hisData[0].end;
                            }
                            this.playback();
                        } else {
                            this.$message({
                                type: 'warning',
                                message: this.$t('views.components.player.deviceVideo.808340-14'),
                            });
                        }
                    } else {
                        this.$message({
                            type: 'warning',
                            message: this.$t('views.components.player.deviceVideo.808340-14'),
                        });
                    }
                });
            }
        },
        /**录像播放*/
        playback() {
            const query = {
                start: this.vodData.start,
                end: this.vodData.end,
            };
            if (this.ssrc) {
                closeStream(this.deviceId, this.channelId, this.ssrc).then((res) => {
                    playback(this.deviceId, this.channelId, query)
                        .then((res) => {
                            this.initUrl(res.data);
                        })
                        .finally(() => {
                            this.triggerPlay(this.hisData);
                        });
                });
            } else {
                playback(this.deviceId, this.channelId, query)
                    .then((res) => {
                        this.initUrl(res.data);
                    })
                    .finally(() => {
                        this.triggerPlay(this.hisData);
                    });
            }
        },
        /**触发播放*/
        triggerPlay(playTimes) {
            this.$refs.playbacker.playback(this.playurl, playTimes);
            this.playing = true;
        },
        /**录像播放*/
        seekPlay(s) {
            console.log('seekPlay: [' + s + ']');
            const curTime = this.vodData.base + s.hour * 3600 + s.min * 60 + s.second;
            console.log('curTime: [' + curTime + ']');
            console.log('start: [' + this.vodData.start + ']');
            const seekRange = curTime - this.vodData.start;
            console.log('seekRange: [' + seekRange + ']');
            if (this.ssrc) {
                const query = {
                    seek: seekRange,
                };
                const _this = this;
                const timestamp = new Date().setHours(s.hour,s.min,s.second,0);
                playbackSeek(this.deviceId, this.channelId, this.streamId, query).then((res) => {
                    //_this.$refs.playbacker.playbackClearCacheBuffer();
                    console.log('setPlaybackStartTime: [' + curTime + ']');
                    console.log('setPlaybackStartTime: [' + timestamp + ']');
                    _this.$refs.playbacker.setPlaybackStartTime(curTime * 1000);
                });
            }
        },
        /**关闭播放流*/
        closeStream() {
            if (this.playing && this.streamId) {
                console.log('关闭推流: [' + this.playing + ']');
                console.log('关闭推流: [' + this.streamId + ']');
                closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
                    this.streamId = '';
                    this.ssrc = '';
                    this.playurl = '';
                    this.playing = false;
                });
                // this.$refs.playbacker.destroy();
            }
        },
        /**销毁录像播放器*/
        destroy() {
            if (this.playing && this.streamId) {
                this.$refs.playbacker.destroy();
            }
        },
        closeDestroy() {
            this.closeStream();
            this.destroy();
        },
        /**设置时间*/
        timePickerChange: function (val) {
            this.setTime(val[0], val[1]);
        },
        setTime: function (startTime, endTime) {
            this.startTime = startTime;
            this.endTime = endTime;
            this.timeRange = [startTime, endTime];
        },
        /**下载录像*/
        downloadRecord: function () {
            const start = new Date(this.startTime).getTime() / 1000;
            const end = new Date(this.endTime).getTime() / 1000;
            const query = {
                startTime: start,
                endTime: end,
                speed: '4',
            };
            startDownloadRecord(this.deviceId, this.channelId, query).then((res) => {
                console.log('开始转存到流服务器：' + this.deviceId + ' : ' + this.channelId);
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('views.components.player.deviceVideo.808340-15'),
                    });
                }
            });
        },
    },
};
</script>
