<template>
    <div class="mainBox">
        <div class="topZS"></div>
        <div class="title">
            实时监控（<span>{{ total }}</span>）
        </div>
        <el-form :model="formInline" class="search">
            <el-form-item label="设备名称：" class="formItem">
                <el-input v-model.trim="formInline.deviceName" class="formIpt"></el-input>
            </el-form-item>
            <el-button type="primary">搜索</el-button>
        </el-form>

        <div class="monitorBox">
            <div class="monitorItem" v-for="(item, index) in monitorList" :key="index">
                <div class="online" v-if="item.isOnline">
                    <div class="left">{{ item.deviceVideoSubTypeCn }}</div>
                    <div class="right"><i class="dian"></i><span>在线</span></div>
                </div>
                <div class="outline" v-else>
                    <div class="left">{{ item.deviceVideoSubTypeCn }}</div>
                    <div class="right"><i class="dian"></i><span>离线</span></div>
                </div>
                <div class="videoImg">
                    <div class="boxshadow" v-if="isShow[index].show" @mouseleave="closeShadow(index)"
                        @click="showDia(item)">
                        <div><i class="el-icon-video-play"></i>&nbsp;&nbsp;查看实时监控</div>
                    </div>
                    <img :src="item.snapURL" alt="" @mouseover="showShadow(index)">
                </div>
                <div class="bottomtext"><i class="el-icon-location online1" v-if="false"></i><i
                        class="el-icon-location outline1" v-else></i>&nbsp;&nbsp;{{ item.channelName }}</div>
                <el-dialog title="企业图片" :visible.sync="diaVisible" class="picForm">
                    <playVideo :video="{ url: item.wsFlv, index: index }" :control="true" v-if="diaVisible"></playVideo>
                </el-dialog>
            </div>

        </div>
        <div class="block">
            <el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[5]" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <div class="bottomZS"></div>
    </div>
</template>

<script>
import playVideo from '@/components/videoPlayer'
import { realTimeMonitoring } from '@/api/archives'
export default {
    data() {
        return {
            formInline: {},
            pageSize: 5,
            pageNum: 1,
            total: 0,
            isShow: [{ show: false }, { show: false }, { show: false }, { show: false }, { show: false }],
            diaVisible: false,
            monitorList: [],
        }
    },
    components: {
        playVideo
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            realTimeMonitoring({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, }).then(res => {
                this.monitorList = res.data
                this.total = res.total
            })
        },
        showShadow(val) {
            this.isShow[val].show = true
        },
        closeShadow(val) {
            this.isShow[val].show = false
        },
        showDia() {
            this.diaVisible = true
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageNum = 1;
            this.pageSize = val;
            this.getList()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.getList()
        },
    },
}
</script>

