<!--视频巡查-->
<template>
    <div class="comp-container" ref="comContainer">
        <div class="search-container" ref="searchPanle">
            <el-row class="search-row">
                <el-tag size="mini" class="label" effect="dark">
                    监控分类
                </el-tag>
                <el-select
                    style="width: 98%"
                    v-model="treeKey"
                    placeholder="请选择"
                    size="mini"
                    :popper-append-to-body="false"
                    @change="changeTreeType"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.code"
                    >
                    </el-option>
                </el-select>
            </el-row>
            <el-row class="search-row">
                <el-tag size="mini" class="label" effect="dark">
                    快捷搜索
                </el-tag>
                <el-input
                    style="width: 98%"
                    placeholder="输入关键字搜索"
                    v-model="filterText"
                    clearable
                    suffix-icon="el-icon-search"
                    size="mini"
                >
                </el-input>
            </el-row>
            <!-- <div class="flex tree-search-con">
                    <el-select
                        class="helf-search"
                        v-model="treeKey"
                        placeholder="请选择"
                        size="mini"
                        :popper-append-to-body="false"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    <el-input
                        class="helf-search"
                        placeholder="输入关键字搜索"
                        v-model="filterText"
                        clearable
                        suffix-icon="el-icon-search"
                        size="mini"
                    >
                    </el-input>
                </div> -->
        </div>
        <div class="filter-tree-outer" :style="`height: ${tableHeight}px`">
            <el-tree
                class="filter-tree editScroll"
                :data="data"
                :props="{value: 'code', label: 'name'}"
                :filter-node-method="filterNode"
                :current-node-key="currentNodeKey"
                ref="tree1"
                @node-click="nodeClick"
                :highlight-current="true"
            >
                <span class="custom-tree-node" slot-scope="{node, data}">
                    <i class="el-icon-folder"></i>&nbsp;&nbsp;
                    <span>{{ node.label }}</span
                    >&nbsp;&nbsp;
                    <span v-if="data.children && data.children.length"
                        >({{ data.children.length }})</span
                    >
                </span>
            </el-tree>
        </div>
        <VideoPatrolModel
            ref="VideoPatrolModel"
            :isShow="showInfo"
            :currentPoint="currentPoint"
        ></VideoPatrolModel>
    </div>
</template>

