<template>
  <div id="jgk_mb_public">
    <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">
          <div class="img-div">
            <img :src="jh_bg" />
          </div>
          <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>
            </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 && item.comment!='标签' && item.comment!='重要性' && item.comment!='Twitter账号'"
              ></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>
            <i
              class="el-icon-circle-plus"
              title="新增字段"
              @click="add_zd()"
              v-if="edit_switch"
            ></i>
          </table>
        </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 && item.comment!='机构简介'"
              >删除</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 v-if="item.type == 3||item.type == 4" style="text-align: center;margin-top: 54px;">
                <span style="color: #757575;">组件插件</span>
                <i class="el-icon-printer" style="color: #538ac3;"></i>
            </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>
    <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
            :disabled="not_change"
          ></el-input>
        </el-form-item>
        <el-form-item label="风格">
          <el-select v-model="form_add_wzms.style" placeholder="请选择风格" @change="change_select">
            <el-option label="文本框" value="1"></el-option>
            <el-option label="表格" value="2"></el-option>
            <el-option label="知识图谱" value="3"></el-option>
            <el-option label="大五画像" value="4"></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: [
        {comment:'标签',},
        {comment:'重要性'},
        {comment:'Twitter账号'},
        // {comment:'Facebook账号'},
      ],
      form_add: {
        comment: "",
      },
      form_edit: {
        comment: "",
      },
      wzmk_data: [
        {
          comment:'机构简介',
          type:'1',
          table_tab: [],
        }
      ],
      form_add_wzms: {
        comment: "",
        style: "1",
      },
      form_edit_wzms: {
        comment: "",
      },
      form_add_table: {
        comment: "",
      },
      index_table_s: "",
      index_bk_edit: "", //板块编辑的index
      index_people_edit: "", //基础编辑的index
      arr_table_comment_ww: [
        { comment: "机构编号" },
        { comment: "上级机构编号" },
        { comment: "机构番号" },
        { comment: "机构简称" },
        { comment: "国家地区" },
        { comment: "机构类别" },
      ],//外网字段
      arr_table_comment_jgk:{
        jgbh:'',
        sjjgbh:'',
        jgfh:'',
        gjjc:'',
        gjdq:'',
        jglb:'',
        avatar:'',
      },
      current: { currentNodeKey: "", currentNodeName: "",currentModuleName:"" }, //915O88LL4LVPL0IB60CBS306Q745S3LE
      edit_switch: false,
      s_switch: false,
      arr_tree: [],
      type_node: "",
      not_change:false,
      arr_table_comment:[],
    };
  },
  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.comment!='关系图谱'&&item.comment!='大五画像'){
          if (item.type == 1) {
            arr_JH.push(item.comment);
          } else {
            let arr_table = [];
            item.table_tab.forEach((item) => {
              arr_table.push(item.field);
            });
            arr_table.unshift("机构编号");
            arr_multiHeader.push(arr_table);
            arr_tHeader.push(item.comment);
          }
        }
      });
      arr_multiHeader.unshift(arr_JH);
      arr_tHeader.unshift("基础信息列表");
      // return
      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 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 = {
              // ...this.arr_table_comment_jgk,
              extraProperty: extraProperty_data,
              tableProperty: mouldTables_data,
              name: this.current.currentNodeName,
              textareaProperty: textarea_data,
              id: this.current.currentNodeKey,
              type: this.type_node,
            };
            post("api/rest/mongo/template/add", paramDatas)
              .then((data) => {
                this.$message({
                  message: "保存成功！！！",
                  type: "success",
                });
                this.edit_switch = false;
              })
              .catch((err) => {
                this.$message.warning(err.message);
              });
          } 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);
      } else if (inx == 4) {
        //置顶
        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.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.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;
    },
    //查询当前节点的最顶层节点ID
    getparentNode(data) {
      if (data.data.parentCode == null) {
        return data.data.id;
      } else {
        return this.getparentNode(data.parent);
      }
    },
    //查询人物信息模板
    query_CharacterMould() {
      get(
        "api/rest/mongo/template/query?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.textareaProperty.length > 0) {
              data.textareaProperty.forEach((item) => {
                if(item=='大五画像'){
                  this.wzmk_data.push({
                    comment: item,
                    type: "4",
                    table_tab: [],
                  });
                }else if(item=='关系图谱'){
                  this.wzmk_data.push({
                    comment: item,
                    type: "3",
                    table_tab: [],
                  });
                }else{
                  this.wzmk_data.push({
                    comment: item,
                    type: "1",
                    table_tab: [],
                  });
                }
              });
            }
            if (data.tableProperty.length > 0) {
              data.tableProperty.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) => {
          this.$message.warning(err.message);
        });
    },
    //切换新增表格或文本模板
    change_select(val){
      if(val==3){
        this.form_add_wzms.comment = '关系图谱';
        this.not_change = true;
      }else if(val==4){
        this.form_add_wzms.comment = '大五画像';
        this.not_change = true;
      }else{
        this.form_add_wzms.comment =='关系图谱'||this.form_add_wzms.comment == '大五画像'?this.form_add_wzms.comment = '':'';
        this.not_change = false;
      }
    },
  },
  mounted() {},
  props: {
    clientDetails: {
      type: Object,
      default: {},
    },
  },
  watch: {
    clientDetails: function (val) {
      
      this.current.currentNodeName = val.NodeName;
      this.current.currentNodeKey = val.NodeKey;
      this.current.currentModuleName = val.moduleName;
      this.arr_table_comment = this.arr_table_comment_ww;
      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">
#jgk_mb_public {
  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);
      width: calc(100% - 40px);
      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;
    }
    .img-div {
      width: 230px;
      height: 230px;
      float: left;
      border: 3px solid #ffffff;
      img {
        background-size: 100% 100%;
        width: 100%;
      }
    }
    .table_jbxx {
      border-collapse: collapse;
      width: calc(100% - 260px);
      position: relative;
      margin-left: 20px;
      float: left;
      td {
        border: 1px solid #00648c;
        padding: 12px 20px;
        font-size: 14px;
        width: 200px;
      }
      .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: 10px;
        bottom: 13px;
        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;
      font-size: 14px;
      margin-left: calc(50% - 110px);
      margin-top: 10px;
      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>