<template>
  <div id="dfzy_rw">
    <div class="rwk-right" id="main_id">
      <div class="right-left">
        <el-button
          type="success"
          icon="el-icon-download"
          @click="handleExportMarketingList()"
          v-if="!edit_switch && s_switch"
          style="margin-left: calc(50% - 59px)"
          >下载模板</el-button
        >
        <div class="title-div" style="margin-top: 0px">
          <span>基本信息:</span>
          <!-- <div class="title-divs"></div> -->
          <el-button
            type="warning"
            icon="el-icon-edit"
            @click="people_edit()"
            v-if="!edit_switch && s_switch"
            >编辑</el-button
          >
        </div>
        <div style="width: calc(100% - 60px); float: left; padding: 20px">
          <table class="table_jbxx">
            <tr>
              <td class="pub-td1">目标属性</td>
              <td class="pub-td2"></td>
              <td class="pub-td1">目标等级</td>
              <td class="pub-td2"></td>
            </tr>
            <tr>
              <td class="pub-td1">岗位编号</td>
              <td class="pub-td2"></td>
              <td class="pub-td1">人物编号</td>
              <td class="pub-td2"></td>
            </tr>
            <tr>
              <td class="pub-td1">中文名</td>
              <td class="pub-td2"></td>
              <td class="pub-td1">外文名</td>
              <td class="pub-td2"></td>
              <td rowspan="6" style="border: none">
                <div class="img-div">
                  <img :src="jh_bg" class="rw-img" />
                </div>
              </td>
            </tr>
            <tr>
              <td class="pub-td1">所在机构</td>
              <td colspan="3" class="pub-td2"></td>
            </tr>
            <tr>
              <td class="pub-td1">职务</td>
              <td class="pub-td2"></td>
              <td class="pub-td1">国家/地区</td>
              <td class="pub-td2"></td>
            </tr>
            <tr>
              <td class="pub-td1">性别</td>
              <td class="pub-td2"></td>
              <td class="pub-td1">出生日期</td>
              <td class="pub-td2"></td>
            </tr>
            <tr>
              <td class="pub-td1">出生地</td>
              <td class="pub-td2"></td>
              <td class="pub-td1">现职时间</td>
              <td class="pub-td2"></td>
            </tr>
            <tr>
              <td class="pub-td1">人员类别</td>
              <td class="pub-td2"></td>
              <td class="pub-td1">学历学位</td>
              <td class="pub-td2"></td>
            </tr>
            <tr>
              <td class="pub-td1">家庭住址</td>
              <td class="pub-td2"></td>
              <td class="pub-td1">联系电话</td>
              <td class="pub-td2"></td>
            </tr>
            <tr>
              <td class="pub-td1">专长领域</td>
              <td class="pub-td2" colspan="5"></td>
            </tr>
            <tr v-for="(item, index) in xzzd" style="position: relative">
              <td class="pub-td1">{{ item.comment }}</td>
              <td class="pub-td2" colspan="5"></td>
              <i
                class="el-icon-remove"
                title="删除此字段"
                @click="remove_zd(index)"
                v-if="edit_switch"
              ></i>
              <!-- <i
                class="el-icon-edit"
                title="修改此字段"
                @click="edit_zd(index)"
                v-if="edit_switch"
              ></i> -->
              <div class="button-div">
                <el-button
                  type="primary"
                  @click="move_cli_zd(4, index)"
                  size="mini"
                  v-if="xzzd.length >= 3 && index > 0 && edit_switch"
                  >置顶</el-button
                >
                <el-button
                  type="primary"
                  @click="move_cli_zd(3, index)"
                  size="mini"
                  v-if="
                    xzzd.length >= 3 && index + 1 < xzzd.length && edit_switch
                  "
                  >置底</el-button
                >
                <el-button
                  type="primary"
                  @click="move_cli_zd(2, index)"
                  size="mini"
                  v-if="xzzd.length >= 2 && index > 0 && edit_switch"
                  >上移</el-button
                >
                <el-button
                  type="primary"
                  @click="move_cli_zd(1, index)"
                  size="mini"
                  v-if="
                    xzzd.length >= 2 && index + 1 < xzzd.length && edit_switch
                  "
                  >下移</el-button
                >
              </div>
            </tr>
            <tr>
              <td class="pub-td1">社交媒体账号</td>
              <td class="pub-td2" colspan="5"></td>
            </tr>
            <i
              class="el-icon-circle-plus"
              title="新增字段"
              @click="add_zd()"
              v-if="edit_switch"
            ></i>
          </table>
        </div>
        <!-- <div class="mk-div">
          <div class="title-div">
            <span>工作经历:</span>
          </div>
          <div class="data-div">
            <div class="pub-div-data">
              <span>暂无数据</span>
            </div>
          </div>
        </div> -->
        <div class="mk-div" v-for="(item, index) in wzmk_data">
          <div class="title-div">
            <span v-text="item.comment + ':'"></span>
            <el-button
              type="danger"
              @click="remove_wzmk(index)"
              size="mini"
              v-if="edit_switch"
              >删除</el-button
            >
            <!-- <el-button
              type="success"
              @click="edit_wzmk(index)"
              size="mini"
              v-if="edit_switch"
              >编辑</el-button
            > -->
            <el-button
              type="primary"
              @click="move_cli(1, index)"
              size="mini"
              v-if="
                wzmk_data.length >= 2 &&
                index + 1 < wzmk_data.length &&
                edit_switch
              "
              >下移</el-button
            >
            <el-button
              type="primary"
              @click="move_cli(2, index)"
              size="mini"
              v-if="wzmk_data.length >= 2 && index > 0 && edit_switch"
              >上移</el-button
            >
            <el-button
              type="primary"
              @click="move_cli(3, index)"
              size="mini"
              v-if="
                wzmk_data.length >= 3 &&
                index + 1 < wzmk_data.length &&
                edit_switch
              "
              >置底</el-button
            >
            <el-button
              type="primary"
              @click="move_cli(4, index)"
              size="mini"
              v-if="wzmk_data.length >= 3 && index > 0 && edit_switch"
              >置顶</el-button
            >
          </div>
          <div class="data-div">
            <div v-if="item.type == 1">
              <el-input
                type="textarea"
                :rows="6"
                placeholder="请输入内容"
                disabled
              ></el-input>
            </div>
            <div v-if="item.type == 2" style="height: 150px">
              <el-table style="width: 100%">
                <el-table-column
                  prop="date"
                  :label="items.field"
                  v-for="(items, indexs) in item.table_tab"
                  :key="indexs"
                ></el-table-column>
              </el-table>
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click="table_cli(index)"
                style="margin-top: 10px; background-color: #3f72a7"
                v-if="edit_switch"
                >新增表字段</el-button
              >
            </div>
          </div>
        </div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="wzmk_cli()"
          v-if="edit_switch"
          >新增文本框/表格板块</el-button
        >
        <el-button icon="el-icon-edit" @click="people_qx()" v-if="edit_switch" style="float:right;">取消</el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="people_edit_cli()"
          v-if="edit_switch"
          style="float:right;">保存</el-button>
      </div>
      <div class="right-right">
        <div>
          <div class="xgnr-span">
            <span>相关人物</span>
          </div>
          <div class="xgnr-div">
            <ul>
              <li v-for="item in xgrw_data">
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="新增字段"
      :visible.sync="dialogVisible_people"
      center
      width="400px"
    >
      <el-form ref="form" :model="form_add" label-width="80px">
        <el-form-item label="字段名称">
          <el-input
            v-model="form_add.comment"
            maxlength="10"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_people = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="xzzd_cli()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="编辑字段"
      :visible.sync="dialogVisible_people_edit"
      center
      width="400px"
    >
      <el-form ref="form" :model="form_edit" label-width="80px">
        <el-form-item label="字段名称">
          <el-input
            v-model="form_edit.comment"
            maxlength="10"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_people_edit = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="xzzd_cli_edit()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="新增文本框/表格板块"
      :visible.sync="dialogVisible_wzms"
      center
      width="600px"
    >
      <el-form ref="form" :model="form_add_wzms" label-width="80px">
        <el-form-item label="名称">
          <el-input
            v-model="form_add_wzms.comment"
            maxlength="15"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="风格">
          <el-select v-model="form_add_wzms.style" placeholder="请选择风格">
            <el-option label="文本框" value="1"></el-option>
            <el-option label="表格" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_wzms = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="wzms_cli()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="编辑文本框/表格板块"
      :visible.sync="dialogVisible_wzms_edit"
      center
      width="600px"
    >
      <el-form ref="form" :model="form_edit_wzms" label-width="80px">
        <el-form-item label="名称">
          <el-input
            v-model="form_edit_wzms.comment"
            maxlength="15"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_wzms_edit = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="wzms_edit_cli()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="新增表字段"
      :visible.sync="dialogVisible_table"
      center
      width="500px"
    >
      <el-form ref="form" :model="form_add_table" label-width="80px">
        <el-form-item label="字段:" style="text-align: center">
          <el-input
            v-model="form_add_table.comment"
            maxlength="15"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_table = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="table_clm_cli()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { get, post } from "../../util/http_util";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
