<template>
    <div id="fzjcgl">
        <el-tabs type="border-card" @tab-click="cli_a" v-model="editableTabsValue">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-document-copy"></i>文献库管理</span>
                <div style="width:100%;height:100%;">
                    <component :is="currentRole_wx_data" :clientDetails="clientDetails_wx_data" ref="mychild_wx_data" />
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane>
                <span slot="label"><i class="el-icon-phone-outline"></i>决策支持管理</span>
                <div style="width:100%;height:100%;">
                    <component :is="fzjcgl_jczc" :clientDetails="jczc_data" ref="jczc" />
                </div>
            </el-tab-pane> -->
        </el-tabs>
    </div>
</template>
<script>
import navs_wx from "./wx_data_public.vue";
import fzjcgl_jczc from "./fzjcgl_jczc.vue";
let id = 1000;
export default {
    components: { navs_wx,fzjcgl_jczc},
    data() {
        return {
            currentRole_wx_data: "",
            clientDetails_wx_data: {},
            editableTabsValue: "0",
            jczc_data:{},
            fzjcgl_jczc:'navs_wx'
        };
    },
    methods: {
        cli_a() {
            let _this = this;
            if (_this.editableTabsValue == 0) {
                (_this.currentRole_wx_data = "navs_wx"),
                    setTimeout(() =>{
                        _this.clientDetails_wx_data = {
                            module_name: "信息制品文档",
                            fl_type: 2,
                            type_folder: "DocumentPDF",
                        };
                    },100);
            }
        },
    },
    activated() {
        this.cli_a();
    }
};
</script>

<style lang="scss">
#fzjcgl {
  width: 99%;
  height: 98%;
  padding: 30px;
  box-sizing: border-box;
  overflow-y: auto;
  >.el-tabs--border-card {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border: 2px solid #3a5f94c9;
    border-radius: 5px;
    box-sizing: border-box;
    background: #ffffff00;
        >.el-tabs__content{
            width: 100%;
            height: calc(100% - 40px);
            box-sizing: border-box;
        }
        > .el-tabs__header {
            background-color: unset;
            border-bottom: 2px solid #3a5f94c9;
            .el-tabs__item {
                color: #dedede;
            }
            .el-tabs__item.is-active {
                color: #ffe000;
                background-color: #3a5f94c9;
                border-right-color: #3a5f94c9;
                border-left-color: #3a5f94c9;
            }
            .el-tabs__item:not(.is-disabled):hover {
                color: #ffe000;
            }
        }
    }

    .rwks-left {
        width: calc(15% - 10px);
        height: calc(100% - 70px);
        padding-top: 0px;
        margin-left: 10px;
        box-sizing: border-box;
        float: left;
        overflow-y: auto;
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
            position: relative;
            width: 82%;
            .first-span {
                width: 100%;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .el-input {
            position: relative;
            font-size: 14px;
            display: inline-block;
            width: 100%;
        }
        .el-button + .el-button {
            margin-left: 0px !important;
        }
        .el-tree {
            color: white;
            background: transparent;
            height: calc(100% - 0px);
            overflow-y: auto;
            .el-tree-node__content {
                height: 40px;
                .el-icon-circle-plus {
                    display: none;
                }
                .el-icon-error {
                    display: none;
                }
                .el-icon-upload {
                    display: none;
                }
            }
        }
        .el-tree > .el-tree-node > .el-tree-node__content {
            height: 40px;
            background-image: url(../../assets/img/yqjc/24.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .el-icon-error {
                display: none !important;
            }
            // .el-button{
            //   margin-left: -50px;
            // }
        }
        .el-tree
            > .el-tree-node
            > .el-tree-node__children
            > .el-tree-node
            > .el-tree-node__content {
            height: 40px;
            // background-image: url(../../assets/img/yqjc/24.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .el-tree
            > .el-tree-node
            > .el-tree-node__content
            > .el-tree-node__label {
            font-size: 16px !important;
        }
        .el-tree > .el-tree-node > .el-tree-node__children {
            background-color: #1d2d46ad !important;
        }
        .el-tree-node:focus > .el-tree-node__content {
            background-color: #00648a96 !important;
            // border-radius: 5px;
        }

        .el-tree-node__content:hover,
        .el-tree-node__content:focus {
            background-color: #00638a50 !important;
            // border-radius: 5px;
            .el-icon-circle-plus {
                display: block;
            }
            .el-icon-error {
                display: block;
            }
            .el-icon-upload {
                display: block;
            }
        }
        .el-tree--highlight-current
            .el-tree-node.is-current
            > .el-tree-node__content {
            background-color: #00648a96 !important;
            // border-radius: 5px;
        }
        .el-icon-circle-plus {
            font-size: 16px;
            color: #00a6f5;
        }
        .el-icon-error {
            font-size: 16px;
            color: #ff5454;
        }
        .el-icon-upload {
            font-size: 16px;
            color: #2bce0e;
        }
    }
    .rwks-right {
        width: calc(85% - 20px);
        height: calc(100% - 70px);
        float: left;
        margin-left: 20px;
        overflow-y: auto;
        border: 1px solid #3a5f94c9;
        border-radius: 5px;
        box-sizing: border-box;
    }
    .el-dialog {
        background: #1d2d46 !important;
        .el-dialog__title {
            color: #ffffff;
        }
        .el-form-item__label {
            color: #dadada;
        }
        .button-preview {
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin-left: calc(50% - 110px);
            margin-top: 10px;
            text-align: center;
      font-size: 14px;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/40.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .button-cancel {
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin-left: 20px;
            margin-top: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .el-upload-list__item-name [class^='el-icon'] {
            color: #2870ff;
            height: unset !important;
        }
        .el-upload__tip {
            color: #c7c7c7;
        }
        .el-upload-list__item-name {
            color: #4382ff;
        }
        .audio-class {
            margin-left: 75px;
        }
    }
    .el-input__count {
        color: #229dbd;
        background: #1d2d4600;
    }
    .el-input__count-inner {
        color: #229dbd;
        background: #1d2d46;
    }
    .el-dialog {
        .el-input__inner {
            color: white !important;
            background: none !important;
            border: 1px solid #146a80 !important;
            box-shadow: 0 0 10px #1b6097;
        }
        .el-textarea__inner {
            color: white !important;
            background: none !important;
            border: 1px solid #146a80 !important;
            box-shadow: 0 0 10px #1b6097;
        }
    }
}
</style>