<template>
    <div class="mc-main">
        <div ref="boxLinebl" :style="boxHeightb" class="layui-col-md6 mr-r-15">
            <div class="bg-style">
                <div class="mc-nomal-title">知识库</div>
                <div class="input-box">
                    <el-input
                        size="small"
                        class="input-style"
                        placeholder="请输入内容">
                        <i slot="suffix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </div>
                <div class="mc-function-box">
                    <div class="function-box">
                        <div v-for="items in typeData" :key="items.text" class="f-box-info">
                            <i :class="'iconfont ' + items.icon" :style="'background:'+items.bg"></i>
                            <span>{{items.text}}</span>
                        </div>
                    </div>
                </div>
                <div style="margin: 20px 0;">最近更新</div>
                <div class="mc-file-box">
                    <div class="mc-file-item" v-for="item in fileData">
                        <div class="mc-file-icon">
                            <span :style="'color:'+item.bg" :class="'iconfont ' + item.icon"></span>
                        </div>
                        <div class="mc-file-main">
                            <div class="mc-file-name">{{item.title}}</div>
                            <div class="mc-file-time">{{item.time}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div ref="boxLinebr" :style="boxHeightb" class="layui-col-md6">
            <div class="bg-style">
                <div class="mc-nomal-title">组织架构</div>
                <div class="input-box">
                    <el-input
                        size="small"
                        class="input-style"
                        v-model="filterText"
                        placeholder="请输入内容">
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="checkTree"></i>
                    </el-input>
                </div>
                <div class="box-scoll">
                    <el-tree
                        :data="data"
                        :props="defaultProps"
                        class="filter-tree"
                        default-expand-all
                        :filter-node-method="filterNode"
                        ref="tree">
                    <span class="custom-tree-node" slot-scope="{ node, data }" @click="clicktree(node)">
                        <span v-if="!node.data.name">
                            <i class="el-icon-folder" style="color: yellow"></i>
                            {{ node.label }}
                        </span>
                        <div v-if="node.data.name" class="tree-box">
                            <img src="../../../static/img/sun.png" alt="">
                            <div>
                                <span>{{node.data.name}}</span>
                                <span>{{node.data.tel}}</span>
                            </div>
                            <span style="padding-right: 20px;float: right">出差中</span>
                        </div>
                    </span>
                    </el-tree>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                filterText:'',
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                typeData: [
                    {bg: 'red', icon: 'icon-tongji', text: '我的'},
                    {bg: 'red', icon: 'icon-tongji', text: '部门'},
                    {bg: 'red', icon: 'icon-tongji', text: '公司'},
                    {bg: 'red', icon: 'icon-tongji', text: '集团'},
                ],
                fileData: [
                    {icon: 'icon-word', title: '家庭带宽文档', time: '2020-01-07', bg: '#FF654E'},
                    {icon: 'icon-excel', title: '家庭带宽表格', time: '2020-02-07', bg: '#67DB63'},
                    {icon: 'icon-ppt', title: '家庭带宽PPT', time: '2020-03-07', bg: '#FF8943'},
                    {icon: 'icon-word', title: '前端开发规范', time: '2020-04-07', bg: '#FF654E'},
                    {icon: 'icon-excel', title: '统计销售表格', time: '2020-05-07', bg: '#67DB63'}
                ],
                data: [
                    {
                        label: '黑龙江省移动',
                        children: [{
                            label: '省公司',
                            children: [
                                {
                                    label: '三级 1-1-1',
                                    name: "xxx",
                                    tel: "13366666666",
                                    status: 1,
                                    img: 'http://......'
                                },
                                {
                                    label: 'xxx13399999999',
                                    name: "xxx",
                                    tel: "13399999999",
                                    status: 1,
                                    img: 'http://......'
                                },
                                {
                                    label: 'xxx13388888888',
                                    name: "xxx",
                                    tel: "13388888888",
                                    status: 1,
                                    img: 'http://......'
                                },
                                {
                                    label: 'xxx13377777777',
                                    name: "xxx",
                                    tel: "13377777777",
                                    status: 1,
                                    img: 'http://......'
                                }
                            ]
                        }]
                    },
                    {
                        label: '市场部',
                        children: [{
                            label: '分析运营室',
                            children: [
                                {
                                    label: 'xxx13399999999',
                                    name: "xxx",
                                    tel: "13399999999",
                                    status: 1,
                                    img: 'http://......'
                                },
                                {
                                    label: 'xxx13388888888',
                                    name: "xxx",
                                    tel: "13388888888",
                                    status: 1,
                                    img: 'http://......'
                                },
                                {
                                    label: 'xxx13377777777',
                                    name: "xxx",
                                    tel: "13377777777",
                                    status: 1,
                                    img: 'http://......'
                                },
                                {
                                    label: 'xxx13399999999',
                                    name: "xxx",
                                    tel: "13399999999",
                                    status: 1,
                                    img: 'http://......'
                                },
                                {
                                    label: 'xxx13388888888',
                                    name: "xxx",
                                    tel: "13388888888",
                                    status: 1,
                                    img: 'http://......'
                                },
                                {
                                    label: 'xxx13377777777',
                                    name: "xxx",
                                    tel: "13377777777",
                                    status: 1,
                                    img: 'http://......'
                                }
                            ]
                        }]
                    }
                ],
                boxHeightb: {
                    "height": 'auto',
                },
            }
        },
        methods: {
            hAuto(){
                let boxLinebl = this.$refs.boxLinebl.offsetHeight;
                let boxLinebr = this.$refs.boxLinebr.offsetHeight;
                if (boxLinebl > boxLinebr) {
                    this.boxHeightb.height = boxLinebl + 'px';
                } else {
                    this.boxHeightb.height = boxLinebr + 'px';
                }
            },
            //搜索组织
            checkTree() {
                let t = this.filterText;
                console.log(t);
                this.$refs.tree.filter(t);
            },
            //点击组织机构
            clicktree(v) {
                console.log(v.data);
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
        },
        mounted() {
            this.hAuto();
        },
    }
