<template>
    <div class="contain">
        <div class="contain-left">
            <sub-title name="摄像头" statement="CAMERA" />
            <div class="add_camera" @click="addCamera">
                <span>+</span>添加摄像头
            </div>
            <div class="camera-lists">
                <div v-for="(item, index) in cameraList" :key="index" class="camera-lists-info"
                    :class="islistActive == index ? 'islistActive' : ''" @click="activeInfo(item, index)">
                    <img class="camera-lists-info-img"
                        :src='islistActive == index ? require("@/assets/Frame-white.png") : require("@/assets/Frame-gray.png")'>
                    <div v-if="islistActive == index && index == 0" class="acquiesce">默认</div>
                    <div class="camera-lists-info-title" :class="islistActive == index ? 'islistActive-title' : ''">{{
                        item.title }}</div>
                    <div class="imgs-box" v-if="islistActive == index">
                        <img src="@/assets/edit-bi.png" @click="edit(item)">
                        <img src="@/assets/Group-del.png" @click="del(item)">
                    </div>
                </div>
            </div>
            <div class="all-camera">
                共<span>{{ cameraList.length }}</span>个摄像头
            </div>
        </div>
        <!-- 左侧结束 -->
        <div class="contain-right">
            <sub-title name="摄像头名称" statement="Real time imaging" />
            <div class="vido-box">
                <!-- <video class="vido" ref="videoPlayer" autoplay loop muted controls disablePictureInPicture="true"
                    controlslist="nodownload  noplaybackrate"
                    src="../../assets/mda-jj0iure2x5z9hzqf.mp4"></video> -->
                <video-player ref="videoPlayer" style="width: 100%; height: 100%" class="vjs-custom-skin"
                    :options="playerOptions"></video-player>
            </div>
            <!-- <div class="box"></div> -->
        </div>
        <!-- 弹框 -->
        <div class="rolemanage">
            <el-dialog :title="dialogName" :visible.sync="dialogChargeVisible">
                <div>
                    <el-form :model="fromData" ref="ExportForm">
                        <el-form-item label="摄像头名称:" label-width="100px">
                            <el-input v-model="fromData.cameraName" placeholder="请输入名称"></el-input>
                        </el-form-item>
                        <el-form-item label="访问地址:" label-width="100px">
                            <el-input v-model="fromData.cameraUrl" placeholder="请输入地址"></el-input>
                        </el-form-item>
                        <el-form-item label="默认摄像头:" label-width="100px">
                            <el-checkbox-group v-model="fromData.default">
                                <el-checkbox name="default"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button class="exit" @click="dialogChargeVisible = false">取消</el-button>
                    <el-button type="primary" class="save" @click="setCamera">确定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 弹框结束 -->
    </div>
</template>

<script>
import "./index.scss"
import SubTitle from "@/views/equipment-monitoring/components/SubTitle.vue";
// import { videoPlayer } from 'vue-video-player';
// import "videojs-contrib-hls";
export default {
    components: {
        SubTitle
    },
    data() {
        return {
            // 摄像头列表
            cameraList: [
                { title: '一层工厂内部摄像头1' },
                { title: '一层工厂内部摄像头2' },
                { title: '一层工厂内部摄像头3' },
                { title: '一层工厂内部摄像头4' },
                { title: '一层工厂内部摄像头5' },
                { title: '一层工厂内部摄像头6' },
                { title: '一层工厂内部摄像头7' },
                { title: '一层工厂内部摄像头1' },
                { title: '一层工厂内部摄像头2' },
                { title: '一层工厂内部摄像头3' },
                { title: '一层工厂内部摄像头4' },
                { title: '一层工厂内部摄像头5' },
                { title: '一层工厂内部摄像头6' },
                { title: '一层工厂内部摄像头7' },
                { title: '一层工厂内部摄像头2' },
                { title: '一层工厂内部摄像头3' },
                { title: '一层工厂内部摄像头4' },
                { title: '一层工厂内部摄像头5' },
                { title: '一层工厂内部摄像头6' },
                { title: '一层工厂内部摄像头7' },
                { title: '一层工厂内部摄像头2' },
                { title: '一层工厂内部摄像头3' },
                { title: '一层工厂内部摄像头4' },
                { title: '一层工厂内部摄像头5' },
                { title: '一层工厂内部摄像头6' },
            ],
            // 弹窗状态
            dialogChargeVisible: false,
            //是否点击 根据数组下标选中 默认为第一条
            islistActive: 0,
            //弹窗名字
            dialogName: '添加摄像头',
            //弹窗表单
            fromData: {
                cameraName: '',
                cameraUrl: '',
                default: true,
            },
            playerOptions: {
                //  playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: true, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: 'application/x-mpegURL',
                        src: 'http://192.168.0.99:18080/live/215.m3u8', //你的m3u8地址（必填）
                    },
                ],
                poster: '', //你的封面地址
                width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
            },
        }
    },
    mounted(){
        // setTimeout(()=>{
        //     this.playerOptions.muted = false
        // },3000)
    },
    methods: {


        //添加摄像头
        addCamera() {
            this.dialogChargeVisible = true;
            this.dialogName = '添加摄像头'
        },
        //修改摄像头
        edit(item) {
            this.dialogChargeVisible = true;
            this.dialogName = '修改摄像头'
        },
        //删除摄像头
        del(item) {
            this.$confirm(`请确认删除？`, `确认删除`, {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.$message({
                    type: 'success',
                    message: '删除成功!',
                })

            }).catch(err => { console.log(err) })
        },
        // 点击对应摄像头
        activeInfo(item, index) {
            console.log(index)
            this.islistActive = index
        },
        //弹窗保存
        setCamera() {
            this.dialogChargeVisible = false;
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .vjs-custom-skin {
    .vjs-fluid {
        height: 100%;
        padding-top: 0px !important;

        .vjs-tech {
            object-fit: cover;
        }
        .vjs-current-time{
            display: none;
        }
        .vjs-live-control{
            display: none;
        }
        .vjs-time-control{
            display: none;
        }
        .vjs-playing{
            display: none;
        }
    }

}
</style>