<template>
    <el-container v-loading="loading" element-loading-text="数据加载中" id="dept" style="height: calc(100vh - 80px)">
        <el-aside v-show="view" width="300px" style="overflow: hidden" id="drag-dept-left">
            <muentree
                @eleMenuData="getTreeText"
                @chushiData="chushiData"
                :checkbox="checkbox"
                :number="number"
                :tablename="tablename"
                ref="commonTree"
            ></muentree>
        </el-aside>
        <div id="drag-dept">
            <i
                :class="view ? 'el-icon-caret-left' : 'el-icon-caret-right'"
                style="
                    font-size: 18px;
                    cursor: pointer;
                    margin-right: 2%;
                    width: 80px;
                    height: 80px;
                    background: rgba(6, 70, 122, 0);
                "
                @click="changeview"
            ></i>
        </div>
        <el-main id="drag-dept-right" class="pl10">
            <div class="prompt">
                <div class="wzhi" v-if="falg">
                    <i style="color: #339966; font-size: 20px" class="el-icon-location-information"></i>
                    当前位置:
                    <span class="zt">
                        {{ treenode.parent.parent.parent.data.name }}>{{ treenode.parent.parent.data.name }}>{{
                            treenode.parent.data.name
                        }}>{{ treenode.data.name }}
                    </span>
                </div>
                <div class="wzhi" v-if="falg1">
                    <i style="color: #339966; font-size: 20px" class="el-icon-location-information"></i>
                    当前位置:
                    <span class="zt">{{ wezhiname }}</span>
                </div>
            </div>
            <bindTab :clickData="clickData" ref="bindTabRef" />
        </el-main>
    </el-container>
</template>
<script>
import Muentree from '@/views/cgy-components/menuTree/index1'
import bindTab from './bindTab.vue'
export default {
    components: {
        Muentree,
        bindTab
    },
    watch: {
        treenode(a, b) {
            if (a) {
                this.falg = true
                this.falg1 = false
            }
        }
    },
    data() {
        return {
            tablename: 1,
            number: undefined,
            id: '',
            vh: null,
            vhh: null,
            checked: undefined,
            checkbox: undefined,
            asideheight: undefined,
            timeValue: undefined,
            screenWidth: undefined,
            screenHeight: undefined,
            activeName: 'wtsjfx',
            loading: true,
            falg: false,
            falg1: true,
            view: true,
            dataTree: [],
            treenode: undefined,
            treedata: [],
            deptIndex: '',
            wezhiname: '',
            clickData: {}
        }
    },
    created() {},
    mounted() {
        var info = window.sessionStorage.getItem('Info')
        info = eval('(' + info + ')')
        this.deptIndex = info.deptId
        this.bindResize()
        this.vh = window.sessionStorage.getItem('appheight') - 70 + 'px'
        this.vhh = window.sessionStorage.getItem('appheight') - 70 + 'px'
    },
    methods: {
        changeview() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
        },

        handleClick(tab, event) {
            //debugger
            if (tab.name !== 'ycsj' && tab.name !== 'wtsjfx') {
                this.checkbox = false
                // this.falg1 = true;
                this.tablename = 1
            } else if (tab.name == 'ycsj') {
                this.falg = false
                this.falg1 = false
                this.checkbox = true
                this.number = 0
                this.tablename = 1
            } else if (tab.name == 'wtsjfx') {
                this.checkbox = false
                this.number = 1
                this.tablename = 1
            }
        },
        /**
         * 缩放条拖动进而改变左侧div宽度方法
         */
        bindResize() {
            /**开始坐标 */
            let startX
            /**开始宽度 */
            let startWidth = getScalableDivWidth()

            document.querySelector('#drag-dept').addEventListener('mousedown', startDrag)

            function startDrag(e) {
                startX = e.clientX
                startWidth = getScalableDivWidth()

                document.documentElement.addEventListener('mousemove', onDrag)
                document.documentElement.addEventListener('mouseup', stopDrag)
            }

            function onDrag(e) {
                let newWidth = startWidth + e.clientX - startX
                document.querySelector('#drag-dept-left').style.width = newWidth + 'px'
            }

            function stopDrag() {
                document.documentElement.removeEventListener('mousemove', onDrag)
                document.documentElement.removeEventListener('mouseup', stopDrag)
            }

            /**获取宽度 */
            function getScalableDivWidth() {
                return parseInt(window.getComputedStyle(document.querySelector('#drag-dept-left')).width, 10)
            }
        },
        //初始化树节点默认点击
        chushiData(id, data) {
            this.id = id
            window.sessionStorage.setItem('fist', id)
            this.treedata = data
            this.wezhiname = data[0].name + '>' + data[0].children[0].name + '>' + data[0].children[0].children[0].name
            this.clickData = data[0].children[0].children[0]
            this.loading = false
            this.$refs.bindTabRef.queryBind( this.clickData.id)
            //alert(this.wezhiname)
        },
        //二次点击触发点击事件
        getTreeText(menudata, treenode, nodeCom, id, name) {
            if (treenode.data.level == 6) {
                this.menudata = menudata
                this.treenode = treenode
                this.clickData = treenode.data
                this.nodeCom = nodeCom
                this.id = id
                this.$refs.bindTabRef.queryBind(this.clickData.id)
            } else {
                return
            }
        },

        //去重
        unique(arr) {
            if (!Array.isArray(arr)) {
                return
            }
            var array = []
            for (var i = 0; i < arr.length; i++) {
                if (array.indexOf(arr[i]) === -1) {
                    array.push(arr[i])
                }
            }
            return array
        }
    }
}
</script>
<style lang="scss" scoped>
.prompt {
    display: flex;
    justify-content: end;
    align-items: center;
}
.wzhi {
    // position: fixed;
    font-size: 14px;
    font-weight: 550;
}
.zt {
    color: $themeColor;
}
</style>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');

#drag-dept-left {
    min-width: 220px;
    max-width: 35%;
}

/**拖拽条样式 */
#drag-dept {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 10;
    right: 0;
    width: 5px;
    background: #868788;
    background-color: #04607c2a;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.35);
    cursor: col-resize;
}

#drag-dept i {
    display: inline-block;
    height: 14px;
    width: 5px;
    background-color: #e9e9e9;
    margin: 0 1px;
}

// ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
//   overflow-x: auto;
//   cursor: pointer;
// }
// ::v-deep .el-tabs__nav {
//   white-space: nowrap;
//   width: 100%;
//   position: relative;
//   -webkit-transition: -webkit-transform 0.3s;
//   transition: -webkit-transform 0.3s;
//   transition: transform 0.3s;
//   transition: transform 0.3s, -webkit-transform 0.3s;
//   transition: transform 0.3s, -webkit-transform 0.3s;
//   float: left;
//   z-index: 2;
// }
</style>
