<template>
    <div class="playerContainer">
        <div id="player" :class="hadSiteOption ? 'opacity' : ''"></div>
        <div class="action-container" :class="hadSiteOption ? 'opacity' : ''">
            <div v-if="hadSiteOption" class="site-select">
                <el-select
                    :popper-append-to-body="false"
                    v-model="currentSite"
                    @change="changeSite"
                    placeholder="请选择视频监测点"
                    size="mini"
                    style="width: 100%"
                >
                    <el-option
                        v-for="site in siteOption"
                        :key="site.code"
                        :value="site.code"
                        :label="site.name"
                    ></el-option>
                </el-select>
            </div>
            <div class="action">
                <el-popover
                    popper-class="screen-settings-popover"
                    placement="top-start"
                    :width="split == 2 ? '100' : '200'"
                    trigger="hover"
                    :visibleArrow="false"
                >
                    <div class="screen-settings">
                        <div
                            class="screen-setting-item"
                            v-for="item in splitData"
                            :class="splitNum == item.value ? 'active' : ''"
                            @click="arrangeWindow(item.value)"
                            :key="item.value"
                        >
                            <i :class="`bbsl-iconfont bbsl-${item.icon}`"></i>
                            <div>{{ item.text }}</div>
                        </div>
                    </div>
                    <i
                        class="bbsl-iconfont bbsl-fenping"
                        slot="reference"
                        v-if="splitData.length"
                    ></i>
                </el-popover>

                <i
                    class="bbsl-iconfont bbsl-quanping"
                    @click="wholeFullScreen"
                ></i>
            </div>
        </div>
    </div>
</template>

