<template>
  <div id="jgk_data_public">
    <!-- <div class="button-discuss1" @click="add_plxz()">批量新增</div>
      <div class="button-discuss2" @click="addrw()">新增</div> -->
    <div class="rwk-left">
      
      <el-input
        class="public-input"
        placeholder="输入关键字进行过滤"
        suffix-icon="el-icon-search"
        v-model="filterText"
      ></el-input>
      <el-button type="primary" icon="el-icon-refresh" circle size="small" title="刷新" @click="query_tree_jg()"></el-button>
      <el-tree
        @node-drag-start="nodeDragStart"
        @node-drag-end="nodeDragEnd"
        :data="tree_data"
        :draggable="draggable"
        node-key="id"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        highlight-current
        ref="tree"
        :current-node-key="tree_type_id"
        :default-expanded-keys="[tree_type_id, 4]"
        @node-click="handleNodeClick"
        :indent="1"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="first-span" :title="node.label">{{ node.label }}</span>
          <span
            class="list-span"
          >
            <el-button
              type="text"
              size="mini"
              @click="() => addrw(node, data)"
              @click.stop.native
              :style="{
                display: data.type ? 'none !important' : '',
              }"
            >
              <i class="el-icon-circle-plus" title="添加机构"></i>
            </el-button>
            <!-- <el-button type="text" size="mini" @click="() => edit(node, data)">
              <i class="el-icon-edit-outline" title="编辑机构"></i>
            </el-button> -->
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
              @click.stop.native
            >
              <i class="el-icon-error" title="删除机构"></i>
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <div class="rwk-right">
      <div class="button-discuss1" @click="add_plxz()">批量新增</div>
      <div style="width: 100%; height: calc(100% - 80px); margin-top: 70px">
        <component
          :is="currentRole_jg_data"
          :clientDetails="clientDetails_jg_data"
          ref="mychild_rw_data"
        />
      </div>
    </div>
    <el-dialog
      title="新增机构"
      :visible.sync="dialogVisible_people"
      id="_people"
    >
      <div class="right-left">
        <div class="title-div" style="margin-top: 0px">
          <span>基本信息:</span>
        </div>
        <div style="width: calc(100% - 40px); float: left; padding: 20px">
          <el-tooltip
            class="item"
            effect="light"
            content="必选一种模板，否则无法输入"
            placement="right-start"
            :value="is_true"
          >
            <el-select
              v-model="option_value_rwmb"
              @change="change_fun"
              placeholder="请选择机构模板"
            >
              <el-option
                v-for="item in option_rwmb"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-tooltip>
          <table class="table_jbxx">
            <tr>
              <td class="pub-td1">
                <span style="margin-right: 5px; color: #de3333">*</span>机构编号
              </td>
              <td class="pub-td2">
                <el-input
                  v-model="form_add_ww[0].value"
                  placeholder="请输入内容"
                  :disabled="is_true"
                ></el-input>
              </td>
              <td class="pub-td1">
                <span style="margin-right: 5px; color: #de3333">*</span>机构番号
              </td>
              <td class="pub-td2">
                <el-input
                  v-model="form_add_ww[1].value"
                  placeholder="请输入内容"
                  :disabled="is_true"
                ></el-input>
              </td>
              <td rowspan="6" style="border: none">
                <div class="img-div">
                  <el-upload
                    class="avatar-uploader"
                    action="1"
                    :show-file-list="false"
                    :on-change="handleChange"
                    :disabled="is_true"
                    :file-list="fileList_head"
                    :accept="file_types_head"
                    :auto-upload="false"
                    :limit="1"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </td>
            </tr>
            <tr>
              <td class="pub-td1">机构简称</td>
              <td class="pub-td2" colspan="3">
                <el-input
                  v-model="form_add_ww[2].value"
                  placeholder="请输入内容"
                  :disabled="is_true"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="pub-td1">国家地区</td>
              <td class="pub-td2">
                <el-input
                  v-model="form_add_ww[3].value"
                  placeholder="请输入内容"
                  :disabled="is_true"
                ></el-input>
              </td>
              <td class="pub-td1">机构类别</td>
              <td class="pub-td2">
                <el-input
                  v-model="form_add_ww[4].value"
                  placeholder="请输入内容"
                  :disabled="is_true"
                ></el-input>
              </td>
            </tr>
            <tr v-for="(item, index) in xzzd" style="position: relative" v-if="xzzd.length>0 && index<=Math.trunc(xzzd.length/2)+Math.trunc(xzzd.length%2)-1">
                <td class="pub-td1">{{ xzzd[2*index].comment }}</td>
                <td class="pub-td2" :colspan="index==Math.trunc(xzzd.length/2)+Math.trunc(xzzd.length%2)-1?xzzd.length%2==0?'':'3':''">
                  <el-input
                    v-model="xzzd[2*index].value"
                    placeholder="请输入内容"
                  ></el-input>
                </td>
                <td class="pub-td1" v-if="index==Math.trunc(xzzd.length/2)+Math.trunc(xzzd.length%2)-1?xzzd.length%2!=0?false:true:true">{{ xzzd[2*index+1].comment }}</td>
                <td class="pub-td2" v-if="index==Math.trunc(xzzd.length/2)+Math.trunc(xzzd.length%2)-1?xzzd.length%2!=0?false:true:true">
                  <el-input
                    v-model="xzzd[2*index+1].value"
                    placeholder="请输入内容"
                  ></el-input>
                </td>
            </tr>
          </table>
        </div>
        <div class="mk-div" v-for="(item, index) in wzmk_data">
          <div class="title-div">
            <span v-text="item.comment + ':'"></span>
          </div>
          <div class="data-div">
            <div v-if="item.type == 1">
              <el-input
                type="textarea"
                :rows="6"
                placeholder="请输入内容"
                v-model="item.value"
              ></el-input>
            </div>
            <div v-if="item.type == 2">
              <i
                class="el-icon-circle-plus"
                title="新增表格"
                @click="add_table(index)"
                style="
                  font-size: 23px;
                  margin-bottom: 10px;
                  color: #409eff;
                  cursor: pointer;
                "
              ></i>
              <el-table
                style="width: 100%"
                border
                :data="item.table_column"
                stripe
              >
                <el-table-column
                  prop="date"
                  :label="items"
                  v-for="(items, indexs) in item.table_tab"
                  :key="indexs"
                >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row[items]"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_people = false"
          >取 消</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="add_people()"
          style="margin-top: 20px"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="批量导入数据"
      :visible.sync="dialogVisible_pldr"
      width="60%"
      id="_plscs"
    >
      <el-select
        v-model="option_value_rwmb_pl"
        @change="fun_change"
        placeholder="请选择对应模板"
        style="maring-top=10px;"
      >
        <el-option
          v-for="item in option_rwmb_pl"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-upload
        class="upload-demo"
        action="1"
        :on-change="handleChange_pl"
        :limit="1"
        :file-list="fileList"
        :accept="file_types"
        :auto-upload="false"
        :show-file-list="false"
        v-if="option_value_rwmb_pl != ''"
      >
        <el-button slot="trigger" type="primary">选取文件</el-button>
      </el-upload>

      <el-button type="primary" class="ac" @click="plsc_cli()"
        >批量上传</el-button
      >
      <el-table style="width: 100%" class="table-div" :data="tableData">
        <el-table-column
          :prop="items"
          :label="items"
          width="180"
          v-for="(items, indexs) in table_plsc"
          :key="indexs"
        >
          <template slot-scope="scope">
            <div v-if="items == '状态'">
              <span
                v-if="scope.row[items] == '入库成功'"
                style="color: #04d404; font-weight: 900"
                >{{ scope.row[items] }}</span
              >
              <el-button
                size="mini"
                v-else-if="
                  scope.row[items] != '入库成功' && scope.row[items] != ''
                "
                style="color: #ff2828; font-weight: 900"
                title="当前行机构编号或上级机构编号需【数组 . 字母组成，不包含中文】"
                type="info"
                >{{ scope.row[items] }}</el-button
              >
              <el-button size="mini" v-else type="info">待上传...</el-button>
            </div>
            <div v-else-if="table_result.indexOf(items) != -1">
              <el-button size="mini" @click="ck_table(items, scope.$index)"
                >查看</el-button
              >
            </div>
            <div v-else>
              <span>{{ scope.row[items] }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_pldr = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="dialogVisible_mb" width="40%">
      <el-table style="width: 100%" class="table-div" :data="mb_table_s">
        <el-table-column
          :prop="items"
          :label="items"
          v-for="(items, indexs) in arr_mouldTables_comment"
          :key="indexs"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_mb = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { get, post, fileUpload, delete_util } from "../../util/http_util";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import XLSX from "xlsx";
import { uuid } from "../../util/data_util";
import navs from "./jg_xq.vue";
export default {
  components: { navs },
  data() {
    return {
      draggable: false,//是否可以移动
      currentRole_jg_data: "navs",
      clientDetails_jg_data: {},
      form_add: [],
      form_add_ww: [
        { comment: "jgbh", value: "" },
        { comment: "jgfh", value: "" },
        { comment: "jgjc", value: "" },
        { comment: "gjdq", value: "" },
        { comment: "jglb", value: "" },
      ],
      form_add_ww_comment:[
        { comment: "机构编号" },
        { comment: "上级机构编号" },
        { comment: "机构番号" },
        { comment: "机构简称" },
        { comment: "国家地区" },
        { comment: "机构类别" },
      ],
      dialogVisible_people: false,
      dialogVisible_pldr: false,
      dialogVisible_mb: false,
      imageUrl: jh_bg,
      xzzd: [],
      wzmk_data: [],
      option_rwmb: [],
      option_value_rwmb: "",
      is_true: true,
      obj_name: "",
      fileList: [],
      file_types: ".XLSX",
      option_value_rwmb_pl: "", //批量导入对应的模板id
      option_rwmb_pl: [],
      obj_value: "", //批量导入对应的模板ID
      table_plsc: [], //批量导入对应的表头
      tableData: [], //批量导入对应的表格数据
      table_plsc_sc_cli: [], //批量导入对应的模板,
      // folder: "dfzy-rwk", //头像上传文件夹
      fileList_head: [],
      file_head: {},
      file_types_head: ".PNG,.JPG,.JPEG",
      table_result: [], //存储批量导入的表格模板名称
      arr_table: [], //Excel中非基础数据的数组
      mb_table_s: [],
      title: "", //批量导入中点击查看工作经历弹出框的名称
      arr_mouldTables: [],
      arr_mouldTables_comment: [],

      filterText: "",
      fl_type: "", //查询机构库下面的模板,机构库为2,4,6
      tree_type_id: "",
      tree_data: [],
      data_tree_node: "",
      obj_jgxx: {},
      _this_nodes: "",
      type_tree_port: false,
    };
  },
  methods: {
    nodeDragStart(node, evt) {
      if (node.level == 1) {
        this.$message.info("根节点不能转移");
        return;
      }
    },
    nodeDragEnd(sNode, eNode, position, evt) {
      if (eNode == null || sNode.id == eNode.id) {
        return;
      }
      if (sNode.level == 1) {
        this.$message.info("根节点不能转移");
        this.query_tree_jg();
        return;
      }
      this.$confirm(
        "此操作永久将" +
          sNode.label +
          "及其下所有机构包括人物转移到" +
          eNode.label +
          "中, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then((res) => {
          return post("api/rest/resource/organizationToInline", {
            srcId: sNode.data.id,
            targetId: eNode.level == 1 ? null : eNode.data.id,
            containChildren: true,
          });
        })
        .then((res) => {
          this.$message.success("转移成功");
        })
        .catch((err) => {
          if (err instanceof Object) {
            this.$message.info(err.message);
          } else {
            this.$message.info("已取消");
          }
          this.query_tree_jg();
        });
    },
    remove(node, datas) {
      this.$confirm(
        "此操作将永久删除该机构以及其下所有机构, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          get("api/rest/mongo/organization/removeTreeItem?id=" + node.data.id)
            .then((data) => {
              if (data > 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex((d) => d.id === datas.id);
                children.splice(index, 1);
                this.handleNodeClick({id:this.tree_type_id})
              }
            })
            .catch((err) => {
              this.$message.warning(err.message);
            });
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //查询tree数据
    query_tree_jg() {
      this.tree_data = [];
      get("api/rest/mongo/organization/queryTree?module=" + "DF")
        .then((res) => {
          let a = {
            id: this.tree_type_id,
            label: "机构列表",
            level: 0,
            type: false,
            children: this.initData(res, false),
          };
          this.tree_data.push(a);
        })
        .then((res) => {
          this.query_tree_jg1();
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    query_tree_jg1() {
      get("api/rest/mongo/organization/queryTree?module=" + "DFWW")
        .then((res) => {
          this.tree_data.push({
            id: 4,
            label: "外网机构列表",
            level: 0,
            type: true,
            children: this.initData(res, true),
          });
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    handleNodeClick(node, data) {
      if (node.id == this.tree_type_id || node.id == 4) {
        this.currentRole_jg_data = "";
        this.clientDetails_jg_data = {};
      } else {
        this.query_grxx(node);
      }
      this._this_nodes = node;
    },
    query_grxx(node) {
      let obj = node;
      this.obj_jgxx = obj;
      this.currentRole_jg_data = "navs";
      this.clientDetails_jg_data = {
        NodeKey: node.id,
        NodeMould: obj,
        type: true,//判断是否编辑
      };
    },
    //批量导入弹出框，查看工作经历等数据展示
    ck_table(name, index) {
      let people_bh = this.tableData[index]["机构编号"];
      this.title = name;
      this.mb_table_s = [];
      this.arr_table.forEach((item) => {
        if (item.sheetName == name) {
          this.mb_table_s = item.sheet.filter(
            (items) =>
              items["机构编号"] == people_bh && Object.keys(items).length > 1
          );
        }
      });
      this.arr_mouldTables_comment = this.arr_mouldTables.filter((item) => {
        return item.tableName == name;
      })[0].columnName;
      if (this.mb_table_s.length > 0) {
        this.dialogVisible_mb = true;
      } else {
        this.$message({
          message: "当前机构的" + name + "无任何数据！！！",
          type: "warning",
        });
      }
    },
    //批量导入确定按钮
    plsc_cli() {
      let paramDatas = [];
      if (this.tableData.length == 0) {
        this.$message({
          message: "表格中无数据，请重新选取文件！！！",
          type: "warning",
        });
        return;
      } else {
        if (this.tableData.filter((n) => n["状态"] != "").length > 0) {
          this.$message({
            message: "数据异常，请修改完重新上传！！！",
            type: "warning",
          });
        } else {
          this.tableData.forEach((item) => {
            let obj_baseProperty = {};
            let obj_extraProperty = {};
            let obj_textarea = {};
            let obj_mouldTables = {};
            this.form_add_ww_comment.forEach((items) => {
              obj_baseProperty[items.comment] =
                item[items.comment] == undefined ? "" : item[items.comment];
            });
            this.table_plsc_sc_cli.extraProperty.forEach((item1) => {
              obj_extraProperty[item1] =
                item[item1] == undefined ? "" : item[item1];
            });
            this.table_plsc_sc_cli.textareaProperty.forEach((item1) => {
              if (
                this.table_plsc_sc_cli.tableProperty.findIndex(
                  (n) => n.tableName == item1
                ) == -1
              ) {
                obj_textarea[item1] =
                  item[item1] == undefined ? "" : item[item1].toString() + "";
              }
            });
            let iss = item["机构编号"];
            this.table_plsc_sc_cli.tableProperty.forEach((item1) => {//循环模板中的表格
              obj_mouldTables[item1.tableName] = {//设置默认的tableProperty格式
                columns:item1.columnName,
                rows:[],
              };
              let arrs = this.arr_table.filter((item2)=> {return item2.sheetName == item1.tableName})
              if(arrs.length>0){
                let arr1 = arrs[0].sheet.filter((item3)=> {return item3["机构编号"] == iss})
                if(arr1.length>0){
                  arr1.forEach(item3 =>{
                    let arr = [];
                    item1.columnName.forEach(it =>{
                      //循环模板中单表格的行，
                      arr.push(item3[it]==undefined?'':item3[it]+'');
                    })
                    obj_mouldTables[item1.tableName].rows.push(arr);
                  })
                }
              }
            });
            let obj = {
              jgbh:obj_baseProperty['机构编号'],
              jgfh:obj_baseProperty['机构番号'],
              jgjc:obj_baseProperty['机构简称'],
              gjdq:obj_baseProperty['国家地区'],
              jglb:obj_baseProperty['机构类别'],
              avatar:obj_baseProperty['机构编号'],
              // multiLanguage:obj_baseProperty['多语言名称'],
              extraProperty: obj_extraProperty,
              textareaProperty: obj_textarea,
              tableProperty: obj_mouldTables,
              templateId: this.option_value_rwmb_pl,
            };
            let a_obj = {
              label: item["机构番号"] + "",
              code: item["机构编号"] + "",
              module: this.type_tree_port ? "DFWW" : "DF",
              parentCode: item["上级机构编号"]==''||item["上级机构编号"]==undefined?'#':item["上级机构编号"],
              ...obj,
            };
            paramDatas.push(a_obj);
          });
          post("api/rest/mongo/organization/addTreeItem", paramDatas)
            .then((data) => {
              // console.log(data);
              this.tableData.forEach((item, index) => {
                item["状态"] = "入库成功";
              });
              this.$message({
                message: "导入完成！！！",
                type: "success",
              });
              this.query_tree_jg();
            })
            .catch((err) => {
              this.$message.warning(err.message);
            });
        }
      }
    },
    //批量导入中选择对应模板
    fun_change(data) {
      this.tableData = [];
      let names = "";
      this.option_rwmb_pl.find((item) => {
        if (item.value == data) {
          this.obj_value = item.value;
          names = item.label;
        }
      });
      if (names == "外网机构模板") {
        this.type_tree_port = true;
      } else {
        this.type_tree_port = false;
      }
      this.query_CharacterMould(this.obj_value,true);
    },
    //批量导入中选择文件
    handleChange_pl(file, fileList) {
      this.fileList = [];
      this.file2Xce(file).then((tabJson) => {
        if (tabJson && tabJson.length > 0) {
          let obj_tab = {}; //Excel表格的基础数据集合
          this.arr_table = [];
          tabJson.forEach((item, index) => {
            if (index == 0) {
              obj_tab = item.sheet;
            } else {
              this.arr_table.push(item);
            }
          });
          obj_tab.forEach((item, index) => {
            item["Excel所在行"] = index + 2;
            item["状态"] = "";
            if (
              /.*[\u4e00-\u9fa5]+.*$/.test(item["机构编号"]) ||
              /.*[\u4e00-\u9fa5]+.*$/.test(item["上级机构编号"]) ||
              item["机构编号"] == "" ||
              item["机构编号"] == undefined
            ) {
              item["状态"] = "异常";
            } 
            if(item['部队番号']!=undefined){
              item['机构番号'] = item['部队番号'];
            }   
            if(item['部队简称']!=undefined){
              item['机构简称'] = item['部队简称'];
            }   
            if(item['部队代号']!=undefined){
              item['机构代号'] = item['部队代号'];
            }   
            if(item['部队泛称']!=undefined){
              item['机构泛称'] = item['部队泛称'];
            }   
            if(item['部队等级']!=undefined){
              item['机构等级'] = item['部队等级'];
            }
          });
          this.tableData = obj_tab;
        }
      });
    },
    //读取Excel数据
    file2Xce(file) {
      return new Promise(function (resolve) {
        const reader = new FileReader();
        reader.onload = function (e) {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary",
          });
          const result = [];
          this.wb.SheetNames.forEach((sheetName) => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName]),
            });
          });
          resolve(result);
        };

        reader.readAsBinaryString(file.raw);

        // reader.readAsBinaryString(file) // 传统input方法
      });
    },
    //新增表格字段
    add_table(index) {
      let obj = {};
      this.wzmk_data[index].table_tab.forEach((item) => {
        obj[item] = "";
      });
      this.wzmk_data[index].table_column.push(obj);
    },
    //新增人物确定按钮
    add_people() {
      let obj = {};
      //基本字段数据
      let obj_jbzd = {};
      this.form_add.forEach((item) => {
        obj_jbzd[item.comment] = item.value;
      });
      if (obj_jbzd.jgfh == "" || obj_jbzd.jgbh == "") {
        this.$message({
          message: "机构编号、部队番号都不能为空",
          type: "warning",
        });
      } else {
        if (obj_jbzd.jgbh.length > 2) {
          let arr = this.tree_data;
          let arrNew = JSON.parse(JSON.stringify(arr));
          let objss = this.jsonToArray(arrNew).find(
            (itemss) => itemss.code === obj_jbzd.jgbh
          );
          if (objss == undefined) {
            obj = { ...obj_jbzd };
            //基本的新增字段数据
            let obj_xzzd = {};
            this.xzzd.forEach((item) => {
              obj_xzzd[item.comment] = item.value;
            });
            obj.extraProperty = obj_xzzd;
            let obj_textarea = {};
            let obj_mouldTables = {};
            this.wzmk_data.forEach((item) => {
              if (item.type == 1) {
                //板块的textarea数据
                obj_textarea[item.comment] = item.value;
                // console.log(item.value.replace(/\n/g,'///'));
              } else {
                let object_column = [];
                //清除板块表格数据中都是空值的一行
                item.table_column.forEach((itema) => {
                  let result = Object.values(itema).every(
                    (item1) => item1 === ""
                  );
                  if (!result) {
                    object_column.push(itema);
                  }
                });
                //板块表格的数据
                let _columns_rows = {};
                _columns_rows.columns = item.table_tab;
                let arrs = [];
                object_column.forEach((items) => {
                  let arrs1 = [];
                  item.table_tab.forEach((itema) => {
                    arrs1.push(items[itema]);
                  });
                  arrs.push(arrs1);
                });
                _columns_rows.rows = arrs;
                obj_mouldTables[item.comment] = _columns_rows;
              }
            });
            obj.textareaProperty = obj_textarea;
            obj.tableProperty = obj_mouldTables;
            obj.module = "DF";
            obj.templateId = this.option_value_rwmb;
            let paramDatas = [];
            paramDatas.push(obj);
            this.upload_head(paramDatas, obj_jbzd.jgfh, obj_jbzd.jgbh);
          } else {
            this.$message({
              message: "机构编号与数据库中重复，请修改",
              type: "warning",
            });
          }
        } else {
          this.$message({
            message: "机构编号长度最少3个字符",
            type: "warning",
          });
        }
      }
    },
    //上传头像
    upload_head(paramDatas, names, ids) {
      let id = uuid(32, 32);
      if (JSON.stringify(this.file_head) != "{}") {
        let fd = new FormData();
        fd.append("bucket",'AVATAR');//文件存储位置
        fd.append("filename", id);
        // fd.append("folder", this.folder);
        fd.append("file", this.file_head.raw);
        fileUpload("api/rest/file/upload", fd)
          .then((data) => {
              console.log("头像上传成功");
              paramDatas[0].avatar = data;
              this.file_head = {};
              this.add_rw_post(paramDatas, names, ids);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        paramDatas[0].avatar = "";
        this.add_rw_post(paramDatas, names, ids);
      }
    },
    //机构信息入库
    add_rw_post(paramData, names, ids) {
      let _this = this;
      let paramDatas = {
        label: names,
        code: ids,
        // level: this.data_tree_node.level + 1,
        parentCode:
          this.data_tree_node.code == undefined
            ? "#"
            : this.data_tree_node.code,
        ...paramData[0],
      };
      post("api/rest/mongo/organization/addTreeItem", [paramDatas])
        .then((data) => {
          if (data > 0) {
            _this.$message({
              type: "success",
              message: "机构新增成功",
            });
            this.dialogVisible_people = false;
            const newChild = {
              id: data[0],
              label: names,
              code: ids,
              level: this.data_tree_node.level + 1,
              parentCode: this.data_tree_node.code,
            };
            if (!this.data_tree_node.children) {
              this.$set(this.data_tree_node, "children", []);
            }
            this.data_tree_node.children.push(newChild);
            this.query_tree_jg();
          }
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    //选择机构模板
    change_fun(data) {
      this.is_true = false;
      this.form_add.forEach((item, index) => {
        this.form_add[index].value = "";
      });
      this.option_rwmb.find((item) => {
        if (item.value == data) {
          this.obj_name = item.value;
        }
      });
      this.query_CharacterMould(this.obj_name,false);
    },
    //选择文件
    handleChange(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.file_head = file;
      this.fileList_head = [];
    },
    //单个人物新增弹框
    addrw(node, data) {
      this.form_add.forEach((item, index) => {
        this.form_add[index].value = "";
      });
      this.is_true = true;
      this.option_value_rwmb = "";
      this.xzzd = [];
      this.wzmk_data = [];
      this.query_tree();
      this.imageUrl = jh_bg;
      this.dialogVisible_people = true;
      this.data_tree_node = data;
    },
    //批量新增弹框
    add_plxz() {
      this.query_tree();
      this.option_value_rwmb_pl = "";
      this.fileList = [];
      this.table_plsc = [];
      this.dialogVisible_pldr = true;
    },
    append_jg(node, data) {
      this.name = "";
      this.dialogVisible = true;
      this.this_data = data;
      this.this_node = node;
    },
    //查询机构信息模板
    query_CharacterMould(id,is_pldr) {
      get("api/rest/mongo/template/query?id=" + id)
        .then((datas) => {
          this.xzzd = [];
          this.wzmk_data = [];
          this.table_plsc = [];
          this.table_result = [];
          this.arr_mouldTables = [];
          if (datas != null) {
            let data = datas[0];
            this.table_plsc_sc_cli = data;
            if(is_pldr){
              this.form_add_ww_comment.forEach((item) => {
                this.table_plsc.push(item.comment);
              });
            }else{
              this.form_add.forEach((item) => {
                this.table_plsc.push(item.comment);
              });
            }
            if (data.extraProperty.length > 0) {
              data.extraProperty.forEach((item) => {
                this.xzzd.push({ comment: item, value: "" });
                this.table_plsc.push(item);
              });
            }
            if (data.textareaProperty.length > 0) {
              data.textareaProperty.forEach((item) => {
                if (item != "大五画像" && item != "关系图谱") {
                  this.wzmk_data.push({
                    comment: item,
                    type: "1",
                    table_tab: [],
                    value: "",
                    table_column: [],
                  });
                  this.table_plsc.push(item);
                }
              });
            }
            if (data.tableProperty.length > 0) {
              data.tableProperty.forEach((items) => {
                let arr = [];
                this.arr_mouldTables.push(items);//批量导入
                items.columnName.forEach((items1) => {
                  arr.push(items1);
                });
                this.wzmk_data.forEach((item, index) => {
                  if (items.tableName == item.comment) {
                    this.wzmk_data[index].type = "2";
                    this.wzmk_data[index].table_tab = arr;
                    this.table_result.push(item.comment);//批量导入
                  }
                });
              });
            }
            this.table_plsc.unshift("Excel所在行");
            this.table_plsc.unshift("状态");
          }
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    query_tree() {
      get("api/rest/mongo/template/query?type=" + this.fl_type)
        .then((datas) => {
          this.option_rwmb = [];
          this.option_rwmb_pl = [];
          if (datas.length > 0) {
            datas.forEach((item) => {
              this.option_rwmb.push({ value: item.id, label: item.name });
              this.option_rwmb_pl.push({ value: item.id, label: item.name });
            });
          }
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    jsonToArray(nodes) {
      var r = [];
      if (Array.isArray(nodes)) {
        for (var i = 0, l = nodes.length; i < l; i++) {
          r.push(nodes[i]); // 取每项数据放入一个新数组
          if (
            Array.isArray(nodes[i]["children"]) &&
            nodes[i]["children"].length > 0
          )
            // 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
            r = r.concat(this.jsonToArray(nodes[i]["children"]));
          delete nodes[i]["children"];
        }
      }
      return r;
    },
    updata_tree(obj) {
      this._this_nodes.code = obj.code;
      this._this_nodes.info = obj.info;
      this._this_nodes.label = obj.label;
    },
    //查询当前节点的最顶层节点ID
    getparentNode(data) {
      if (data.data.parentCode == null) {
        return data.data.id;
      } else {
        return this.getparentNode(data.parent);
      }
    },
    initData(orgList, type) {
      // 第一种
      if (orgList.length) {
        for (var i = 0; i < orgList.length; i++) {
          orgList[i].type = type;
          if (orgList[i].children.length) {
            // 如果有 children 则继续递归遍历
            this.initData(orgList[i].children, type);
          }
        }
      }
      return orgList;
    },
  },
  mounted() {
  },
  activated() {
    this.type_tree_port = false;
  },
  props: {
    clientDetails: {
      type: Object,
      default: {},
    },
  },
  watch: {
    obj_name: function (val) {
      if (val != "") {
        this.is_true = false;
      } else {
        this.is_true = true;
      }
    },
    dialogVisible_people: function (val) {
      if (!val) {
        this.is_true = false;
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    clientDetails: function (val) {
      this.fl_type = val.fl_type;
      this.tree_type_id = val.tree_type_id;
      this.query_tree_jg();
      this.type_tree_port = false;
      this.form_add = this.form_add_ww;
    },
  },
};
</script>
<style lang="scss">
#jgk_data_public {
  width: 100%;
  height: 100%;

  .rwk-left {
    width: 300px;
    height: calc(100% - 0px);
    box-sizing: border-box;
    float: left;
    .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: calc(100% - 37px);
    }
    .el-button + .el-button {
      margin-left: 0px !important;
    }
    .el-tree {
      color: white;
      background: transparent;
      height: calc(100% - 50px);
      margin-top: 10px;
      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-icon-edit-outline {
        //   display: none;
        // }
        // .list-span{
        //   display: none;
        // }
      }
      .el-tree-node {
        position: relative;
        padding-left: 0px; // 缩进量
      }
      .el-tree-node__children {
        padding-left: 15px; // 缩进量
      }

      // 竖线
      .el-tree-node::before {
        content: "";
        height: 100%;
        width: 1px;
        position: absolute;
        left: -3px;
        top: -17px;
        border-width: 1px;
        border-left: 1px solid #1895a2;
      }
      // 当前层最后一个节点的竖线高度固定
      .el-tree-node:last-child::before {
        height: 38px; // 可以自己调节到合适数值
      }

      // 横线
      .el-tree-node::after {
        content: "";
        width: 13px;
        height: 20px;
        position: absolute;
        left: -3px;
        top: 20px;
        border-width: 1px;
        border-top: 1px solid #1895a2;
      }

      // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
      & > .el-tree-node::after {
        border-top: none;
      }
      & > .el-tree-node::before {
        border-left: none;
      }

      // 展开关闭的icon
      .el-tree-node__expand-icon {
        font-size: 16px;
        // 叶子节点（无子节点）
        &.is-leaf {
          color: transparent;
          // 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-icon-edit-outline {
        display: none !important;
      }
    }
    .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;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      width: 82%;
      .first-span {
        width: 100%;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      // .list-span{
      //   position: absolute;
      //   right: 20px;
      // }
    }
    .el-tree > .el-tree-node > .el-tree-node__children {
      background-color: #1d2d46ad !important;
      width: calc(100% - 15px);
      // height: calc(100% - 44px);
      // overflow: auto;
      // position: relative;
      // .el-tree-node{
      //   width: 300px;
      // }
    }
    .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-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-edit-outline {
      font-size: 16px;
      color: #2ae209;
    }
    .el-icon-error {
      font-size: 16px;
      color: #ff5454;
    }
    .el-icon-upload {
      font-size: 16px;
      color: #2bce0e;
    }
  }
  .rwk-right {
    width: calc(100% - 320px);
    height: calc(100% - 0px);
    float: left;
    margin-left: 20px;
    overflow: hidden;
    // border: 1px solid #125473;
    border-radius: 5px;
    box-sizing: border-box;
    .button-discuss1 {
      width: 120px;
      height: 30px;
      line-height: 30px;
      float: right;
      margin-top: 10px;
      font-size: 14px;
      margin-left: 20px;
      margin-right: 20px;
      text-align: center;
      cursor: pointer;
      background-image: url(../../assets/img/yqjc/40.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  #_people .el-dialog {
    width: 1100px;
  }
  #_plscs {
    .el-select {
      margin-top: 20px;
      margin-left: 20px;
      float: left;
    }
    .upload-demo {
      margin-top: 20px;
      margin-left: 20px;
      float: left;
    }
    .ac {
      margin-top: 20px;
      margin-left: 20px;
    }

    .table-div {
      width: 100%;
      height: 500px;
      margin-top: 20px;
      margin-left: 0px;
      background: #e6e6e6;
      .el-table__body-wrapper {
        height: 452px;
        overflow-y: auto;
      }
      .cell {
        text-align: center;
      }
      .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-edit {
        color: #1172d8;
        cursor: pointer;
        font-size: 20px;
      }
      .el-icon-delete {
        color: red;
        font-size: 20px;
        cursor: pointer;
      }
      .el-table--group::after,
      .el-table--border::after,
      .el-table::before {
        background-color: unset;
      }
    }
  }
  .el-dialog {
    background: #1d2d46 !important;
    .el-step__title.is-process {
      color: #e0a142;
    }
    .el-dialog__title {
      color: #ffffff;
    }
    .el-dialog__body {
      padding: 6px 20px;
      .el-form-item__label {
        color: #e8e8e8;
      }
      .el-cascader {
        width: 100%;
      }
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      height: 100%;
      width: 100%;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100%;
      height: 100%;
      line-height: 230px;
      text-align: center;
    }
    .avatar {
      width: 100%;
      height: 100%;
      display: block;
    }
    .right-left {
      width: calc(100% - 40px);
      float: left;
      background: rgba(41, 60, 90, 0.49);
      padding: 20px 20px 0px 20px;
      .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%;
        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 {
            background-color: #253650 !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-table--group::after,
          .el-table--border::after,
          .el-table::before {
            background-color: unset;
          }
          .el-table__header-wrapper table {
            width: 100% !important;
          }
          .el-table__body-wrapper {
            .el-table__empty-block {
              height: 20px !important;
            }
          }
        }
      }
      .table_jbxx {
        border-collapse: collapse;
        width: 100%;
        position: relative;
        margin-top: 10px;
        td {
          border: 1px solid #00648c;
          padding: 5px 12px;
          font-size: 14px;
          width: 200px;
        }
        .img-div {
          border: 3px solid #ffffff;
          width: 200px;
          height: 230px;
          img {
            background-size: 100% 100%;
          }
        }
        .pub-td1 {
          color: #007eff;
          font-weight: 900;
          width: 100px;
        }
        .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-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>
