<template>
  <div id="dfzygl">
    <el-tabs type="border-card" @tab-click="cli_a" v-model="editableTabsValue">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 模板管理</span>
        <div class="rwks-left">
          <el-tree
            :data="data"
            node-key="id"
            :expand-on-click-node="false"
            :highlight-current="true"
            default-expand-all
            ref="tree"
            :current-node-key="current.currentNodeKey"
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="first-span" :title="node.label">{{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  @click="add_mrbm(node)"
                  :style="{
                    display:
                      node.data.id == 1 || node.data.id == 2
                        ? 'block !important'
                        : 'none !important',
                  }"
                >
                  <i class="el-icon-circle-plus" title="添加模板"></i>
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
        <div class="rwks-right">
          <component
            :is="currentRole"
            :clientDetails="clientDetails_s"
            ref="mychild"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"
          ><i class="el-icon-document-copy"></i> 人物数据管理</span
        >
         <div style="width:100%;height:100%;">
            <component
              :is="currentRole_rw_data"
              :clientDetails="clientDetails_rw_data"
              ref="mychild_rw_data"
            />
         </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"
          ><i class="el-icon-document-copy"></i> 机构数据管理</span
        >
         <div style="width:100%;height:100%;">
            <component
              :is="currentRole_jg_data"
              :clientDetails="clientDetails_jg_data"
              ref="mychild_jg_data"
            />
         </div>
      </el-tab-pane>
      <!-- <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-tabs>
    <el-dialog
      title="新增模板名称"
      :visible.sync="dialogVisible_type"
      center
      width="500px"
    >
      <el-form ref="forms" :rules="rules" :model="form_add_type" label-width="100px">
        <el-form-item label="模板名称:" style="text-align: center" prop="mbmc">
          <el-input
            v-model="form_add_type.mbmc"
            maxlength="10"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_type = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="table_mbmc_cli()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { get, post ,fileUpload } from "../../util/http_util";
import { uuid } from "../../util/data_util";
import navs from "./rwk_mb_public.vue";
import navs1 from "./jgk_mb_public.vue";
import navs_rw from "./rwk_data_public.vue";
import navs_jg from "./jgk_data_public.vue";
import navs_wx from "./wx_data_public.vue";
let id = 1000;
export default {
  components: { navs, navs1 ,navs_rw,navs_jg,navs_wx},
  data() {
    return {
      data: [],
      dialogVisible_type: false,
      xzzd: [],
      form_edit: {
        comment: "",
      },
      wzmk_data: [],
      form_edit_wzms: {
        comment: "",
      },
      current: { currentNodeKey: "", currentNodeName: "" }, //915O88LL4LVPL0IB60CBS306Q745S3LE
      form_add_type: { mbmc: "" },
      arr_tree: [],
      currentRole: "navs",
      clientDetails_s: {},
      currentRole_rw_data: "navs_rw",
      clientDetails_rw_data: {},
      currentRole_jg_data: "navs_jg",
      clientDetails_jg_data: {},
      currentRole_wx_data: "navs_wx",
      clientDetails_wx_data: {},
      type_node: "",
      arr_table_comment_rwk:{
      },
      arr_table_comment_jgk:{
      },
      editableTabsValue:"",
      rules: {
        mbmc: [
          { required: true, message: '请输入模板名称', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    cli_a(){  
      if(this.editableTabsValue==2){
        (this.currentRole_jg_data = "navs_jg"),
        (this.clientDetails_jg_data = {
          fl_type: 'ORGANIZATION',
          tree_type_id:1
        });
      }else if(this.editableTabsValue==1){
        (this.currentRole_rw_data = "navs_rw"),
        (this.clientDetails_rw_data = {
          fl_type:'CHARACTER'
        });
      }else if(this.editableTabsValue==3){
        (this.currentRole_wx_data = "navs_wx"),
        (this.clientDetails_wx_data = {
          module_name: "敌方资源文档",
          fl_type:1,
          type_folder:"dfzy",
        });
      }
    },
    //新增模板确定按钮
    table_mbmc_cli() {
       this.$refs['forms'].validate((valid) => {
          if (valid) {
            if (this.form_add_type.mbmc.trim() == "") {
              this.$message({
                message: "新增模板名称不能为空！！！",
                type: "warning",
              });
              return;
            } else {
              let _types = false;
              let arr_type_tree = [];
              if (this.type_node == 1) {
                arr_type_tree = this.arr_tree[0];
              } else if (this.type_node == 2) {
                arr_type_tree = this.arr_tree[1];
              }
              if (arr_type_tree.length != 0) {
                arr_type_tree.forEach((item) => {
                  if (item.label == this.form_add_type.mbmc.trim()) {
                    _types = true;
                  }
                });
              }
              if (_types) {
                this.$message({
                  message: "当前模板下已存在此名称，请修改！！！",
                  type: "warning",
                });
                return;
              } else {
                let extraProperty = ['标签','重要性','Twitter账号','Facebook账号'];
                let textareaProperty = ['机构简介'];
                if (this.type_node == 'CHARACTER') {
                  textareaProperty = ['人物简介'];
                }
                let paramDatas = {
                  extraProperty: extraProperty,
                  tableProperty: [],
                  name: this.form_add_type.mbmc.trim(),
                  textareaProperty: textareaProperty,
                  id: uuid(32, 32),
                  type: this.type_node,
                };
                post("api/rest/mongo/template/add", paramDatas)
                  .then((data) => {
                    this.$message({
                      message: "新增模板成功！！！",
                      type: "success",
                    });
                    this.dialogVisible_type = false;
                    this.query_tree();
                  })
                  .catch((err) => {
                    console.log(err);
                  });
              }
            }
          }
      });
    },
    //新增模板弹出框
    add_mrbm(data) {
      let _this = this;
      _this.type_node = data.data.type;
      _this.form_add_type = { mbmc: "" };
      _this.dialogVisible_type = true;
      setTimeout(function(){
        _this.$refs.forms.resetFields();
      },200)
    },
    handleNodeClick(node, data) {
      let _this = this;
      if (data.parent.data.id == 1) {
        if (node.id.length > 2) {
          _this.currentRole = "navs";
          setTimeout(() =>{
            _this.clientDetails_s = {
              moduleName: '敌方资源',
              NodeKey: node.id,
              NodeName: node.label,
              type: true,
            };
          },500);
        }
      } else if (data.parent.data.id == 2) {
        if (node.id.length > 2) {
          _this.currentRole = "navs1";
          setTimeout(() =>{
            _this.clientDetails_s = {
              moduleName: '敌方资源',
              NodeKey: node.id,
              NodeName: node.label,
              type: true,
            };
          },500);
        }
      }else{
        this.currentRole = "";
      }
    },
    query_tree() {
      get("api/rest/mongo/template/query")
        .then((datas) => {
          let arr1 = [];
          let arr2 = [];
          this.arr_tree = [arr1, arr2];
          let arr_tr = [
            {
              id: "1",
              label: "人物库",
              children: [],
              type:'CHARACTER',
            },
            {
              id: "2",
              label: "机构库",
              children: [],
              type:'ORGANIZATION',
            },
          ];
          if (datas.length > 0) {
            datas.forEach((item) => {
              if (item.type == 'CHARACTER') {
                arr1.push({ id: item.id, label: item.name,type:item.type });
              } else if (item.type == 'ORGANIZATION') {
                arr2.push({ id: item.id, label: item.name,type:item.type});
              }
            });
            this.arr_tree = [arr1, arr2];
          }
          arr_tr = [
            {
              id: "1",
              label: "人物库",
              children: arr1,
              type:'CHARACTER',
            },
            {
              id: "2",
              label: "机构库",
              children: arr2,
              type:'ORGANIZATION',
            },
          ];
          this.data = arr_tr;
          // this.query_CharacterMould();
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
  },
  mounted() {
    this.query_tree();
  },
};
</script>

<style lang="scss">
#dfzygl {
  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 #125473;
    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 #125473;
      .el-tabs__item {
        color: #dedede;
      }
      .el-tabs__item.is-active {
        color: #ffe000;
        background-color: #116791;
        border-right-color: #116791;
        border-left-color: #116791;
      }
      .el-tabs__item:not(.is-disabled):hover {
        color: #ffe000;
      }
    }
  }

  .rwks-left {
    width: calc(15% - 10px);
    height: calc(100% - 0px);
    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% - 0px);
    float: left;
    margin-left: 20px;
    overflow-y: auto;
    border: 1px solid #125473;
    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;
      font-size: 14px;
      text-align: center;
      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>