<script>
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
export default {
    props: {
        split: {
            type: String,
        },
        defaultSplit: {
            type: Number,
            default: 2,
        },
        hadSiteOption: {
            type: Boolean,
            default: false,
        },
        siteOption: {
            type: Array,
            default: () => {
                return []
            },
        },
        siteCode: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            splitDataDefault: [
                {
                    value: 1,
                    icon: 'yifenping',
                    text: '1X1',
                },
                {
                    value: 2,
                    icon: 'sifenping',
                    text: '2X2',
                },
                {
                    value: 3,
                    icon: 'jiufenping',
                    text: '3X3',
                },
                {
                    value: 4,
                    icon: 'shiliufenping',
                    text: '4X4',
                },
            ],
            splitData2: [
                {
                    value: 1,
                    icon: 'yifenping',
                    text: '1X1',
                },
                {
                    value: 2,
                    icon: 'sifenping',
                    text: '2X2',
                },
            ],
            isMoveDevice: IS_MOVE_DEVICE,
            player: null,
            splitNum: IS_MOVE_DEVICE ? 1 : this.defaultSplit,
            mseSupport: MSE_IS_SUPPORT,
            tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
            labelCol: {
                span: 5,
            },
            wrapperCol: {
                span: 18,
            },
            urls: {
                realplay: 'ws://183.64.175.153:559/openUrl/pxvGV5C',
                talk: 'ws://183.64.175.153:559/openUrl/pxvGV5C',
                playback: 'ws://183.64.175.153:559/openUrl/pxvGV5C',
            },
            playback: {
                startTime: '2021-07-26T00:00:00',
                endTime: '2021-07-26T23:59:59',
                // valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
                seekStart: '2021-07-26T12:00:00',
                rate: '',
            },
            muted: true,
            volume: 50,
            volumeOnSvg: {
                template:
                    '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>',
            },
            volumeOffSvg: {
                template:
                    '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>',
            },
            videoinfo: '视频加载中...',
        }
    },
    computed: {
        mode: function () {
            return this.tabActive === 'mse' ? 0 : 1
        },
        splitData() {
            if (this.split == 1) {
                return []
            } else if (this.split == 2) {
                return this.splitData2
            } else {
                return this.splitDataDefault
            }
        },
    },
    methods: {
        init() {
            window.addEventListener('resize', () => {
                this.player.JS_Resize()
            })
        },
        arrangeWindow(num) {
            console.log(1)
            this.splitNum = num
            this.player.JS_ArrangeWindow(this.splitNum).then(
                () => {
                    console.log(
                        `arrangeWindow to ${this.splitNum}x${this.splitNum} success`
                    )
                },
                (e) => {
                    console.error(e)
                }
            )
        },
        createPlayer() {
            let vm = this
            this.player = new window.JSPlugin({
                szId: 'player',
                szBasePath: '/',
                iMaxSplit: 4, //this.split == 1 ? 1 : 4,
                iCurrentSplit: IS_MOVE_DEVICE ? 1 : this.defaultSplit,
                openDebug: true,
                oStyle: {
                    borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
                },
            })

            // 事件回调绑定
            this.player.JS_SetWindowControlCallback({
                windowEventSelect: function (iWndIndex) {
                    //插件选中窗口回调
                    console.log('windowSelect callback: ', iWndIndex)
                },
                pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
                    //插件错误回调
                    console.log(
                        'pluginError callback: ',
                        iWndIndex,
                        iErrorCode,
                        oError
                    )
                },
                windowEventOver: function (iWndIndex) {
                    //鼠标移过回调
                    //console.log(iWndIndex);
                },
                windowEventOut: function (iWndIndex) {
                    //鼠标移出回调
                    //console.log(iWndIndex);
                },
                windowEventUp: function (iWndIndex) {
                    //鼠标mouseup事件回调
                    //console.log(iWndIndex);
                },
                windowFullCcreenChange: function (bFull) {
                    //全屏切换回调
                    console.log(this, vm)
                    console.log('fullScreen callback: ', bFull)
                    if (!bFull && vm.defaultSplit == 1) {
                        vm.arrangeWindow(1)
                    }
                },
                firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
                    //首帧显示回调
                    console.log(
                        'firstFrame loaded callback: ',
                        iWndIndex,
                        iWidth,
                        iHeight
                    )
                },
                performanceLack: function () {
                    //性能不足回调
                    console.log('performanceLack callback: ')
                },
            })
        },
        wholeFullScreen() {
            console.log(this.siteOption, 'siteOption')
            if (this.siteOption && this.siteOption.length) {
                let length = this.siteOption.length
                let split = 1
                if (length > 9) {
                    split = 4
                } else if (length > 4) {
                    split = 3
                } else if (length > 1) {
                    split = 2
                }
                this.arrangeWindow(split)
            }
            this.player.JS_FullScreenDisplay(true).then(
                () => {
                    console.log(`wholeFullScreen success`)
                },
                (e) => {
                    console.error(e)
                }
            )
        },
        /* 预览&对讲 */
        realplay() {
            let {player, mode, urls} = this,
                index = player.currentWindowIndex,
                playURL = urls.realplay
            player
                .JS_Play(
                    playURL,
                    {
                        playURL,
                        mode,
                    },
                    index
                )
                .then(
                    () => {
                        console.log('realplay success')
                        this.videoinfo = ''
                        // 将index下移
                        console.log(index)
                        index++
                        this.moveIndex(index)
                    },
                    (e) => {
                        this.videoinfo = '播放失败，请重试'
                        console.error(e)
                    }
                )
        },
        moveIndex(windowIndex) {
            console.log(windowIndex)
            this.player.JS_SelectWnd(windowIndex).then(
                () => {
                    this.playback.rate = 0
                    console.log('stop realplay success')
                },
                (e) => {
                    console.error(e)
                }
            )
        },
        stopPlay() {
            this.player.JS_Stop().then(
                () => {
                    this.playback.rate = 0
                    console.log('stop realplay success')
                },
                (e) => {
                    console.error(e)
                }
            )
        },
        closeVideo() {
            this.stopPlay()
            this.videoinfo = '视频已关闭'
            this.$emit('close')
        },
        // 根据监控点获取视频流地址
        getSiteVideoURL(cameraIndexCode) {
            let query = {
                cameraIndexCode, // 监控点编码
            }
            this.$http
                .post('${portal}/biz/catalog/base/previewURLs', query)
                .then((res) => {
                    if (res.data.state && res.data.value) {
                        let data = res.data.value
                        this.$nextTick(() => {
                            this.useVideoURL(data)
                        })
                    } else {
                        this.$message.warning('获取监控点资源失败！')
                    }
                })
        },
        changeSite(val) {
            this.currentSite = val
            this.getSiteVideoURL(val)
        },
        useVideoURL(url) {
            this.videoinfo = '视频加载中...'
            console.log(url)
            this.urls.realplay = url
            this.realplay() // todo 这个解开就是播放
            // let query = {
            //     cameraIndexCode: '110090628241674360', // 监控点编码
            // }
            // return new Promise((resolve,reject)=>{
            // this.$http
            //     .post('${yhxt}/baseDataStatistics/v1/getPreviewURLs', query)
            //     .then((res) => {
            //         if (res.data.state && res.data.value) {
            //             let data = JSON.parse(res.data.value)
            //             this.urls.realplay = data.url
            //             this.realplay()
            //         } else {
            //             this.videoinfo = '获取监控点资源失败！'
            //             this.$message.warning('获取监控点资源失败！')
            //         }
            //     })
            // })
        },
    },
    mounted() {
        this.init()
        this.createPlayer()
    },
}
</script>