<script>
import VideoPatrolModel from './module/VideoPatrolModel.vue'
import videoMonitor from '@/api/videoMonitorapi.js'
import {gisCompMixin} from '@/mixins/gisCompMixin.js'
export default {
    name: 'VideoPatrol',
    components: {VideoPatrolModel},
    mixins: [gisCompMixin],
    data() {
        return {
            // 指定坐标字段
            lg: 'lgtd',
            lt: 'loc',
            // 信息窗model的ref
            modelName: 'VideoPatrolModel',
            isInitMarkers: false,
            iconUrl: require('./../../../../assets/img/gis_video.png'),
            currentPoint: {
                name: '',
            },
            treeKey: '',
            options: [],
            filterText: '',
            data: [],
            defaultProps: {
                children: 'code',
                label: 'name',
            },
            currentNodeKey: '',
            currentNode: null,
            // 视频监控点数据
            filterData: [
                // {
                //     name: '监控点1',
                //     lg: '106.463601',
                //     lt: '29.729001',
                // },
                // {
                //     name: '监控点2',
                //     lg: '106.450798',
                //     lt: '29.83281',
                // },
                // {
                //     name: '监控点3',
                //     lg: '106.435563',
                //     lt: '29.815159',
                // },
                // {
                //     name: '监控点4',
                //     lg: '106.388247',
                //     lt: '29.870726',
                // },
                // {
                //     name: '监控点5',
                //     lg: '106.656255',
                //     lt: '29.999493',
                // },
            ],
        }
    },
    created() {},
    watch: {
        filterText(val) {
            this.$refs.tree1.filter(val)
        },
    },
    mounted() {
        this.getTreen()
    },
    methods: {
        popupopen(){
            this.$refs.VideoPatrolModel.open()
        },
        popupclose(){
            this.$refs.VideoPatrolModel.close()
        },
        changeTreeType(val) {
            if (val) {
                let query = {
                    zoneCode: val,
                }
                videoMonitor.getVideoTree(query, (res) => {
                    this.data = res.value
                })
            } else {
                this.data = []
                this.$set(this.data, this.data, res.value)
            }
        },
        filterNode(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        nodeClick(data, node, nodeD) {
            this.currentNodeKey = data.id
            this.currentNode = node
            let query = {
                pageBean: {
                    pageSize: -1,
                },
                params: {
                    zoneCode: data.code,
                },
            }
            videoMonitor.getListPage(query, (res) => {
                console.log(res)
                this.filterData = res.value
                this.clearMarkers()
                this.initMarkers()
            })
        },
        infoWindow() {
            let sContent = this.$refs.VideoPatrolModel.$el
            let infoWin = new L.popup({
                autoPan: true,
                maxHeight: 300,
                minWidth: 400,
                maxWidth: 600,
            }).setContent(sContent)
            return infoWin
        },
        getTreen() {
            videoMonitor.getVideoF({}, (res) => {
                this.options = res.value
                this.treeKey = this.options[0].code
                let query = {
                    zoneCode: this.options[0].code,
                }
                videoMonitor.getVideoTree(query, (res) => {
                    this.data = res.value
                })
            })
        },
    },
}
</script>

<style lang="scss" scoped>
@import './../../css/gisComp.scss';
$border-color: #566a7e;
$active-color: #409eff;
$high-light-color: #ff7c40;
$text-color:#b7c6d8;
$text-color-dark:#8993a0;
$dark-bg: #1c2330;;
$dark-bg-lighter: #1d3b57;
.comp-container{
    // .video-tree{
    //     border: 1px solid $border-color;
    // }
    
    .tree-search-con{
        margin:4PX 2PX;
        >div{
            width: calc(100% - 4PX);
            margin: 0 2PX;
        }
        .helf-search{
            width: calc(50% - 4PX);
        }
    }
    .tree-controler-con{
        width: calc(100% - 8px);
        margin: 4px auto;
        border-bottom: 1px solid $border-color;
        i{
            font-size: 16px;
            padding:4px 8px 8px 8px;
            cursor: pointer;
            color: $active-color;
        }
        .light:hover{
            color: $high-light-color;
        }
        .disable{
            color:$text-color-dark;
            cursor: default
        }
    }
    .filter-tree-outer{
        height: calc(100% - 138PX);
        border: 1px solid $border-color;
    }
    .filter-tree-outer.short{
        height: calc(100% - 70PX);
    }
    /deep/ .el-select .el-input--suffix .el-input__inner,
    /deep/ .el-input--mini .el-input__inner{
        background-color: $dark-bg;
        border: 1px solid $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;
    }
    /deep/ .el-scrollbar__wrap{
        margin-right: -8PX !important;
    }
    /deep/ .el-popper[x-placement^="bottom"] .popper__arrow{
        top: -7PX;
        border-bottom-color: $border-color;
    } 
    /deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after  {
        border-bottom-color: $border-color;
    } 
    
    /deep/ .el-tree {
        background: transparent;
        color: $text-color;
        border: none!important;
    }
    .editScroll{
        width: 100%!important;
        height: 100%!important;
        overflow: auto;
    }
    /deep/ .el-tree-node:focus > .el-tree-node__content ,
    /deep/ .el-tree-node__content:hover,
    /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content
    {
        background-color: $dark-bg-lighter;
        color: $active-color;
    }
    /deep/ .el-tree-node > .el-tree-node__children {
        overflow: visible;
    }
    .custom-tree-node{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: start;
        font-size: 12px;
        padding-right: 8px;
    }
}
</style>