<template>
    <div class="main">
        <div class="box">
            <div class="title">要素资源</div>
            <div class="leftBox">
                <zhmap class="map" :companyInfoList="companyInfoList" :deviceVideoInfoList="deviceVideoInfoList"
                    @showCompanyData="showCompanyData" @showCameraData="showCameraData">
                </zhmap>
                <div class="searchBox">
                    <el-select v-model="Selectvalue" placeholder="请选择" class="topSelect1">
                        <el-option label="企业" value="企业">
                        </el-option>
                        <el-option label="监控" value="监控">
                        </el-option>
                    </el-select>
                    <el-form :model="formInline" class="search">
                        <el-form-item class="formItem">
                            <el-input v-model.trim="formInline.name" placeholder="请输入名称搜索" clearable
                                class="formIpt"></el-input>
                        </el-form-item>
                        <el-button type="primary" @click="getCompanyList()">搜索</el-button>
                        <el-button @click="reset()">重置</el-button>
                    </el-form>
                </div>
                <div class="companyCanban" v-if="showCompany">
                    <div class="close" @click="showCompany = false"></div>
                    <el-tooltip :content="companyData.companyName" placement="top-start">
                        <div class="companyName">{{ companyData.companyName }}</div>
                    </el-tooltip>
                    <div class="companybiaoqian">企业类型： <div
                            :class="{ 'shewei': a == '剧毒' || a == '易制毒', 'zhongdian': a == '消防重点' || a == '所管消防', 'zhibao': a == '放射源' || a == '易制爆', 'zhian': a == '治安重点' || a == '创安单位' }"
                            v-for="a in companyData.companyTypeList" :key="a">{{ a }}
                        </div>
                    </div>
                    <div class="companyxinxi">企业地址：<span>{{ companyData.companyAddress }}</span></div>
                    <div class="companyxinxi">企业性质：<span>{{ companyData.companyNature }}</span></div>
                    <div class="companyxinxi">成立日期：<span>{{ companyData.establishDate }}</span></div>
                    <div class="companyxinxi">营业期限：<span>{{ companyData.businessTermDate }}</span></div>
                    <div class="companyxinxi">登记机关：<span>{{ companyData.registerAuthority }}</span></div>
                    <div class="companyxinxi">企业法人：<span>{{ companyData.legalPerson }}</span></div>
                    <div class="companyxinxi">安全责任人：<span>{{ companyData.emergencyContact }}</span></div>
                    <div class="companyxinxi">责任人电话：<span>{{ companyData.emergencyContactPhone }}</span></div>
                    <div class="companyxinxi">经营范围：<span>{{ companyData.businessScope }}</span></div>
                    <div class="todangan" @click="toArchive">查看企业档案 <img src="../../../public/pbImg/跳转.png" alt=""></div>
                </div>
                <div class="cameraCanban" v-if="showCamera">
                    <div class="close" @click="showCamera = false"></div>
                    <el-tooltip :content="cameraData.deviceName" placement="top-start">
                        <div class="companyName">{{ cameraData.deviceName }}</div>
                    </el-tooltip>

                    <div class="companyxinxi">隶属企业：<span>{{ cameraData.companyName }}</span></div>
                    <div class="companyxinxi">监控：<span>{{ cameraData.deviceAddress }}</span></div>
                    <div class="companyxinxi">监控状态：<span class="online" v-if="cameraData.isOnline == 1">在线</span><span
                            class="outline" v-else>离线</span></div>
                    <div class="todangan" @click="showVideo">查看实时监控 <img src="../../../public/pbImg/跳转.png" alt=""></div>
                </div>
                <div class="tucengCanban">
                    <div class="topText">图层</div>
                    <div class="tucengBox">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                            @change="handleCheckAllChange">全选</el-checkbox>
                        <div style="margin: 15px 0;"></div>
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city
                            }} <span v-if="city == '园区企业'">（{{ companyInfoList.length }}）</span><span v-else>（{{
    deviceVideoInfoList.length
}}）</span></el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <el-dialog title="实时监控" :visible.sync="diaVisible" class="picForm">
                    <playVideo :video="{ url: monitorData.wsFlv, index: 1 }" :control="true" v-if="diaVisible"></playVideo>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import { statistic, queryCompany, queryVideo } from '@/api/factorResources'