<style lang="scss" scoped>
$border-color: #566a7e;
$active-color: #409eff;
$high-light-color: #ff7c40;
$text-color:#b7c6d8;
$text-color-dark:#8993a0;
$dark-bg:#0b1926;
$dark-bg-lighter: #1d3b57;
.playerContainer {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}
#player {
    width: 100%;
    height: calc(100% - 40px);
}
#player.opacity{
    width: 100%;
    height: 100%;
}
.action-container{
    height: 38px;
    width: 100%;
    color: #fff;
    background-color: #313c44;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.action-container.opacity{
    justify-content: space-between;
    position: absolute;
    width: calc(100% - 4PX);
    left: 2px;
    bottom: 2px;
    background-color: rgba(#0b1926, 0.4);
}
.action{
    text-align: right;
    margin-right: 20px;
    cursor: pointer;
    i{
        margin-left: 20px;
    }
    
}
.screen-settings{
    display: flex;
    justify-content: center;
    align-items: center;
    .screen-setting-item{
        flex: 1;
        text-align: center;
        color: #fff;
        cursor: pointer;
        i{
            font-size: 20px;
        }
    }
    .screen-setting-item:hover,
    .screen-setting-item.active{
        color: #409eff;
    }
}
.site-select{
    width: 200px;
    margin-left: 20px;
    /deep/ .el-select .el-input--suffix .el-input__inner,
    /deep/ .el-input--mini .el-input__inner{
        background-color: transparent;//rgba($dark-bg, 0.2);//$dark-bg;
        border: 1px solid transparent; //$border-color;
        color: $text-color;
    }

    /deep/ .el-select-dropdown{
        background-color: $dark-bg;
        border: solid 1px $border-color;
    }
    /deep/ .el-select-dropdown__item{
        height: 28PX;
        line-height: 28PX;
    }
    /deep/ .el-select-dropdown__item span {
        color: $text-color;
    }
    /deep/ .el-select-dropdown__item.selected span {
        color: $active-color !important;
    }
    /deep/ .el-select-dropdown__item.hover,
    /deep/ .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
        background-color: $dark-bg-lighter  !important;
    }
}
  
</style>
<style lang="scss">
	.el-popover.screen-settings-popover{
        background-color: #313c44 !important;
        border: 1px solid #4f595f;
    }
    .el-popover.screen-settings-popover .popper__arrow::after {
        border-bottom-color: #303133 !important;
    } 
</style>