export default {
  data() {
    return {
      jh_bg: jh_bg,
      dialogVisible_people: false,
      dialogVisible_people_edit: false,
      dialogVisible_wzms: false,
      dialogVisible_wzms_edit: false,
      dialogVisible_table: false,
      dialogVisible_type: false,
      xzzd: [],
      form_add: {
        comment: "",
      },
      form_edit: {
        comment: "",
      },
      wzmk_data: [],
      form_add_wzms: {
        comment: "",
        style: "1",
      },
      form_edit_wzms: {
        comment: "",
      },
      xgrw_data: [
        { title: "美国总统拜登" },
        { title: "美国总统拜登" },
        { title: "美国总统拜登" },
        { title: "美国总统拜登" },
        { title: "美国总统拜登" },
        { title: "美国总统拜登" },
        { title: "美国总统拜登" },
      ],
      form_add_table: {
        comment: "",
      },
      index_table_s: "",
      index_bk_edit: "", //板块编辑的index
      index_people_edit: "", //基础编辑的index
      arr_table_comment: [
        { comment: "目标属性" },
        { comment: "目标等级" },
        { comment: "岗位编号" },
        { comment: "人物编号" },
        { comment: "中文名" },
        { comment: "外文名" },
        { comment: "所在机构" },
        { comment: "职务" },
        { comment: "国家/地区" },
        { comment: "性别" },
        { comment: "出生日期" },
        { comment: "出生地" },
        { comment: "现职时间" },
        { comment: "人员类别" },
        { comment: "学历学位" },
        { comment: "家庭住址" },
        { comment: "联系电话" },
        { comment: "专长领域" },
        { comment: "社交媒体账号" },
      ],
      current: { currentNodeKey: "", currentNodeName: "" }, //915O88LL4LVPL0IB60CBS306Q745S3LE
      edit_switch: false,
      s_switch: false,
      arr_tree: [],
      type_node: "",
    };
  },
  methods: {
    //导出模板
    handleExportMarketingList() {
      let arr_multiHeader = [];
      let arr_tHeader = [];
      let arr_JH = [];
      this.arr_table_comment.forEach((item) => {
        arr_JH.push(item.comment);
      });
      this.xzzd.forEach((item) => {
        arr_JH.push(item.comment);
      });
      this.wzmk_data.forEach((item) => {
        if (item.type == 1) {
          arr_JH.push(item.comment);
        } else {
          let arr_table = [];
          item.table_tab.forEach((item) => {
            arr_table.push(item.field);
          });
          arr_multiHeader.push(arr_table);
          arr_tHeader.push(item.comment);
        }
      });
      arr_multiHeader.unshift(arr_JH);
      arr_tHeader.unshift("基础信息列表");
      import("../../util/Export2Excel").then((excel) => {
        const multiHeader2 = arr_multiHeader;
        const tHeader = arr_tHeader;
        const data = "";
        // 进行所有表头的单元格合并
        const merges = [];
        excel.export_json_to_excel({
          // multiHeader, // 这里是第一行的表头
          multiHeader2, // 这里是第二行的表头
          header: tHeader, // 这里是第三行的表头
          data,
          filename: "模板",
          merges,
        });
      });
    },
    //取消保存
    people_qx() {
      this.query_CharacterMould();
      this.edit_switch = false;
    },
    //整体保存
    people_edit_cli() {
      this.$confirm(
        "若有删除字段，则此操作将永久该字段对应的数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let extraProperty_data = [];
          if (this.xzzd.length > 0) {
            this.xzzd.forEach((item) => {
              extraProperty_data.push(item.comment);
            });
          }
          let textarea_data = [];
          let mouldTables_data = [];

          let arr = [];
          this.arr_table_comment.forEach((item) => {
            arr.push(item.comment);
          });
          let types_ = true;
          if (this.wzmk_data.length > 0) {
            this.wzmk_data.forEach((item) => {
              textarea_data.push(item.comment);
              if (item.type == 2) {
                if (item.table_tab.length > 0) {
                  let columnName_data = [];
                  item.table_tab.forEach((items) => {
                    columnName_data.push(items.field);
                  });
                  mouldTables_data.push({
                    columnName: columnName_data,
                    tableName: item.comment,
                  });
                } else {
                  types_ = false;
                }
              }
            });
          }
          if (types_) {
            let paramDatas = {
              baseProperty: arr,
              extraProperty: extraProperty_data,
              mouldTables: mouldTables_data,
              name: this.current.currentNodeName,
              textarea: textarea_data,
              id: this.current.currentNodeKey,
              type: this.type_node,
            };
            post("api/rest/resource/addCharacterMould", paramDatas)
              .then((data) => {
                this.$message({
                  message: "保存成功！！！",
                  type: "success",
                });
                this.edit_switch = false;
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.$message({
              message:
                "板块中有表格板块但是没有表字段，无法保存，请添加表字段！！！",
              type: "warning",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //整体编辑启动
    people_edit() {
      this.edit_switch = true;
    },
    //移动表格
    move_cli_zd(inx, index) {
      if (inx == 1) {
        //下移
        this.swapArray1(index, index + 1);
      } else if (inx == 2) {
        //上移
        this.swapArray1(index, index - 1);
      } else if (inx == 3) {
        //置底
        let arr = this.xzzd[index];
        let arr1 = this.xzzd.splice(index, 1);
        this.xzzd.push(arr);
      } else if (inx == 4) {
        //置顶
        let arr = this.xzzd[index];
        let arr1 = this.xzzd.splice(index, 1);
        this.xzzd.splice(0, 0, arr);
      }
    },
    swapArray1(index1, index2) {
      this.xzzd[index1] = this.xzzd.splice(index2, 1, this.xzzd[index1])[0];
    },
    //移动板块
    move_cli(inx, index) {
      if (inx == 1) {
        //下移
        this.swapArray(index, index + 1);
      } else if (inx == 2) {
        //上移
        this.swapArray(index, index - 1);
      } else if (inx == 3) {
        //置底
        let arr = this.wzmk_data[index];
        let arr1 = this.wzmk_data.splice(index, 1);
        this.wzmk_data.push(arr);
        // this.swapArray(index,this.wzmk_data.length-1);
      } else if (inx == 4) {
        //置顶
        // this.swapArray(index,0);
        let arr = this.wzmk_data[index];
        let arr1 = this.wzmk_data.splice(index, 1);
        this.wzmk_data.splice(0, 0, arr);
      }
    },
    swapArray(index1, index2) {
      this.wzmk_data[index1] = this.wzmk_data.splice(
        index2,
        1,
        this.wzmk_data[index1]
      )[0];
    },
    //新增表字段
    table_cli(index) {
      this.form_add_table = { comment: "" };
      this.index_table_s = index;
      this.dialogVisible_table = true;
    },
    table_clm_cli() {
      if (this.form_add_table.comment.trim() == "") {
        this.$message({
          message: "字段不能为空！！！",
          type: "warning",
        });
        return;
      } else {
        let comments = this.form_add_table.comment.trim();
        let types = false;
        // this.arr_table_comment.forEach((items) => {
        //   if (items.comment == comments) {
        //     types = true;
        //   }
        // });
        // this.xzzd.forEach((items) => {
        //   if (items.comment == comments) {
        //     types = true;
        //   }
        // });
        // this.wzmk_data.forEach((items) => {
        //   if (items.comment == comments) {
        //     types = true;
        //   }
        // });
        this.wzmk_data[this.index_table_s].table_tab.forEach((items) => {
          if (items.field == comments) {
            types = true;
          }
        });
        if (types) {
          this.$message({
            message: "字段名不能重复！！！",
            type: "warning",
          });
          return;
        } else {
          this.wzmk_data[this.index_table_s].table_tab.push({
            field: this.form_add_table.comment,
          });
          this.dialogVisible_table = false;
        }
      }
    },
    //删除字段
    remove_zd(index) {
      this.xzzd.splice(index, 1);
    },
    //修改基础表格字段弹出框
    edit_zd(index) {
      this.form_edit.comment = this.xzzd[index].comment;
      (this.index_people_edit = index), (this.dialogVisible_people_edit = true);
    },
    xzzd_cli_edit() {
      if (this.form_edit.comment.trim() == "") {
        this.$message({
          message: "字段名称不能为空！！！",
          type: "warning",
        });
        return;
      } else {
        let item = this.form_edit.comment.trim();
        let types = false;
        this.xzzd.forEach((items) => {
          if (items.comment == item) {
            types = true;
          }
        });
        if (types) {
          this.$message({
            message: "板块名称不能重复！！！",
            type: "warning",
          });
          return;
        } else {
          this.xzzd[this.index_people_edit].comment =
            this.form_edit.comment.trim();
          this.$message({
            message: "板块编辑成功！！！",
            type: "success",
          });
          this.dialogVisible_people_edit = false;
        }
      }
    },
    //新增字段确定按钮
    xzzd_cli() {
      if (this.form_add.comment.trim() == "") {
        this.$message({
          message: "字段不能为空！！！",
          type: "warning",
        });
        return;
      } else {
        let comments = this.form_add.comment.trim();
        let types = false;
        this.arr_table_comment.forEach((items) => {
          if (items.comment == comments) {
            types = true;
          }
        });
        this.xzzd.forEach((items) => {
          if (items.comment == comments) {
            types = true;
          }
        });
        this.wzmk_data.forEach((items) => {
          if (items.comment == comments) {
            types = true;
          }
        });
        if (types) {
          this.$message({
            message: "字段名不能重复！！！",
            type: "warning",
          });
          return;
        } else {
          this.xzzd.push({ comment: this.form_add.comment.trim() });
          this.dialogVisible_people = false;
        }
      }
    },
    add_zd() {
      this.form_add = { comment: "" };
      this.dialogVisible_people = true;
    },
    //删除文本框/表格板块
    remove_wzmk(index) {
      this.wzmk_data.splice(index, 1);
    },
    //编辑文本框/表格板块弹出框
    edit_wzmk(index) {
      this.form_edit_wzms = { comment: this.wzmk_data[index].comment };
      this.dialogVisible_wzms_edit = true;
      this.index_bk_edit = index;
    },
    //编辑文本框/表格板块确定按钮
    wzms_edit_cli() {
      if (this.form_edit_wzms.comment.trim() == "") {
        this.$message({
          message: "名称不能为空！！！",
          type: "warning",
        });
        return;
      } else {
        let item = this.form_edit_wzms.comment.trim();
        let types = false;
        this.wzmk_data.forEach((items) => {
          if (items.comment == item) {
            types = true;
          }
        });
        if (types) {
          this.$message({
            message: "板块名称不能重复！！！",
            type: "warning",
          });
          return;
        } else {
          this.wzmk_data[this.index_bk_edit].comment =
            this.form_edit_wzms.comment.trim();
          this.$message({
            message: "板块编辑成功！！！",
            type: "success",
          });
          this.dialogVisible_wzms_edit = false;
        }
      }
    },
    //新增文本框/表格板块确定按钮
    wzms_cli() {
      if (this.form_add_wzms.comment.trim() == "") {
        this.$message({
          message: "名称不能为空！！！",
          type: "warning",
        });
        return;
      } else {
        let comments = this.form_add_wzms.comment.trim();
        let types = false;
        this.arr_table_comment.forEach((items) => {
          if (items.comment == comments) {
            types = true;
          }
        });
        this.xzzd.forEach((items) => {
          if (items.comment == comments) {
            types = true;
          }
        });
        this.wzmk_data.forEach((items) => {
          if (items.comment == comments) {
            types = true;
          }
        });
        if (types) {
          this.$message({
            message: "板块名称不能重复！！！",
            type: "warning",
          });
          return;
        } else {
          this.wzmk_data.push({
            comment: this.form_add_wzms.comment.trim(),
            type: this.form_add_wzms.style,
            table_tab: [],
          });
          this.$message({
            message: "板块新增成功！！！",
            type: "success",
          });
          this.dialogVisible_wzms = false;
          this.$nextTick(() => {
            document.getElementById("main_id").scrollTop =
              document.getElementById("main_id").scrollHeight;
          });
        }
      }
    },
    wzmk_cli() {
      this.form_add_wzms = { comment: "", style: "1" };
      this.dialogVisible_wzms = true;
    },
    append(node, data) {
      this.name = "";
      this.dialogVisible = true;
      this.this_data = data;
      this.this_node = node;
    },
    handleNodeClick(node) {
      if (node.id.length > 2) {
        this.edit_switch = false;
        this.current.currentNodeKey = node.id;
        this.current.currentNodeName = node.label;
        this.query_CharacterMould();
        this.s_switch = true;
      } else {
        // this.$message({
        //   message: "当前节点暂无模块！！！",
        //   type: "warning",
        // });
        this.xzzd = [];
        this.wzmk_data = [];
        this.s_switch = false;
      }
    },
    //查询当前节点的最顶层节点ID
    getparentNode(data) {
      if (data.data.parentCode == null) {
        return data.data.id;
      } else {
        return this.getparentNode(data.parent);
      }
    },
    //查询人物信息模板
    query_CharacterMould() {
      get(
        "api/rest/resource/queryCharacterMould?Id=" +
          this.current.currentNodeKey
      )
        .then((datas) => {
          this.xzzd = [];
          this.wzmk_data = [];
          if (datas.length != 0) {
            let data = datas[0];
            if (data.extraProperty.length > 0) {
              data.extraProperty.forEach((item) => {
                this.xzzd.push({ comment: item });
              });
            }
            if (data.textarea.length > 0) {
              data.textarea.forEach((item) => {
                this.wzmk_data.push({
                  comment: item,
                  type: "1",
                  table_tab: [],
                });
              });
            }
            if (data.mouldTables.length > 0) {
              let table_tab_s = [];
              data.mouldTables.forEach((items) => {
                let arr = [];
                items.columnName.forEach((items1) => {
                  arr.push({ field: 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.type_node = data.type;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {},
  props: {
    clientDetails: {
      type: Object,
      default: {},
    },
  },
  watch: {
    clientDetails: function (val) {
      this.current.currentNodeName = val.NodeName;
      this.current.currentNodeKey = val.NodeKey;
      this.s_switch = val.type;
      this.edit_switch = false;
      this.query_CharacterMould();
      this.$nextTick(() => {
        document.getElementById("main_id").scrollTop = 0;
      });
    },
  },
  activated() {},
};
</script>
<style lang="scss">
#dfzy_rw {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  margin: 20px;
  box-sizing: border-box;
  overflow: hidden;
  .rwk-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;
  }
  .rwk-right {
    width: 100%;
    height: 100%;
    float: left;
    overflow-y: auto;
    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;
          .cell{
            font-size: 14px;
          }
        }
        .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;
      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-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>