import { realTimeMonitoring } from '@/api/archives'
import playVideo from '@/components/videoPlayer'
import zhmap from './map.vue'
export default {
    components: {
        zhmap,
        playVideo
    },

    data() {
        return {
            total: 0,
            companyInfoList: [],
            deviceVideoInfoList: [],
            diaVisible: false,
            checkedDepts: [],
            deptList: [],
            chuzhiData: {},
            Selectvalue: '企业',
            formInline: {},
            companyData: {},
            showCompany: false,
            cameraData: {},
            showCamera: false,
            monitorData: {},
            checkAll: false,
            cityOptions: ['视频监控', '园区企业'],
            checkedCities: ['视频监控', '园区企业'],
            cities: ['视频监控', '园区企业'],
            isIndeterminate: true
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            statistic().then(res => {
                this.companyInfoList = res.data.companyInfoList
                this.deviceVideoInfoList = res.data.deviceVideoInfoList
            })
        },
        getCompanyList() {
            if (this.Selectvalue == '企业') {
                queryCompany({ ...this.formInline }).then(res => {
                    this.companyInfoList = res.data
                    this.deviceVideoInfoList = []
                })
            } else {
                queryVideo({ ...this.formInline }).then(res => {
                    this.deviceVideoInfoList = res.data
                    this.companyInfoList = []
                })
            }

        },
        reset() {
            this.formInline = {}
            this.getList()
        },
        showCompanyData(val) {
            this.companyData = val
            this.showCompany = true
        },
        showCameraData(val) {
            this.cameraData = val
            this.showCamera = true
        },
        toArchive() {
            sessionStorage.setItem('companyID', this.companyData.id)
            sessionStorage.setItem('companyName', this.companyData.companyName)
            this.$router.push({
                name: 'archives',
            })
        },
        showVideo() {
            realTimeMonitoring({ pageSize: 10, pageNum: 1, deviceName: this.cameraData.deviceName, companyId: this.cameraData.companyId }).then(res => {
                this.monitorData = res.data[0]
                this.diaVisible = true
            })
        },
        handleCheckAllChange(val) {
            console.log(val, 'val');

            this.checkedCities = val ? this.cityOptions : [];
            this.isIndeterminate = false;
            if (val) {
                this.getList()
            } else {
                this.companyInfoList = []
                this.deviceVideoInfoList = []
            }
        },
        handleCheckedCitiesChange(value) {
            console.log(value, 'value');
            if (value.length) {
                if (value.length == 2) {
                    this.getList()
                } else {
                    if (value[0] == "视频监控") {
                        statistic().then(res => {
                            this.companyInfoList = []
                            this.deviceVideoInfoList = res.data.deviceVideoInfoList
                        })
                    } else {
                        statistic().then(res => {
                            this.companyInfoList = res.data.companyInfoList
                            this.deviceVideoInfoList = []
                        })
                    }

                }
            } else {
                this.companyInfoList = []
                this.deviceVideoInfoList = []
            }
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
    }

}
</script>

<style lang="less" scoped>
.main {
    width: 100%;
    height: calc(100% - 80px);

    box-sizing: border-box;

    padding: 20px;

    .box {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 70px 25px 20px;
        background: url('~@/assets/realtimeWarning/231.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        display: flex;

        .title {
            position: absolute;
            top: 25px;
            left: 25px;
            font-size: 18px;
            color: #FFFFFF;
            letter-spacing: 1px;
            font-weight: 500;
        }

        .leftBox {
            width: calc(100%);
            height: 100%;
            //margin-right: 20px;
            box-sizing: border-box;
            background: url('~@/assets/realtimeWarning/back002.png') no-repeat;
            background-size: 100% 100%;
            padding: 20px;
            position: relative;

            .map {
                height: 100%;
                width: 100%;
            }

            .searchBox {
                position: absolute;
                height: 40px;
                width: 500px;
                top: 40px;
                right: 20px;
                display: flex;
                box-sizing: border-box;

                .topSelect1 {
                    margin-top: 20px;

                    /deep/ .el-input {
                        width: 100px;
                        height: 35px;

                        .el-select__caret {
                            line-height: 35px;
                        }

                        .el-input__inner {
                            height: 35px;
                            // background: url('~@/assets/safetyIndex/选择框.png') no-repeat;
                            // background-size: 100% 100%;
                            background: #3B4450;
                            font-size: 14px;
                            color: #C4E5FF;
                            letter-spacing: 1px;
                            text-align: center;
                            font-weight: 400;
                            border: 0;

                        }
                    }
                }

                .search {
                    height: 35px;
                    box-sizing: border-box;
                }

                /deep/.el-input__inner {
                    // background: url('~@/assets/companyFile/2121.png') no-repeat;
                    background: #3B4450;
                    border: 1px solid #5B748C;
                    color: rgba(234, 246, 255, 0.7);
                    height: 35px;

                    .el-range-separator {
                        color: #ccc;
                    }

                    .el-range-input {
                        background: rgba(0, 0, 0, 0);
                        color: #ccc;
                    }
                }

                /deep/.el-form-item {

                    margin: 0;

                    .el-form-item__content {
                        line-height: 35px;
                    }

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

                }

                /deep/.el-button--primary {
                    width: 60px;
                    height: 35px;
                    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-button--default {
                    width: 60px;
                    height: 35px;
                    line-height: 30px;
                    padding: 0;
                    text-align: center;
                    background: #3B4450;
                    border: 0;

                    font-size: 14px;
                    color: #F8FBFF;
                    letter-spacing: 0.89px;
                    font-weight: 500;
                }
            }

            .companyCanban {
                width: 320px;
                height: 540px;
                position: absolute;
                top: 120px;
                right: 35px;
                background: #3B4450;
                border: 1px solid #5B748C;
                padding: 14px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 6px;

                }

                // 滚动条里面默认的小方块,自定义样式
                &::-webkit-scrollbar-thumb {
                    background: rgba(255, 255, 255, 0.44);
                    border-radius: 5px;
                }

                // 滚动条里面的轨道
                &::-webkit-scrollbar-track {
                    background: transparent;

                }

                .close {
                    position: absolute;
                    top: 14px;
                    right: 14px;
                    width: 18px;
                    height: 18px;
                    background: url('../../../public/pbImg/close.png') no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;
                }

                .companyName {
                    width: 100%;
                    height: 20px;
                    font-size: 14px;
                    color: #FFE6D9;
                    letter-spacing: 0;
                    line-height: 16px;
                    text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
                    font-weight: 500;
                    padding-right: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap; //禁止换行
                }

                .companybiaoqian {
                    margin-top: 10px;
                    width: 100%;
                    height: 28px;
                    font-size: 14px;
                    color: #D0DEEE;
                    letter-spacing: 0;
                    font-weight: 400;
                    overflow: hidden;
                    white-space: nowrap; //禁止换行
                    width: 270px;
                    text-overflow: ellipsis; //...

                    .shewei {
                        height: 26px;
                        line-height: 26px;
                        width: auto;
                        background: url('~@/assets/companyFile/sheweiback.png') no-repeat;
                        padding: 0 5px;
                        font-size: 14px;
                        color: #B5EBFF;
                        letter-spacing: 0.44px;
                        font-weight: 400;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }

                    .zhongdian {
                        height: 26px;
                        line-height: 26px;
                        width: auto;
                        background: url('~@/assets/companyFile/zhongdianback.png') no-repeat;
                        padding: 0 5px;
                        font-size: 14px;
                        color: #E3DEFF;
                        letter-spacing: 0.44px;
                        font-weight: 400;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }

                    .zhibao {
                        height: 26px;
                        line-height: 26px;
                        width: auto;
                        background: url('~@/assets/companyFile/zhibaoback.png') no-repeat;
                        padding: 0 5px;
                        font-size: 14px;
                        color: #E3DEFF;
                        letter-spacing: 0.44px;
                        font-weight: 400;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }

                    .zhian {
                        height: 26px;
                        line-height: 26px;
                        width: auto;
                        background: url('~@/assets/companyFile/zhianback.png') no-repeat;
                        padding: 0 5px;
                        font-size: 14px;
                        color: #E3DEFF;
                        letter-spacing: 0.44px;
                        font-weight: 400;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }
                }

                .companyxinxi {
                    margin-top: 10px;
                    width: 100%;
                    //height: 28px;
                    font-size: 14px;
                    color: #D0DEEE;
                    letter-spacing: 0;
                    font-weight: 400;

                    span {
                        font-size: 14px;
                        color: #FFFFFF;
                        letter-spacing: 0;
                    }
                }

                .todangan {
                    margin-top: 15px;
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    cursor: pointer;
                    font-size: 14px;
                    color: #4BCCFF;
                    letter-spacing: 0;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 20px;
                        height: 20px;
                    }
                }
            }

            .tucengCanban {
                width: 180px;
                height: 113px;
                position: absolute;
                top: 30px;
                left: 35px;
                background: #3B4450;
                border: 1px solid #5B748C;
                padding: 0 14px;

                .topText {
                    height: 30px;
                    border-bottom: 1px solid rgba(212, 212, 212, 0.25);
                    font-size: 14px;
                    color: #D0DEEE;
                    letter-spacing: 0;
                    font-weight: 400;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .tucengBox {
                    height: 150px;
                    height: 100%;

                    /deep/.el-checkbox {
                        color: #D0DEEE;
                    }
                }
            }

            .cameraCanban {
                width: 320px;
                height: 232px;
                position: absolute;
                top: 120px;
                right: 35px;
                background: #3B4450;
                border: 1px solid #5B748C;
                padding: 14px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 6px;

                }

                // 滚动条里面默认的小方块,自定义样式
                &::-webkit-scrollbar-thumb {
                    background: rgba(255, 255, 255, 0.44);
                    border-radius: 5px;
                }

                // 滚动条里面的轨道
                &::-webkit-scrollbar-track {
                    background: transparent;

                }

                .close {
                    position: absolute;
                    top: 14px;
                    right: 14px;
                    width: 18px;
                    height: 18px;
                    background: url('../../../public/pbImg/close.png') no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;
                }

                .companyName {
                    width: 100%;
                    height: 20px;
                    font-size: 14px;
                    color: #FFE6D9;
                    letter-spacing: 0;
                    line-height: 16px;
                    text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
                    font-weight: 500;
                }

                .companybiaoqian {
                    margin-top: 10px;
                    width: 100%;
                    height: 28px;
                    font-size: 14px;
                    color: #D0DEEE;
                    letter-spacing: 0;
                    font-weight: 400;
                    overflow: hidden;
                    white-space: nowrap; //禁止换行
                    width: 270px;
                    text-overflow: ellipsis; //...

                    .shewei {
                        height: 26px;
                        line-height: 26px;
                        width: auto;
                        background: url('~@/assets/companyFile/sheweiback.png') no-repeat;
                        padding: 0 5px;
                        font-size: 14px;
                        color: #B5EBFF;
                        letter-spacing: 0.44px;
                        font-weight: 400;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }

                    .zhongdian {
                        height: 26px;
                        line-height: 26px;
                        width: auto;
                        background: url('~@/assets/companyFile/zhongdianback.png') no-repeat;
                        padding: 0 5px;
                        font-size: 14px;
                        color: #E3DEFF;
                        letter-spacing: 0.44px;
                        font-weight: 400;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }

                    .zhibao {
                        height: 26px;
                        line-height: 26px;
                        width: auto;
                        background: url('~@/assets/companyFile/zhibaoback.png') no-repeat;
                        padding: 0 5px;
                        font-size: 14px;
                        color: #E3DEFF;
                        letter-spacing: 0.44px;
                        font-weight: 400;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }

                    .zhian {
                        height: 26px;
                        line-height: 26px;
                        width: auto;
                        background: url('~@/assets/companyFile/zhianback.png') no-repeat;
                        padding: 0 5px;
                        font-size: 14px;
                        color: #E3DEFF;
                        letter-spacing: 0.44px;
                        font-weight: 400;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }
                }

                .companyxinxi {
                    margin-top: 20px;
                    width: 100%;
                    //height: 28px;
                    font-size: 14px;
                    color: #D0DEEE;
                    letter-spacing: 0;
                    font-weight: 400;

                    .online {
                        font-size: 14px;
                        color: #4CF993;
                        letter-spacing: 0;
                        font-weight: 400;
                    }

                    .outline {
                        font-size: 14px;
                        color: #FF7171;
                        letter-spacing: 0;
                        font-weight: 400;
                    }

                    span {
                        font-size: 14px;
                        color: #FFFFFF;
                        letter-spacing: 0;
                    }
                }

                .todangan {
                    margin-top: 15px;
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    cursor: pointer;
                    font-size: 14px;
                    color: #4BCCFF;
                    letter-spacing: 0;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }

        .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;
                        }
                    }
                }
            }
        }
    }

}
</style>