<template>
  <!-- 危大工程字典页面 -->
  <div class="fullHeight">
    <div class="block fullHeight">
      <div class="system-left">
        <div class="areaTreeInner whiteBlock fullHeight">
          <div class="left-header">
            <p class="pageTitle">危大工程类别</p>
            <el-button
              type="primary"
              size="medium"
              @click="add(1)"
              v-if="$route.path.indexOf('/project/') == -1"
            >
              新增分类
            </el-button>
          </div>
          <el-form size="medium" ref="riskListForm" :model="riskListForm">
            <el-form-item>
              <el-input
                @blur="loadList"
                suffix-icon="el-icon-search"
                v-model="riskListForm.nodeName"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="treeBox">
            <vue-scroll v-if="dataList.length > 0">
              <el-tree
                :data="dataList"
                @node-click="handleNodeClick"
                :props="defaultProps"
                :default-expanded-keys="defaultExpandedKeys"
                :default-expand-all="defaultExpandAll"
                @node-expand="handleNodeExpand"
                @node-collapse="handleNodeCollapse"
                node-key="id"
                ref="tree"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span
                    style="
                      width: 56%;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      display: inline-block;
                    "
                    class="videoName projectName"
                    :class="{
                      'color_333 font-bold': data.parentId == 0,
                    }"
                    :title="data.typeName"
                    >{{ data.typeName }}</span
                  >
                  <span class="operateBtns">
                    <i
                      style="color: #5181f6"
                      class="el-icon-circle-plus-outline"
                      @click.stop="add(2, data.id)"
                    ></i>
                    <i
                      style="color: #5181f6"
                      class="el-icon-edit"
                      @click.stop="edit1(data, 1)"
                    ></i>
                    <i
                      style="color: #f76c6c"
                      class="el-icon-delete"
                      @click.stop="del1(data)"
                    ></i>
                  </span>
                </span>
              </el-tree>
            </vue-scroll>
            <div class="placeholderBox" v-else>
              <img src="@/assets/images/noData2.png" alt="" srcset="" />
              <p>{{ $t("message.videoManage.empty") }}</p>
            </div>
          </div>
          <div class="sidebar_btn2">
            <el-button
              @click="setCheckedNodes"
              style="color: #b3b3b3"
              size="mini"
              type="text"
              plain
              >全部展开</el-button
            >
            <el-button
              @click="setCheckedKeys"
              style="color: #b3b3b3"
              size="mini"
              type="text"
              plain
              >全部关闭</el-button
            >
          </div>
        </div>
      </div>
      <div class="system-right">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 类别描述 -->
          <el-tab-pane
            :label="$t('message.dangerousBigDictionary.typeDescribe')"
            name="first"
          ></el-tab-pane>
          <!-- 管控要点 -->
          <el-tab-pane
            :label="$t('message.dangerousBigDictionary.controlGist')"
            name="second"
          ></el-tab-pane>
        </el-tabs>

        <div
          class="table_box"
          style="margin: 13px"
          v-if="activeName == 'first'"
        >
          <div v-if="$route.path.indexOf('/project/') == -1">
            <el-button
              type="primary"
              plain
              size="small"
              style="float: right; margin: -2px 15px 0 0"
              @click="add(3)"
            >
              <!-- 添加类别描述 -->
              {{
                $t("message.dangerousBigDictionary.add") +
                $t("message.dangerousBigDictionary.typeDescribe")
              }}
            </el-button>
            <!-- <el-button
                type="primary"
                plain
                size="small"
                style="float: right; margin: -2px 15px 0 0"
                @click="downloadFn"
                >
                下载检查表导入模板
                </el-button>
                <el-upload
                :disabled="leftId == ''"
                ref="upload"
                :before-upload="beforeAvatarUpload"
                :action="
                    $http.defaults.baseURL +
                    'xmgl/inspectTableLibrary/uploadExcelInspectTable'
                "
                :limit="1"
                :show-file-list="false"
                :data="{
                    userId: $store.state.userInfo.userId,
                    classifyId: this.leftId,
                }"
                name="excelFile"
                style="float: right; margin: -2px 15px 0 0"
                :on-success="handleSuccess"
                >
                <el-button
                    size="small"
                    type="primary"
                    plain
                    v-loading.fullscreen.lock="fullscreenLoading"
                    >导入检查表
                </el-button>
                </el-upload> -->
          </div>
          <el-table height="652px" :data="threeData" class="tables">
            <!-- 序号 -->
            <el-table-column
              type="index"
              :label="$t('message.dangerousBigDictionary.serial')"
              width="50"
              align="center"
            ></el-table-column>
            <!-- 危大工程类别 -->
            <el-table-column
              prop="typeName"
              :label="$t('message.dangerousBigDictionary.dangerBigType')"
              align="center"
            >
              <!-- <template slot-scope="scope">
                <span
                  >{{ dialogdata.typeName }}</span
                >
              </template> -->
            </el-table-column>
            <!-- 类别描述 -->
            <el-table-column
              prop="describeName"
              :label="$t('message.dangerousBigDictionary.typeDescribe')"
              align="center"
            ></el-table-column>
            <!-- 是否超危 -->
            <el-table-column
              prop="dangerType"
              :label="$t('message.dangerousBigDictionary.isSuperDanger')"
              align="center"
            >
              <template slot-scope="scope">
                <span
                  >{{
                    scope.row.dangerType == 2
                      ? $t("message.dangerousBigDictionary.yes")
                      : $t("message.dangerousBigDictionary.no")
                  }}
                  <!-- 是：否 -->
                </span>
              </template>
            </el-table-column>
            <!-- 管控要点 -->
            <el-table-column
              prop="tableName"
              :label="$t('message.dangerousBigDictionary.controlGist')"
              align="center"
            >
              <template slot-scope="scope">
                <span
                  class="primaryText hovers"
                  @click="showBindDialogFn(scope.row)"
                  >{{
                    scope.row.contentList ? scope.row.contentList.length : 0
                  }}</span
                >
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
              :label="$t('message.dangerousBigDictionary.actions')"
              align="center"
              width="200"
              v-if="$route.path.indexOf('/project/') == -1"
            >
              <template slot-scope="scope">
                <el-button
                  @click="edit1(scope.row, 3)"
                  type="text"
                  size="small"
                  icon="el-icon-edit"
                >
                  <span style="font-size: 14px">
                    <!-- 编辑 -->
                    {{ $t("message.dangerousBigDictionary.edit") }}
                  </span>
                </el-button>
                <el-button
                  @click="del2(scope.row)"
                  type="text"
                  size="small"
                  style="color: red"
                  icon="el-icon-delete"
                >
                  <span style="font-size: 14px">
                    <!-- 删除 -->
                    {{ $t("message.dangerousBigDictionary.remove") }}
                  </span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="table_box" style="margin: 13px" v-else>
          <div v-if="$route.path.indexOf('/project/') == -1">
            <el-button
              type="primary"
              plain
              size="small"
              style="float: right; margin: -2px 15px 0 0"
              @click="add(4)"
            >
              <!-- 添加管控内容 -->
              {{
                $t("message.dangerousBigDictionary.add") +
                $t("message.dangerousBigDictionary.controlContent")
              }}
            </el-button>
          </div>
          <el-table height="652px" :data="itemDetailsData" class="tables">
            <!-- 序号 -->
            <el-table-column
              type="index"
              :label="$t('message.dangerousBigDictionary.serial')"
              width="50"
              align="center"
            ></el-table-column>
            <!-- 分类 -->
            <el-table-column
              prop="controlTypeName"
              :label="$t('message.dangerousBigDictionary.type')"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.controlTypeName }}
              </template>
            </el-table-column>
            <!-- 管控内容 -->
            <el-table-column
              prop="controlContent"
              :label="$t('message.dangerousBigDictionary.controlContent')"
              align="center"
            >
            </el-table-column>
            <!-- 显示状态 -->
            <el-table-column
              prop="tableName"
              :label="$t('message.dangerousBigDictionary.showStatus')"
              align="center"
            >
              <template slot-scope="scope">
                <span class="primaryText" style="margin-right: 20px">{{
                  scope.row.yesShowName
                }}</span>
                <span class="redText">{{ scope.row.noShowName }}</span>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
              :label="$t('message.dangerousBigDictionary.actions')"
              align="center"
              width="200"
              v-if="$route.path.indexOf('/project/') == -1"
            >
              <template slot-scope="scope">
                <el-button
                  @click="editCheckItem(scope.row)"
                  type="text"
                  size="small"
                  icon="el-icon-edit"
                >
                  <span style="font-size: 14px">
                    <!-- 编辑 -->
                    {{ $t("message.dangerousBigDictionary.edit") }}
                  </span>
                </el-button>
                <el-button
                  @click="delCheckItem(scope.row)"
                  type="text"
                  size="small"
                  style="color: red"
                  icon="el-icon-delete"
                >
                  <span style="font-size: 14px">
                    <!-- 删除 -->
                    {{ $t("message.dangerousBigDictionary.remove") }}
                  </span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      class="dialig"
      :modal-append-to-body="false"
      :title="title"
      :visible.sync="dialogVisible"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="form"
          :model="dialogdata"
          :rules="rules"
          label-width="120px"
          size="medium"
          class="dialogFormBox"
        >
          <!-- <el-form-item label="编码" prop="code">
            <el-input
              v-model="dialogdata.code"
              placeholder="请输入"
            ></el-input>
          </el-form-item> -->
          <!-- 分类名称 -->
          <el-form-item
            :label="$t('message.dangerousBigDictionary.typeName')"
            prop="typeName"
          >
            <el-input
              v-model="dialogdata.typeName"
              :placeholder="
                $t('message.dangerousBigDictionary.placeholderText')
              "
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="排序">
            <el-input-number v-model="dialogdata.orderSort"></el-input-number>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="dialogdata.remark"
              placeholder="请输入"
            ></el-input>
          </el-form-item> -->
          <div class="dialog-footer">
            <el-button
              @click="dialogVisible = false"
              size="medium"
              icon="el-icon-circle-close"
            >
              <!-- 取 消 -->
              {{ $t("message.dangerousBigDictionary.cancel") }}
            </el-button>
            <el-button
              type="primary"
              @click="editSave('form')"
              size="medium"
              icon="el-icon-circle-check"
            >
              <!-- 确 定 -->
              {{ $t("message.dangerousBigDictionary.confirm") }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      class="dialig"
      :modal-append-to-body="false"
      :title="title"
      :visible.sync="dialogVisible3"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="form2"
          :model="dialogdata"
          label-width="120px"
          :rules="rules2"
          size="medium"
          class="dialogFormBox"
        >
          <!-- 类别描述名称 -->
          <el-form-item
            :label="$t('message.dangerousBigDictionary.typeDescribeName')"
            prop="describeName"
          >
            <el-input
              v-model="dialogdata.describeName"
              :placeholder="
                $t('message.dangerousBigDictionary.placeholderText')
              "
              type="textarea"
              autosize
            ></el-input>
          </el-form-item>
          <!-- 是否超危 -->
          <el-form-item
            :label="$t('message.dangerousBigDictionary.isSuperDanger')"
            prop="dangerType"
          >
            <el-radio v-model="dialogdata.dangerType" :label="1">
              <!-- 否 -->
              {{ $t("message.dangerousBigDictionary.no") }}
            </el-radio>
            <el-radio v-model="dialogdata.dangerType" :label="2">
              <!-- 是 -->
              {{ $t("message.dangerousBigDictionary.yes") }}
            </el-radio>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              @click="dialogVisible3 = false"
              size="medium"
              icon="el-icon-circle-close"
            >
              <!-- 取 消 -->
              {{ $t("message.dangerousBigDictionary.cancel") }}
            </el-button>
            <el-button
              type="primary"
              @click="editSave('form2')"
              :loading="isloading"
              size="medium"
              icon="el-icon-circle-check"
            >
              <!-- 确 定 -->
              {{ $t("message.dangerousBigDictionary.confirm") }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- '添加管控内容':'编辑管控内容' -->
    <el-dialog
      class="dialig"
      :modal-append-to-body="false"
      :title="
        isAddControl
          ? $t('message.dangerousBigDictionary.add') +
            $t('message.dangerousBigDictionary.controlContent')
          : $t('message.dangerousBigDictionary.edit') +
            $t('message.dangerousBigDictionary.controlContent')
      "
      :visible.sync="TableCheckDialog"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="TableCheckItemForm"
          :model="TableCheckItem"
          label-width="130px"
          :rules="TableCheckItemRules"
          size="medium"
          class="dialogFormBox"
        >
          <!-- 分类名称 -->
          <el-form-item
            :label="$t('message.dangerousBigDictionary.typeName')"
            prop="controlTypeName"
          >
            <el-input
              v-model="TableCheckItem.controlTypeName"
              :placeholder="
                $t('message.dangerousBigDictionary.placeholderText')
              "
              type="textarea"
              autosize
            ></el-input>
          </el-form-item>
          <!-- 管控内容 -->
          <el-form-item
            :label="$t('message.dangerousBigDictionary.controlContent')"
            prop="controlContent"
          >
            <el-input
              v-model="TableCheckItem.controlContent"
              :placeholder="
                $t('message.dangerousBigDictionary.placeholderText')
              "
              type="textarea"
              autosize
            ></el-input>
          </el-form-item>
          <!-- 错误显示的名称 -->
          <el-form-item
            :label="$t('message.dangerousBigDictionary.errorShowName')"
            prop="noShowName"
          >
            <el-input
              v-model="TableCheckItem.noShowName"
              :placeholder="
                $t('message.dangerousBigDictionary.placeholderText')
              "
            ></el-input>
          </el-form-item>
          <!-- 对显示的名称 -->
          <el-form-item
            :label="$t('message.dangerousBigDictionary.successShowName')"
            prop="yesShowName"
          >
            <el-input v-model="TableCheckItem.yesShowName"></el-input>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              @click="TableCheckDialog = false"
              size="medium"
              icon="el-icon-circle-close"
            >
              <!-- 取 消 -->
              {{ $t("message.dangerousBigDictionary.cancel") }}
            </el-button>
            <el-button
              type="primary"
              @click="editTableCheckSave('TableCheckItemForm')"
              :loading="isloading"
              size="medium"
              icon="el-icon-circle-check"
            >
              <!-- 确 定 -->
              {{ $t("message.dangerousBigDictionary.confirm") }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- 绑定管控内容 -->
    <el-dialog
      class="dialig"
      :modal-append-to-body="false"
      :title="
        $t('message.dangerousBigDictionary.bind') +
        $t('message.dangerousBigDictionary.controlContent')
      "
      :visible.sync="bindControlDialog"
      width="867px"
    >
      <div class="dialog_content">
        <el-table
          class="tables"
          ref="multipleTable"
          :data="itemDetailsData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
            width="55"
            v-if="$route.path.indexOf('/project/') == -1"
          >
          </el-table-column>
          <!-- 分类 -->
          <el-table-column
            prop="controlTypeName"
            :label="$t('message.dangerousBigDictionary.type')"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.controlTypeName }}
            </template>
          </el-table-column>
          <!-- 管控内容 -->
          <el-table-column
            prop="controlContent"
            :label="$t('message.dangerousBigDictionary.controlContent')"
            align="center"
          >
          </el-table-column>
          <!-- 显示状态 -->
          <el-table-column
            prop="tableName"
            :label="$t('message.dangerousBigDictionary.showStatus')"
            align="center"
          >
            <template slot-scope="scope">
              <span class="primaryText" style="margin-right: 20px">{{
                scope.row.yesShowName
              }}</span>
              <span class="redText">{{ scope.row.noShowName }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
              label="状态"
              align="center"
              v-if="$route.path.indexOf('/project/') == -1"
            >
              <template slot-scope="scope">
                <el-button
                  @click="delBindFn(scope.row)"
                  type="text"
                  size="small"
                  style="color: red"
                  icon="el-icon-delete"
                >
                  <span style="font-size: 14px">取消绑定</span>
                </el-button>
              </template>
            </el-table-column> -->
        </el-table>
        <div
          class="dialog-footer"
          v-if="$route.path.indexOf('/project/') == -1"
        >
          <el-button
            @click="bindControlDialog = false"
            size="medium"
            icon="el-icon-circle-close"
          >
            <!-- 取 消 -->
            {{ $t("message.dangerousBigDictionary.cancel") }}
          </el-button>
          <!-- <el-button
            type="danger"
            @click="delBindFn()"
            size="medium"
            icon="el-icon-circle-check"
            >
            删除绑定
            {{$t('message.dangerousBigDictionary.remove')+$t('message.dangerousBigDictionary.bind')}}
            </el-button
            > -->
          <el-button
            type="primary"
            @click="saveSelectedControl()"
            size="medium"
            icon="el-icon-circle-check"
          >
            <!-- 绑 定 -->
            {{ $t("message.dangerousBigDictionary.bind") }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  adddangerousEngineeringTypeApi,
  editdangerousEngineeringTypeApi,
  deletedangerousEngineeringTypeApi,
  selectdangerousEngineeringTypeApi,
  adddangerousEngineeringTypeDescribeApi,
  selectdangerousEngineeringTypeDescribeApi,
  editdangerousEngineeringTypeDescribeApi,
  deletedangerousEngineeringTypeDescribeApi,
  adddangerousEngineeringTypeControlContentApi,
  selectdangerousEngineeringTypeControlContentApi,
  editdangerousEngineeringTypeControlContentApi,
  deletedangerousEngineeringTypeControlContentApi,
  typeDescribeControlAddApi,
  typeDescribeControlDeleteApi,
} from "@/assets/js/api/dangerousBigProject";
export default {
  data() {
    return {
      isloading: false,
      currentTwo: -1,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      current: 0,
      dataList: [],
      riskListForm: {
        projectType: "",
        nodeName: "",
      },
      riskListDetailInfo: {},
      defaultExpandAll: false,
      defaultExpandedKeys: [],
      defaultProps: {
        children: "children",
        label: "typeName",
      },
      threeData: [],
      //   editId: "",
      title: "",
      dialogdata: {
        code: "",
        remark: "",
        typeName: "",
        parentId: "",
        sn: "",
        type: 1,
        orderSort: 0,
      },
      parentid: "",
      parentid1: "",
      type: 0,
      ofThree: false,
      threeIndex: -1,
      rules: {
        typeName: [{ required: true, message: "必填", trigger: "blur" }],
        // code: [{ required: true, message: "必填", trigger: "blur" }],
      },
      rules2: {
        typeName: [{ required: true, message: "必填", trigger: "blur" }],
        dangerType: [{ required: true, message: "必选", trigger: "change" }],
      },
      secondId: "",
      fullscreenLoading: false,
      leftId: "",
      itemDetailsData: [],
      TableCheckItem: {},
      TableCheckDialog: false,
      TableCheckItemRules: {
        controlTypeName: [{ required: true, message: "必填", trigger: "blur" }],
        controlContent: [{ required: true, message: "必填", trigger: "blur" }],
        noShowName: [{ required: true, message: "必填", trigger: "blur" }],
        yesShowName: [{ required: true, message: "必填", trigger: "blur" }],
      },
      activeName: "first",
      isAddControl: true,
      bindControlDialog: false,
      multipleSelection: [],
    };
  },
  mounted() {
    this.loadList();
  },
  //列表加载
  methods: {
    delBindFn(item) {
      let arr = [];
      this.multipleSelection.forEach((element) => {
        arr.push(element.id);
      });
      typeDescribeControlDeleteApi({
        controlId: arr.join(","),
        describeId: this.dialogdata.id,
      }).then((res) => {
        // 取消绑定成功！
        this.$message.success(
          this.$t("message.dangerousBigDictionary.cancelBindMessage")
        );
        this.bindControlDialog = false;
        this.loadRigthtList();
      });
    },
    handleSelectionChange(val) {
      console.log("----", val);
      this.multipleSelection = val;
    },
    saveSelectedControl() {
      let arr = [];
      this.multipleSelection.forEach((element) => {
        arr.push(element.id);
      });
      typeDescribeControlAddApi({
        controlId: arr.join(","),
        describeId: this.dialogdata.id,
      }).then((res) => {
        this.bindControlDialog = false;
        this.loadRigthtList();
      });
    },
    showBindDialogFn(item) {
      this.bindControlDialog = true;
      this.dialogdata.id = item.id;
      this.$nextTick(() => {
        console.log(111);
        this.$refs.multipleTable.clearSelection();
        console.log(222);
        if (this.$route.path.indexOf("/project/") != -1) {
          this.itemDetailsData = item.contentList ? item.contentList : [];
        } else {
          this.getCheckItem(1, item.contentList);
        }
      });
    },
    beforeAvatarUpload() {
      this.fullscreenLoading = true;
    },
    handleSuccess(res, file) {
      console.log(res);
      this.$refs.upload.clearFiles();
      this.fullscreenLoading = false;
      if (res.code == 200 || res.code == 0) {
        this.$message.success("导入成功！");
        this.loadList();
      } else {
        this.$message.error("导入失败！");
      }
    },
    downloadFn() {
      window.location.href =
        this.$http.defaults.baseURL +
        "xmgl/inspectTableLibrary/downloadExcelInspectTable";
    },
    add(type, id) {
      if (id) {
        this.parentid1 = id;
      }
      this.type = type;
      this.dialogdata = {};
      if (this.type == 1) {
        this.dialogVisible = true;
        // "新增分类"
        this.title = this.$t("message.dangerousBigDictionary.addType");
      } else if (this.type == 2) {
        this.dialogVisible = true;
        // 新增二级分类
        this.title = this.$t("message.dangerousBigDictionary.addType2");
      } else if (this.type == 3) {
        this.dialogVisible3 = true;
        // 新增类别描述
        this.title = this.$t("message.dangerousBigDictionary.addType3");
      } else if (this.type == 4) {
        this.TableCheckItem = {};
        this.TableCheckDialog = true;
        this.isAddControl = true;
      }
    },
    editSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.isloading = true;
          if (this.title.indexOf("编辑") == -1) {
            if (this.type == 1) {
              this.dialogdata.sn = this.$store.state.userInfo.headquartersSn;
              this.dialogdata.parentId = 0;
            } else if (this.type == 2) {
              this.dialogdata.sn = this.$store.state.userInfo.headquartersSn;
              this.dialogdata.parentId = this.parentid1;
            } else if (this.type == 3) {
              this.dialogdata.typeId = this.riskListDetailInfo.id;
            }
          }
          //   console.log(this.dialogdata)
          //
          if (this.type == 1 || this.type == 2) {
            // 编辑
            if (
              this.title.indexOf(
                this.$t("message.dangerousBigDictionary.edit")
              ) != -1
            ) {
              editdangerousEngineeringTypeApi(this.dialogdata).then((res) => {
                // this.isloading = false;
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                this.dialogVisible3 = false;
                this.loadList();
                // 更新成功！
                this.$message.success(
                  this.$t("message.dangerousBigDictionary.updateSuccess")
                );
              });
            } else {
              adddangerousEngineeringTypeApi(this.dialogdata).then((res) => {
                this.isloading = false;
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                this.dialogVisible3 = false;
                this.loadList();
                // 添加成功！
                this.$message.success(
                  this.$t("message.dangerousBigDictionary.addSuccess")
                );
              });
            }
          } else {
            // 编辑
            if (
              this.title.indexOf(
                this.$t("message.dangerousBigDictionary.edit")
              ) != -1
            ) {
              editdangerousEngineeringTypeDescribeApi(this.dialogdata).then(
                (res) => {
                  this.isloading = false;
                  this.dialogVisible = false;
                  this.dialogVisible2 = false;
                  this.dialogVisible3 = false;
                  this.loadRigthtList();
                  // 更新成功！
                  this.$message.success(
                    this.$t("message.dangerousBigDictionary.updateSuccess")
                  );
                }
              );
            } else {
              adddangerousEngineeringTypeDescribeApi(this.dialogdata).then(
                (res) => {
                  this.isloading = false;
                  this.dialogVisible = false;
                  this.dialogVisible2 = false;
                  this.dialogVisible3 = false;
                  this.loadRigthtList();
                  // 添加成功！
                  this.$message.success(
                    this.$t("message.dangerousBigDictionary.addSuccess")
                  );
                }
              );
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    edit1(data, type) {
      data = JSON.parse(JSON.stringify(data));
      this.type = type;
      if (data.children) {
        delete data["children"];
      }
      if (data.creatTime) {
        delete data["creatTime"];
      }
      this.dialogdata = data;
      if (this.type == 1) {
        this.dialogVisible = true;
        // 编辑分类
        this.title = this.$t("message.dangerousBigDictionary.editType");
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      } else if (this.type == 2) {
        this.dialogVisible = true;
        // 编辑二级分类
        this.title = this.$t("message.dangerousBigDictionary.editType2");
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      } else if (this.type == 3) {
        this.dialogVisible3 = true;
        // 编辑类别描述
        this.title = this.$t("message.dangerousBigDictionary.editType3");
        this.$nextTick(() => {
          this.$refs.form2.clearValidate();
        });
      } else if (this.type == 4) {
      }
    },
    del1(obj) {
      this.$confirm(
        this.$t("message.personnelPosition.beaconManage.table.confirmText") +
          "【" +
          obj.typeName +
          "】?",
        this.$t("message.personnelPosition.beaconManage.table.Tips"),
        {
          confirmButtonText: this.$t(
            "message.personnelPosition.confirmButtonText"
          ),
          cancelButtonText: this.$t(
            "message.personnelPosition.cancelButtonText"
          ),
          type: "warning",
        }
      ).then(() => {
        deletedangerousEngineeringTypeApi({ id: obj.id }).then((result) => {
          if (result.success) {
            this.$message.success(result.message);
            this.loadList();
          }
        });
      });
    },
    del2(obj) {
      this.$confirm(
        this.$t("message.personnelPosition.beaconManage.table.confirmText") +
          "【" +
          obj.describeName +
          "】?",
        this.$t("message.personnelPosition.beaconManage.table.Tips"),
        {
          confirmButtonText: this.$t(
            "message.personnelPosition.confirmButtonText"
          ),
          cancelButtonText: this.$t(
            "message.personnelPosition.cancelButtonText"
          ),
          type: "warning",
        }
      ).then(() => {
        deletedangerousEngineeringTypeDescribeApi({ id: obj.id }).then(
          (result) => {
            if (result.success) {
              this.$message.success(result.message);
              this.loadRigthtList();
            }
          }
        );
      });
    },
    showThree(data, index) {
      this.currentTwo = index;
      this.type = 3;
      this.threeIndex = index;
      this.parentid = data.id;
      this.ofThree = true;
      //   if (data.children.length != 0) {
      this.threeData = data.children;
      //   }
    },
    handleNodeClick(data) {
      this.riskListDetailInfo = {
        ...data,
      };
      this.leftId = data.id;
      this.parentid1 = data.id;
      this.loadRigthtList();
    },
    loadList() {
      let param = {
        sn: this.$store.state.userInfo.headquartersSn,
      };
      selectdangerousEngineeringTypeApi(param).then((res) => {
        this.dataList = res.result;
        if (res.result.length > 0) {
          this.parentid1 = res.result[0].id;
          this.current = 0;
          this.loadRigthtList();
        }
      });
    },
    loadRigthtList() {
      let param = {
        typeId: this.riskListDetailInfo.id ? this.riskListDetailInfo.id : 0,
      };
      selectdangerousEngineeringTypeDescribeApi(param).then((res) => {
        this.threeData = res.result;
      });
    },
    //获取类别描述详细
    getCheckItem(type, rows) {
      selectdangerousEngineeringTypeControlContentApi({
        typeId: this.parentid1,
      }).then((res) => {
        this.itemDetailsData = res.result;
        if (type && rows) {
          this.$nextTick(() => {
            rows.forEach((row) => {
              for (
                let index = 0;
                index < this.itemDetailsData.length;
                index++
              ) {
                if (this.itemDetailsData[index].id == row.id) {
                  this.$refs.multipleTable.toggleRowSelection(
                    this.itemDetailsData[index]
                  );
                  console.log(333);
                  break;
                }
              }
            });
          });
        }
      });
    },
    editCheckItem(item) {
      this.isAddControl = false;
      this.TableCheckItem = JSON.parse(JSON.stringify(item));
      this.TableCheckDialog = true;
    },
    delCheckItem(obj) {
      this.$confirm(
        this.$t("message.personnelPosition.beaconManage.table.confirmText") +
          "【" +
          obj.controlContent +
          "】?",
        this.$t("message.personnelPosition.beaconManage.table.Tips"),
        {
          confirmButtonText: this.$t(
            "message.personnelPosition.confirmButtonText"
          ),
          cancelButtonText: this.$t(
            "message.personnelPosition.cancelButtonText"
          ),
          type: "warning",
        }
      ).then(() => {
        deletedangerousEngineeringTypeControlContentApi({ id: obj.id }).then(
          (result) => {
            if (result.success) {
              this.$message.success(result.message);
              this.getCheckItem();
            }
          }
        );
      });
    },
    editTableCheckSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isAddControl) {
            this.TableCheckItem.typeId = this.parentid1;
            adddangerousEngineeringTypeControlContentApi(
              this.TableCheckItem
            ).then((res) => {
              this.TableCheckDialog = false;
              this.getCheckItem();
              // 添加成功！
              this.$message.success(
                this.$t("message.dangerousBigDictionary.addSuccess")
              );
            });
          } else {
            editdangerousEngineeringTypeControlContentApi(
              this.TableCheckItem
            ).then((res) => {
              this.TableCheckDialog = false;
              this.getCheckItem();
              // 更新成功！
              this.$message.success(
                this.$t("message.dangerousBigDictionary.updateSuccess")
              );
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClick() {
      if (this.activeName == "first") {
        this.loadRigthtList();
      } else {
        this.getCheckItem();
      }
    },
    //全部关闭
    setCheckedKeys() {
      this.defaultExpandAll = false;
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded =
          this.defaultExpandAll;
        const { data } = this.$refs.tree.store._getAllNodes()[i];
        this.handleNodeCollapse(data);
      }
      console.log(this.defaultExpandedKeys);
    },
    //全部展开
    setCheckedNodes() {
      // defaultExpandedKeys
      console.log(this.$refs.tree.store._getAllNodes());
      this.defaultExpandAll = true; //展开所有节点
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        // this.$refs.tree.store._getAllNodes()[i].expanded = this.defaultExpandAll;
        const { data } = this.$refs.tree.store._getAllNodes()[i];
        if (data.children.length > 0) {
          this.handleNodeExpand(data);
        }
      }
    },
    // 树节点展开
    handleNodeExpand(data) {
      // 保存当前展开的节点
      const flag = this.defaultExpandedKeys.some((item) => {
        if (item === data.id) {
          return true;
        }
        return false;
      });
      if (!flag) {
        // 不存在则存到数组里
        this.defaultExpandedKeys.push(data.id);
      }
    },
    // 树节点关闭
    handleNodeCollapse(data) {
      // 删除当前关闭的节点
      this.defaultExpandedKeys.some((item, i) => {
        if (item === data.id) {
          this.defaultExpandedKeys.splice(i, 1);
        }
      });
      this.removeChildrenIds(data); // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
    },
    // 删除树子节点
    removeChildrenIds(data) {
      if (data.children) {
        data.children.forEach((item) => {
          const index = this.defaultExpandedKeys.indexOf(item.id);
          if (index > 0) {
            this.defaultExpandedKeys.splice(index, 1);
          }
          this.removeChildrenIds(item);
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.sidebar_btn2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  > .el-button:hover {
    color: #5181f6 !important;
  }
  > .el-button {
    // padding: 0;
    position: relative;
    border: none;
    // margin-left: 10px;
  }
  > .el-button:first-child::before {
    content: " ";
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 1px;
    height: 90%;
    background-color: #d9d9d9;
  }
}
.areaTreeInner {
  //   background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  // padding: 20px 15px;
  .treeStyle();
  .left-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
}
.operateBtns {
  float: right; //向右浮动

  i {
    margin-right: 10px;
    cursor: pointer;
  }
}
.treeBox {
  height: calc(100% - 56px - 59px - 30px);
  background-color: rgba(216, 216, 216, 0.2);
  padding-top: 10px;
}
.flex() {
  display: flex;
  align-items: center;
}
.treeStyle() {
  /deep/.el-tree {
    font-size: 15px;
    width: 100%;
    background-color: transparent;
    .el-tree-node {
      white-space: normal;
      &:focus > .el-tree-node__content {
        background-color: transparent;
      }
      &.is-current > .el-tree-node__content {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }
    }
    .el-tree-node__content {
      // height: 32px;
      padding: 7px 0;
      height: auto;
      line-height: 16px;
      position: relative;
      // margin-bottom: 7px;
      &:hover {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }

      .videoName {
        font-size: 14px;
      }
      .projectName {
        font-size: 14px;
        width: calc(100% - 55px);
        display: inline-block;
      }
      .companyName2 {
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        width: 192px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .el-tree-node__expand-icon {
      font-size: 16px;
      padding: 0 6px;
      &.is-leaf {
        color: transparent !important;
      }
    }
    .treeTitle {
      background-color: #f7f7f7;
      margin-bottom: 10px;
    }
  }
}
.custom-tree-node {
  width: 100%;
}
.el-button--small,
.el-button--small.is-round {
  padding: 6px 9px;
}
.block {
  overflow: hidden;
  height: calc(100% + 0px);
  background-color: #f3f5fd;
  .system-left {
    float: left;
    width: 300px;
    padding: 20px 15px;
    height: calc(100% - 40px);
    background-color: white;
    .treeList {
      background-color: rgba(216, 216, 216, 0.2);
      height: calc(100% - 42px) !important;
    }
    li {
      cursor: pointer;
      font-size: 16px;
      line-height: 32px;
      letter-spacing: 1px;
      font-weight: bold;
      .clickName {
        // width: calc(100% - 176px);
        width: 74%;
        .imgbox {
          display: inline-block;
          margin: 0 6px 0 13px;
          font-size: 16px;
        }
      }
    }
    li:hover,
    .active {
      // background: linear-gradient(270deg, white, #b7d8ff 100%);
      background-color: rgba(81, 129, 246, 0.14);
      color: @--color-primary;
    }
    #child {
      li {
        font-size: 15px;
        padding-left: 39px;
        font-weight: normal;
      }
    }
  }
  .system-right {
    float: right;
    // margin-right: 1.5%;
    margin-left: 20px;
    width: calc(100% - 330px - 20px - 30px);
    // min-height: 620px;
    height: calc(100% - 40px);
    // border: 1px solid #e9e9e9;
    background-color: white;
    padding: 20px 15px;
  }
}
.formTwoInput {
  /deep/.el-form-item__content {
    margin-left: 0 !important;
  }
}
.el-icon-question {
  opacity: 0.7;
}

/deep/.input-with-select {
  .el-input-group__append {
    background-color: #fff;
  }
  .el-select {
    width: 130px !important;
    .el-input {
      width: 100% !important;
    }
  }
}
.jyjzPage {
  .block {
    background-color: transparent;
    .system-left {
      background-color: #112446;
    }
    .system-right {
      background-color: transparent;
    }
    .treeList {
      background-color: #0d1a34;
    }
  }
}
.pageTitle2 {
  cursor: pointer;
  &::before {
    display: none;
  }
  .el-icon-back {
    font-size: 16px;
  }
}
::v-deep.el-form-item.foldLabel .el-form-item__label {
  white-space: pre-line; /*换行显示*/
  height: 32px; /*设置lable高度，与input高度一样*/
  line-height: 16px !important; /*设置行高为label高度的一半（有n行就是label高度的1/n）*/
}
</style>