<style lang="less" scoped>
.mainBox {
    width: 100%;
    height: 406px;
    background: url('~@/assets/companyFile/背景22136.png') no-repeat;
    background-size: 100% 100%;
    padding: 70px 20px 60px;
    box-sizing: border-box;
    display: flex;
    position: relative;
    margin-top: 20px;

    .monitorBox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .monitorItem {
            height: 100%;
            width: calc(20% - 40px);
            background: url('~@/assets/companyFile/实时监控背景.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;

            .online {
                height: 20px;
                width: 100%;
                margin-top: 10px;
                margin-bottom: 4px;
                color: #4CF993;
                line-height: 20px;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .left {
                    color: #EAF6FF;
                }

                .dian {
                    display: inline-block;

                    height: 10px;
                    width: 6px;
                    height: 6px;
                    background: #4CF993;
                    border-radius: 3px;
                    margin: 0 5px;
                }
            }

            .outline {
                height: 20px;
                width: 100%;
                margin-top: 10px;
                margin-bottom: 4px;
                color: #ccc;
                line-height: 20px;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .left {
                    color: #EAF6FF;
                }

                .dian {
                    display: inline-block;

                    height: 10px;
                    width: 6px;
                    height: 6px;
                    background: #ccc;
                    border-radius: 3px;
                    margin: 0 5px;
                }
            }

            .videoImg {
                height: 140px;
                width: calc(100% - 20px);
                position: relative;

                .boxshadow {
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    left: 0;
                    top: 0;
                    background: rgba(0, 0, 0, 0.3);
                    z-index: 2;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    color: #FFFFFF;
                    letter-spacing: 0;
                    font-weight: 400;

                    i {
                        font-size: 16px;
                    }

                }

                img {
                    height: 100%;
                    width: 100%;
                }
            }

            .bottomtext {
                height: 20px;
                width: 100%;
                font-size: 12px;
                color: #FFFFFF;
                letter-spacing: 1.75px;

                padding-left: 10px;

                .online1 {
                    color: #4CF993;
                }

                .outline1 {
                    color: #ccc;
                }

            }
        }
    }

    .picForm {
        /deep/ .el-dialog {
            background-color: rgba(0, 0, 0, 0);
            background: url('~@/assets/companyFile/背景.png') no-repeat;
            background-size: 100% 100%;
            width: 811px;
            height: 534px;

            .el-dialog__title {
                font-size: 16px;
                color: #EBFFF4;
                letter-spacing: 2px;

                text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
                font-weight: 400;
            }

            .el-dialog__body {
                box-sizing: border-box;
                height: 480px;
                position: relative;

                img {
                    width: 100%;
                    height: 100%;
                    background: #f9f5f5;
                }

                .zhezhao {
                    width: 771px;
                    height: 420px;
                    position: absolute;
                    top: 30px;
                    left: 20px;
                    z-index: 1;
                    background: rgba(0, 0, 0, 0.4);
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .el-button--default {
                        width: 99px;
                        height: 46px;
                        padding: 0;
                        line-height: 46px;
                        text-align: center;
                        background: #163C53;
                        font-size: 16px;
                        color: #F8FBFF;
                        letter-spacing: 0.89px;
                        font-weight: 500;
                        border: 0;
                    }

                    .el-button--primary {
                        width: 99px;
                        height: 46px;
                        line-height: 46px;
                        padding: 0;
                        text-align: center;
                        background: rgba(0, 0, 0, 0);
                        border: 0;
                        background: url('~@/assets/companyFile/2121.png') no-repeat;
                        background-size: 100% 100%;
                        font-size: 16px;
                        color: #F8FBFF;
                        letter-spacing: 0.89px;
                        font-weight: 500;
                    }
                }
            }
        }
    }

    .search {
        position: absolute;
        right: 20px;
        top: 20px;
        display: flex;

    }

    /deep/.el-button--primary {
        margin-top: 5px;
        margin-left: 20px;
        width: 60px;
        height: 30px;
        line-height: 30px;
        padding: 0;
        text-align: center;
        background: rgba(0, 0, 0, 0);
        border: 0;
        background: url('~@/assets/companyFile/2121.png') no-repeat;
        background-size: 100% 100%;
        font-size: 14px;
        color: #F8FBFF;
        letter-spacing: 0.89px;
        font-weight: 500;
    }

    /deep/.el-form-item {
        display: flex;

        .el-form-item__label {
            color: #EAF6FF;
            letter-spacing: 1px;
            text-align: center;
            font-weight: 400;


        }

    }

    /deep/.el-input {
        .el-input__inner {
            // background: url('~@/assets/companyFile/2121.png') no-repeat;
            background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
            background-size: 100% 100%;
            border: 1px solid rgba(40, 132, 126, 1);
            color: rgba(234, 246, 255, 0.7);
            ;
        }
    }


    .title {
        position: absolute;
        top: 14px;
        left: 20px;
        width: 162px;
        height: 36px;
        line-height: 36;

        font-size: 16px;
        color: #EBFFF4;
        letter-spacing: 2px;
        line-height: 36px;
        text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
        font-weight: 400;

        span {
            color: #FF9191;
        }
    }


}
</style>