</script>

<style lang="scss" scoped>
    .mc-main {
        overflow: hidden;

        .layui-col-md6 {
            display: inline-block;
            margin-top: 15px;
            margin-left: 7px;
            width: calc(50% - 7px);
            float: left;
            background: #fff;
        }

        .box-scoll{
            height: 350px;
            width: 100%;
            overflow-y: scroll;
            padding-right: 25px;
        }

        .mr-r-15 {
            margin-left: 0;
            margin-right: 7px;
        }
    }
    .bg-style {
        /*background-color: white;*/
        padding: 25px;

        .custom-tree-node {
            width: 100%;
        }

        .tree-box {
            overflow: hidden;
            height: 26px;
            width: 100%;

            img {
                width: 26px;
                height: 26px;
                float: left;
            }

            div {
                display: inline-block;
                height: 26px;
                line-height: 26px;

                span {
                    padding-left: 10px;
                }
            }
        }
    }
    .mc-nomal-title {
        font-size: 20px;
        font-weight: 500;
        color: #333;
        padding-bottom: 10px;
    }
    .input-box {
        border: 2px solid #50A8EC;
        border-radius: 5px;
        margin: 15px 0;
        height: 35px;
        overflow: hidden;
    }

    .input-style {
        width: 100%;
    }
    .mc-function-box {
        margin-top: 10px;

        .function-box {
            .f-box-tit {
                font-size: 16px;
                margin: 15px 0 10px 20px;
            }

            .f-box-info {
                display: inline-block;
                height: 80px;
                margin: 0 10px;

                i {
                    width: 50px;
                    height: 50px;
                    border-radius: 18px;
                    display: block;
                    color: #fff;
                    text-align: center;
                    line-height: 50px;
                    cursor: pointer;
                    margin: 0 20px;
                }

                span {
                    font-size: 13px;
                    display: block;
                    text-align: center;
                    width: 100%;
                    height: 20px;
                    overflow: hidden;

                }
            }
        }
    }
    .mc-file-box {
        display: flex;
    }

    .mc-file-item {
        width: 20%;
        text-align: center;
        cursor: pointer;
    }

    .mc-file-icon span {
        font-size: 300%;
        width: 48px;
        height: 48px;
    }

    .mc-file-title {
        font-size: 12px;
    }

    .mc-file-time {
        color: #818181;
        font-size: 10px;
    }
</style>
