<template>
  <div id="zdy_mb">
    <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"
      >
        <!-- :current-node-key="current.currentNodeKey" -->
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button
              type="text"
              size="mini"
              @click="add_mrbm(node)"
              :style="{
                display:
                  node.data.id == 11||node.data.id == 21 ? '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"
        ref="mychild"
      />
    </div>
    <el-dialog
      title="新增模板名称"
      :visible.sync="dialogVisible_type"
      center
      width="500px"
    >
      <el-form ref="form" :model="form_add_type" label-width="80px">
        <el-form-item label="模板名称:" style="text-align: center">
          <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 } from "../../util/http_util";
import { uuid } from "../../util/data_util";
import navs from "./dfzy_rw.vue";
import navs1 from "./wfzy_rw.vue";
import navs2 from "./mr_mb.vue";
let id = 1000;
export default {
  components: { navs,navs1,navs2},
  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: {},
      type_node:'',
      arr_table_comment: [
        { comment: "目标属性" },
        { comment: "目标等级" },
        { comment: "岗位编号" },
        { comment: "人物编号" },
        { comment: "中文名" },
        { comment: "外文名" },
        { comment: "所在机构" },
        { comment: "职务" },
        { comment: "国家/地区" },
        { comment: "性别" },
        { comment: "出生日期" },
        { comment: "出生地" },
        { comment: "现职时间" },
        { comment: "人员类别" },
        { comment: "学历学位" },
        { comment: "家庭住址" },
        { comment: "联系电话" },
        { comment: "专长领域" },
        { comment: "社交媒体账号" },
      ],
    };
  },
  methods: {
    //新增模板确定按钮
    table_mbmc_cli() {
      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==11){
          arr_type_tree=this.arr_tree[0];
        }else if(this.type_node==12){
          arr_type_tree=this.arr_tree[1];
        }else if(this.type_node==21){
          arr_type_tree=this.arr_tree[2];
        }else if(this.type_node==22){
          arr_type_tree=this.arr_tree[3];
        }
        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 arr = [];
          this.arr_table_comment.forEach((item)=>{
              arr.push(item.comment);
          })
          let paramDatas = {
            baseProperty: arr,
            extraProperty: [],
            mouldTables: [],
            name: this.form_add_type.mbmc.trim(),
            textarea: [],
            id: uuid(32, 32),
            type:this.type_node,
          };
          console.log(1);
          post("api/rest/resource/addCharacterMould", paramDatas)
            .then((data) => {
              this.$message({
                message: "新增模板成功！！！",
                type: "success",
              });
              this.dialogVisible_type = false;
              this.query_tree();
            })
            .catch((err) => {
              console.log(err);
            });
        }
      }
    },
    //新增模板弹出框
    add_mrbm(data) {
      this.type_node = data.data.id;
      this.form_add_type = { mbmc: "" };
      this.dialogVisible_type = true;
    },
    add_zd() {
      this.form_add = { comment: "" };
      this.dialogVisible_people = true;
    },
    handleNodeClick(node,data) {
      if(node.id==11||data.parent.data.id==11){
        this.currentRole = "navs";
      } else if(node.id==21||data.parent.data.id==21){
        this.currentRole = "navs1";
      }else{
        this.currentRole = "navs2";
      }
      if (node.id.length > 2) {
        this.clientDetails = {
          NodeKey: node.id,
          NodeName: node.label,
          type: true,
        };
        
      } else if ((node.id.length == 2)) {
        this.clientDetails = {
          NodeKey: node.id,
          NodeName: node.label,
          type: false,
        };
      } else {
        this.currentRole = "navs2";
        // this.$message({
        //   message: "当前节点暂无默认模板！！！",
        //   type: "warning",
        // });
      }
    },
    //查询当前节点的最顶层节点ID
    getparentNode(data) {
      if (data.data.parentCode == null) {
        return data.data.id;
      } else {
        return this.getparentNode(data.parent);
      }
    },
    query_tree() {
      get("api/rest/resource/queryCharacterMould")
        .then((datas) => {
          let arr1 = [];
          let arr2 = [];
          let arr3 = [];
          let arr4 = [];
          this.arr_tree = [arr1,arr2,arr3,arr4];
          let arr_tr = [
            {
              id: "1",
              label: "敌方资源",
              children: [
                {
                  id: "11",
                  label: "人物模板",
                },
                {
                  id: "12",
                  label: "机构模板",
                },
              ],
            },
            {
              id: "2",
              label: "我方资源",
              children: [
                {
                  id: "21",
                  label: "人物模板",
                },
                {
                  id: "22",
                  label: "机构模板",
                },
              ],
            },
          ];
          if (datas.length > 0) {
            datas.forEach((item) => {
              if(item.type==11){
                arr1.push({ id: item.id, label: item.name });
              }else if(item.type==12){
                arr2.push({ id: item.id, label: item.name });
              }else if(item.type==21){
                arr3.push({ id: item.id, label: item.name });
              }else if(item.type==22){
                arr4.push({ id: item.id, label: item.name });
              }
            });
            this.arr_tree = [arr1,arr2,arr3,arr4];
          }
            arr_tr = [
              {
                id: "1",
                label: "敌方资源",
                children: [
                  {
                    id: "11",
                    label: "人物模板",
                    children: arr1,
                  },
                  {
                    id: "12",
                    label: "机构模板",
                    children: arr2,
                  },
                ],
              },
              {
                id: "2",
                label: "我方资源",
                children: [
                  {
                    id: "21",
                    label: "人物模板",
                    children: arr3,
                  },
                  {
                    id: "22",
                    label: "机构模板",
                    children: arr4,
                  },
                ],
              },
            ];
          this.data = arr_tr;
          // this.query_CharacterMould();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.query_tree();
  },
  activated() {},
};
</script>
<style lang="scss">
#zdy_mb {
  width: 97%;
  height: 92%;
  margin: 1%;
  box-sizing: border-box;
  overflow: hidden;
  .rwks-left {
    width: calc(15% - 10px);
    height: 100%;
    padding-top: 40px;
    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;
    }
    .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;
    }
  }
  .right-div {
    width: calc(85% - 10px);
    height: 100%;
    float: left;
    margin-left: 10px;
  }
  .rwks-right {
    width: calc(85% - 20px);
    height: 100%;
    float: left;
    margin-left: 20px;
    overflow-y: auto;
    border: 1px solid #125473;
    border-radius: 5px;
    box-sizing: border-box;
    .right-left {
      width: calc(100% - 360px);
      float: left;
      background: rgba(41, 60, 90, 0.49);
      padding: 20px;
    }
    .right-right {
      width: 300px;
      float: left;
      margin-left: 20px;
      > div {
        width: 100%;
        height: 100%;
      }
    }
    .title-div {
      float: left;
      width: 100%;
      height: 25px;
      background-size: 100% 100%;
      position: relative;
      margin-top: 10px;
      > span {
        position: absolute;
        font-weight: 700;
        font-size: 18px;
        color: #50d7ec;
        margin-left: 10px;
      }
      .el-button {
        float: right;
        margin-right: 10px;
      }
    }
    .mk-div {
      width: 100%;
      height: 206px;
      float: left;
      background: #fdfdfd0f;
      margin-bottom: 20px;
      .data-div {
        width: calc(100% - 40px);
        float: left;
        padding: 20px;
        .pub-div-data {
          margin: 10px calc(50% - 28px);
          color: #909399;
          font-size: 14px;
        }
        .el-table tr {
          background-color: #1d2d46 !important;
          color: #ffffffc7;
        }
        .el-table td {
          border-bottom: 1px solid #127a89;
          border-right: unset;
        }
        .el-table--enable-row-hover .el-table__body tr:hover > td {
          background-color: #82848a78;
        }
        .el-table th {
          border: unset;
          background-color: #263b5d !important;
        }
        .el-table--fit {
          background: none !important;
          border: unset;
        }
        .el-icon-delete-solid {
          color: red;
          cursor: pointer;
          font-size: 18px;
        }
        .el-icon-download {
          color: #1172d8;
          cursor: pointer;
          font-size: 20px;
        }
        .el-icon-edit {
          color: #1172d8;
          cursor: pointer;
          font-size: 20px;
        }
        .el-icon-view {
          color: #00ffff;
          font-size: 20px;
          cursor: pointer;
        }
        .el-table--group::after,
        .el-table--border::after,
        .el-table::before {
          background-color: unset;
        }
        .el-table__body-wrapper {
          height: 50px;
        }
      }
    }
    .el-card__body {
      padding: 0px;
    }
    .table_jbxx {
      border-collapse: collapse;
      width: 100%;
      position: relative;
      td {
        border: 1px solid #00648c;
        padding: 12px 20px;
        font-size: 14px;
        width: 200px;
      }
      .img-div {
        border: 3px solid #ffffff;
        img {
          background-size: 100% 100%;
        }
      }
      .pub-td1 {
        color: #007eff;
        font-weight: 900;
      }
      .pub-td2 {
        color: #8cd4ff;
      }
      .el-icon-remove {
        color: #ff4a4a;
        font-size: 20px;
        position: absolute;
        right: -31px;
        margin-top: 11px;
        cursor: pointer;
      }
      .el-icon-circle-plus {
        color: #ff4a4a;
        font-size: 20px;
        position: absolute;
        right: -31px;
        bottom: 12px;
        cursor: pointer;
      }
      .el-icon-edit {
        color: #5cde7c;
        font-size: 20px;
        position: absolute;
        right: 10px;
        margin-top: 11px;
        cursor: pointer;
      }
      .button-div {
        position: absolute;
        right: 40px;
        margin-top: 8px;
        position: absolute;
      }
    }
    .title-divs {
      float: left;
      height: 25px;
      width: calc(100% - 0px);
      // background-image: url("../../assets/img/dfzy/02.png");
      // background-size: 100% 100%;
    }
    .el-card {
      border-radius: unset;
      border: 1px solid #1d2d4600;
      background-color: unset;
      overflow: hidden;
      color: #ffff;
      transition: 0.3s;
      opacity: 0.93;
      .textitem {
        padding-top: 5px;
        cursor: pointer;
        span {
          font-size: 15px;
          color: #8cd4ff;
        }
      }
    }
    .el-card.is-always-shadow {
      box-shadow: none;
    }
    .xgnr-span {
      height: 50px;
      line-height: 48px;
      text-align: center;
      font-weight: 700;
      background: #293f63;
      color: #f1f1f1;
      font-size: 17px;
    }
    .xgnr-div {
      height: 150px;
      overflow-y: auto;
      overflow-x: hidden;
      background: #233450;
      ul {
        padding: 0px;
        margin: 0px;
        width: 100%;
        list-style: none;
        li {
          float: left;
          width: calc(100% - 10px);
          padding-left: 10px;
          span {
            color: #71d4ff;
            float: left;
            cursor: pointer;
            width: calc(100% - 0px);
            font-size: 13px;
            font-weight: 900;
            line-height: 35px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          // span:hover {
          //   color: #65add6;
          // }
        }
        li:nth-child(even) {
          background: #7f96bb;
        }
      }
    }

    .xgnr-div::-webkit-scrollbar-thumb {
      background: #f6f6f6;
    }
    .xgnr-div::-webkit-scrollbar-track {
      background: #b3b3b3;
    }
  }
  .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-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>