<template>
    <div class="video-monitor">
        <div id="map-container" class="full"></div>
        <div class="site-tree">
            <el-tabs
                class="tree-tabs"
                v-model="activeName"
                type="card"
                @tab-click="handleClick"
            >
                <el-tab-pane label="资源" name="first" class="full">
                    <div class="flex tree-search-con">
                        <el-select
                            class="helf-search"
                            v-model="treeKey"
                            @change="changeVedeoF"
                            placeholder="请选择"
                            size="mini"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.name"
                                :value="item.code"
                            >
                            </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 class="filter-tree-outer">
                        <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="
                                        data.type == 1
                                            ? 'el-icon-folder'
                                            : 'el-icon-video-camera'
                                    "
                                ></i
                                >&nbsp;&nbsp; <span>{{ node.label }}</span
                                >&nbsp;&nbsp;
                            </span>
                        </el-tree>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="收藏" name="second" class="full" lazy>
                    <div class="flex tree-search-con">
                        <el-input
                            placeholder="输入关键字搜索"
                            v-model="filterText2"
                            clearable
                            suffix-icon="el-icon-search"
                            size="mini"
                        >
                        </el-input>
                    </div>
                    <div class="flex tree-controler-con">
                        <i
                            @click="handlePlus"
                            class="el-icon-plus"
                            :class="plusAndEditLight ? 'light' : 'disable'"
                        ></i>
                        <i
                            @click="handleEdit"
                            class="el-icon-edit"
                            :class="plusAndEditLight ? 'light' : 'disable'"
                        ></i>
                        <i
                            @click="handleDelete"
                            class="el-icon-delete"
                            :class="deleteLight ? 'light' : 'disable'"
                        ></i>
                        <i
                            @click="handleNodeUp"
                            class="el-icon-top"
                            :class="upDownLight ? 'light' : 'disable'"
                        ></i>
                        <i
                            @click="handleNodeDown"
                            class="el-icon-bottom"
                            :class="upDownLight ? 'light' : 'disable'"
                        ></i>
                    </div>
                    <div class="filter-tree-outer short">
                        <el-tree
                            class="filter-tree editScroll"
                            :data="data2"
                            :props="defaultProps"
                            :filter-node-method="filterNode2"
                            :current-node-key="currentNodeKey2"
                            ref="tree2"
                            @node-click="nodeClick"
                            :highlight-current="true"
                        >
                            <span
                                class="custom-tree-node"
                                slot-scope="{node, data}"
                            >
                                <i
                                    :class="
                                        data.children && data.children.length
                                            ? 'el-icon-folder'
                                            : 'el-icon-video-camera'
                                    "
                                ></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>
                </el-tab-pane>
                <el-tab-pane label="预案" name="third" class="full" lazy>
                    <div class="flex tree-controler-con">
                        <i
                            @click="handlePlus"
                            class="el-icon-plus"
                            :class="plusAndEditLight ? 'light' : 'disable'"
                        ></i>
                        <i
                            @click="handleEdit"
                            class="el-icon-edit"
                            :class="plusAndEditLight ? 'light' : 'disable'"
                        ></i>
                        <i
                            @click="handleDelete"
                            class="el-icon-delete"
                            :class="deleteLight ? 'light' : 'disable'"
                        ></i>
                    </div>
                    <div class="filter-tree-outer">
                        <el-tree
                            class="filter-tree editScroll"
                            :data="data3"
                            :props="defaultProps"
                            :current-node-key="currentNodeKey3"
                            ref="tree1"
                            @node-click="nodeClick"
                            :highlight-current="true"
                        >
                            <span
                                class="custom-tree-node"
                                slot-scope="{node, data}"
                            >
                                <i
                                    :class="
                                        data.children && data.children.length
                                            ? 'el-icon-folder'
                                            : 'el-icon-video-camera'
                                    "
                                ></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>
                </el-tab-pane>
                <!-- <el-tab-pane label="构造物" name="fourth" class="full"
                    >构造物</el-tab-pane
                > -->
            </el-tabs>
        </div>
        <video-player
            id="videoIframe"
            class="videoWindow"
            ref="videoIframe"
            split="4"
        ></video-player>
    </div>
</template>

<script>
import videoPlayer from './components/videoPlayer.vue'
import videoMonitor from '@/api/videoMonitorapi.js'
export default {
    name: 'videoMonitor',
    components: {
        videoPlayer,
    },
    data() {
        return {
            option: {},
            activeName: 'first',
            filterText: '',
            filterText2: '',
            treeKey: '',
            currentNodeKey: '',
            currentNodeKey2: '',
            currentNodeKey3: '',
            currentNode: null,
            options: [],
            data: [],
            data2: [],
            data3: [],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            queryParam: {
                pageBean: {
                    pageSize: 10,
                    page: 1,
                },
                params: {
                    treeKey: null,
                },
            },
        }
    },
    computed: {
        plusAndEditLight() {
            let light = false
            if (!this.currentNode) {
                light = false
            } else {
                let isRoot = this.currentNode.data.id == 0 ? true : false
                if (isRoot || !this.currentNode.childNodes.length) {
                    light = false
                } else if (!isRoot && this.currentNode.childNodes.length) {
                    light = true
                }
            }
            return light
        },
        deleteLight() {
            let light = false
            if (!this.currentNode) {
                light = false
            } else {
                let isRoot = this.currentNode.data.id == 0 ? true : false
                if (isRoot) {
                    light = false
                } else {
                    light = true
                }
            }
            return light
        },
        upDownLight() {
            let light = false
            if (!this.currentNode) {
                light = false
            } else if (!this.currentNode.childNodes.length) {
                light = true
            }
            return light
        },
    },
    watch: {
        filterText(val) {
            this.$refs.tree1.filter(val)
        },
        filterText2(val) {
            this.$refs.tree2.filter(val)
        },
    },
    mounted() {
        this.getTreen()
    },
    methods: {
        // 根据监控点获取视频流地址
        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.$refs.videoIframe.useVideoURL(data)
                        })
                    } else {
                        this.$message.warning('获取监控点资源失败！')
                    }
                })
        },
        getDateList() {
            videoManger.getListPage(this.queryParam, (res) => {
                if (res.state) {
                    this.tableData = res.value
                    this.total = res.value.total
                    this.relationList.rscd = this.relation
                    this.loading = false
                }
            })
        },
        getTreen() {
            videoMonitor.getVideoF({}, (res) => {
                this.options = res.value
                this.treeKey = this.options[0].code
                this.query = {
                    zoneCode: this.treeKey,
                }
                videoMonitor.getVideoTreeSite(this.query, (res) => {
                    this.data = res.value
                    this.queryParam.params.treeKey = this.data[0].code
                })
                // videoMonitor.getVideoTree(this.query, (res) => {
                //     this.data = res.value
                //     // console.log(this.videoTree,666)
                //     this.queryParam.params.treeKey = this.data[0].code
                // })
            })
        },
        changeVedeoF(val) {
            if (val) {
                this.treeKey = val
                this.query = {
                    zoneCode: val,
                }
                videoMonitor.getVideoTreeSite(this.query, (res) => {
                    this.data = res.value
                })
            } else {
                this.data = []
                this.$set(this.data, this.data, res.value)
            }
        },
        handlePlus() {},
        handleEdit() {},
        handleDelete() {},
        handleNodeUp() {},
        handleNodeDown() {},
        handleClick(item) {},
        nodeClick(data, node, nodeD) {
            console.log(data, node, nodeD)
            this.currentNodeKey = data.id
            this.currentNode = node
            this.queryParam.params.treeKey = data.code
            if (data.type == 2) {
                this.getSiteVideoURL(data.code)
                // this.getSiteVideoURL("643bb9a406b846ceb69ac049a0930ae1")
            }
        },
        filterNode(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        filterNode2(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
    },
}
</script>

<style lang="scss" scoped>
@import './css/screen.scss';
$border-color: #566a7e;
$active-color: #409eff;
$high-light-color: #ff7c40;
$text-color:#b7c6d8;
$text-color-dark:#8993a0;
$dark-bg:#0b1926;
$dark-bg-lighter: #1d3b57;
.video-monitor {
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: #060f18; //#ebeef5;
    box-sizing: border-box;
    // background-image: url('./../assets/img/waterbg5.jpg'); 
    background-image: url('../../assets/img/app-bg.jpg'); 
    background-repeat:no-repeat;
    background-size:100% 100%;
    color: $text-color;
    position: relative;
    display: flex;
}
#map-container{
    position: absolute;
    left: 0;
    top: 0;
}
.videoWindow{
    width: calc(100% - 320PX);
    height: 100%;
}
.site-tree{
    width: 320PX;
    height: 100%;
    background: rgba(#314351, 0.4);
    box-shadow: inset 0 0 100px rgba(#000, 0.3);
    
    /deep/ .el-tabs--card > .el-tabs__header {
        border-bottom: 1px solid $border-color;
        margin-bottom: 0;
    }
    /deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav{
        border: none;
    }
    /deep/ .el-tabs__item {
        padding: 6PX 16PX;
        height: auto;
        box-sizing: border-box;
        line-height: normal;
        display: inline-block;
        list-style: none;
        font-size: 14px;
        font-weight: 700;
        color: $text-color;
        position: relative;
        border-radius: 4PX 4PX 0 0;
        border: 1px solid $border-color;
        margin: 0 2PX;
        border-bottom: 0;
    }
    /deep/ .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
        padding-right: 16PX;
    }
    /deep/ .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2){
        padding-left: 16PX;
    }
    /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
        border-left: 1px solid $border-color;
    }
    /deep/ .el-tabs__item:hover {
        color: $active-color;
        cursor: pointer;
    }
    /deep/ .el-tabs__item.is-active {
        color: $active-color;
    }
    .tree-tabs{
        width: 100%;
        height: 100%;
    }
    /deep/ .el-tabs__content{
        height: calc(100% - 28PX);
    }
    .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% - 40PX);
    }
    .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;
    }
    .videoWindow {
        width: 100%;
        height: 100%;
    }

}
</style>