<template>
  <div class="fullHeight">
    <div class="block fullHeight">
      <div class="system-left">
        <!-- <h1>
          检查库
          <el-button
            type="primary"
            plain
            size="small"
            style="float:right;margin-top: -2px;"
            @click="add(1)"
          >
            新增检查库
          </el-button>
        </h1> -->
        <div class="pageTitle">
          检查库
          <el-button
            type="primary"
            plain
            size="medium"
            style="float: right; margin-top: -2px"
            @click="add(1)"
          >
            新增检查库
          </el-button>
        </div>
        <el-form size="mini" ref="riskListForm" :model="riskListForm">
          <el-form-item label="工程类别">
            <el-select
              @change="loadList"
              v-model="riskListForm.projectClassify"
              clearable
              placeholder="请选择"
            >
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="item in riskItemList"
                :key="item.id"
                :label="item.name"
                :value="item.data"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              suffix-icon="el-icon-search"
              v-model="riskListForm.name"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <vue-scroll class="treeList">
          <div style="padding-top: 10px">
            <ul v-for="(ele, eIndex) in dataListUp" :key="eIndex">
              <li :class="{ active: ele.id == ele.currentRight }">
                <div class="clickName" @click="isOpen(ele, eIndex)">
                  <div class="imgbox">
                    <i
                      v-if="ele.currentRight != ele.id"
                      class="el-icon-arrow-right"
                    ></i>
                    <i v-else class="el-icon-arrow-down"></i>
                  </div>
                  <el-popover
                    placement="top-start"
                    v-model="ele.visible"
                    :content="ele.name"
                  >
                    <span
                      slot="reference"
                      @mouseenter="
                        ele.visible = ele.name.length > 9 ? true : false
                      "
                      @mouseleave="ele.visible = false"
                      >{{
                        ele.name.length > 9
                          ? ele.name.substring(0, 8) + "..."
                          : ele.name
                      }}</span
                    >
                  </el-popover>
                </div>
              </li>
              <ul
                id="child"
                class="child1"
                v-if="ele.currentRight == ele.id"
                v-for="(name, index) in ele.children"
                :key="index"
              >
                <!-- <li :class="{active:index==current}"> -->
                <li :class="{ active: index == current && currentTwo == -1 }">
                  <div
                    class="clickName"
                    @click="next(index, $event, name, 1)"
                    style="display: inline-block"
                  >
                    <div class="imgbox">
                      <i
                        v-if="name.currentRight != name.id"
                        class="el-icon-arrow-right"
                      ></i>
                      <i v-else class="el-icon-arrow-down"></i>
                    </div>
                    <el-popover
                      placement="top-start"
                      v-model="name.visible"
                      :content="name.name"
                    >
                      <span
                        slot="reference"
                        @mouseenter="
                          name.visible = name.name.length > 9 ? true : false
                        "
                        @mouseleave="name.visible = false"
                        >{{
                          name.name.length > 9
                            ? name.name.substring(0, 8) + "..."
                            : name.name
                        }}</span
                      >
                    </el-popover>
                  </div>
                  <div
                    style="
                      float: right;
                      clear: both;
                      height: 32px;
                      margin-right: 20px;
                    "
                  >
                    <el-button
                      type="text"
                      size="small"
                      icon="el-icon-circle-plus"
                      style="font-size: 14px"
                      @click="add(2, name.id)"
                    ></el-button>
                    <el-button
                      type="text"
                      size="small"
                      icon="el-icon-edit"
                      @click="edit1(name, 1)"
                      style="font-size: 14px"
                    ></el-button>
                    <el-button
                      type="text"
                      size="medium"
                      style="color: red; font-size: 14px"
                      icon="el-icon-delete"
                      @click="del1(name.id, 1)"
                    ></el-button>
                  </div>
                </li>
                <ul
                  v-for="(item, i) in name.children"
                  id="child2"
                  v-if="name.currentRight == name.id"
                  :key="i"
                >
                  <!-- <li :class="{actives:index==current&&i==threeIndex}"> -->
                  <li
                    :class="{ active: item.id == parentid && current != -1 }"
                    @click="next2(item)"
                  >
                    <el-popover
                      placement="top-start"
                      v-model="item.visible"
                      :content="item.name"
                    >
                      <div
                        slot="reference"
                        @mouseenter="
                          item.visible = item.name.length > 9 ? true : false
                        "
                        @mouseleave="item.visible = false"
                        style="display: inline-block; width: 60%"
                        @click="showThree(item, i)"
                      >
                        {{
                          item.name.length > 10
                            ? item.name.substring(0, 9) + "..."
                            : item.name
                        }}
                      </div>
                    </el-popover>
                    <div
                      style="
                        float: right;
                        clear: both;
                        height: 32px;
                        margin-right: 20px;
                      "
                    >
                      <el-button
                        type="text"
                        size="medium"
                        icon="el-icon-edit"
                        style="font-size: 14px"
                        @click="edit1(item, 2)"
                      ></el-button>
                      <el-button
                        type="text"
                        size="medium"
                        style="color: red; font-size: 14px"
                        icon="el-icon-delete"
                        @click="del1(item.id, 2)"
                      ></el-button>
                    </div>
                  </li>
                </ul>
              </ul>
            </ul>
            <li
              class="title"
              style="text-align: center; line-height: 140px"
              v-show="dataList.length == 0"
            >
              暂无数据
            </li>
          </div>
        </vue-scroll>
        <div class="sidebar_btn2">
          <el-button
            style="color: #b3b3b3"
            @click="setCheckedNodes"
            size="mini"
            type="text"
            plain
            >全部展开</el-button
          >
          <el-button
            @click="setCheckedKeys"
            style="color: #b3b3b3"
            size="mini"
            type="text"
            plain
            >全部关闭</el-button
          >
        </div>
      </div>
      <div class="system-right">
        <div class="pageTitle">小项库</div>
        <div class="pageSubTitle">
          <div>
            <el-button
              v-show="type == 3"
              type="primary"
              plain
              size="medium"
              @click="add(3)"
            >
              <!-- <img
              src="../../assets/images/add-blue.png"
              style="vertical-align: -2px;margin-right: 5px;"
            /> -->
              新增
            </el-button>
            <el-button
              v-show="type == 3"
              size="medium"
              :disabled="
                $refs.multipleTable && $refs.multipleTable.selection.length == 0
              "
              :type="
                $refs.multipleTable && $refs.multipleTable.selection.length == 0
                  ? 'info'
                  : 'danger'
              "
              class="delete_btn"
              plain
              @click="deleteAttendanceBatch"
              >删除</el-button
            >
          </div>
          <div>
            <el-button type="primary" plain size="medium" @click="downloadFn">
              下载隐患库导入模板
            </el-button>
            <el-upload
              ref="upload"
              :before-upload="beforeAvatarUpload"
              :action="
                $http.defaults.baseURL +
                'xmgl/xzSecurityDangerTypeRecord/importDangerTypeRecordExcelTemplate'
              "
              :limit="1"
              :show-file-list="false"
              :data="{ sn: $store.state.userInfo.headquartersSn }"
              name="excelFile"
              :on-success="handleSuccess"
              :headers="headers"
            >
              <el-button
                size="medium"
                type="primary"
                plain
                v-loading.fullscreen.lock="fullscreenLoading"
              >
                导入隐患库
              </el-button>
            </el-upload>
          </div>
        </div>
        <div class="table_box" style="margin: 13px">
          <el-table
            ref="multipleTable"
            height="552px"
            :data="threeData"
            class="tables"
          >
            <el-table-column align="center" type="selection" width="55">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column label="项目类型" align="center">
              <template slot-scope="scope">
                <span>{{
                  scope.row.projectType
                    ? projectTypeList[scope.row.projectType - 1].title
                    : "--"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="priorityNameDicName"
              label="问题等级分类二"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="priorityName"
              label="问题等级"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="content"
              label="问题描述"
              align="center"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="remark"
              label="整改要求"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="changeLimit"
              label="整改时限(天)"
              align="center"
            ></el-table-column>
            <el-table-column label="扣分" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.deductScore || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="edit1(scope.row, 3)"
                  type="text"
                  size="small"
                  icon="el-icon-edit"
                >
                  <span style="font-size: 14px">编辑</span>
                </el-button>
                <el-button
                  @click="del1(scope.row.id, 3)"
                  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>
      </div>
    </div>
    <el-dialog
      class="dialig"
      :title="title"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <p>你确定要删除该项吗</p>
      <div slot="footer" style="margin-top: 0px" class="dialog-footer">
        <el-button size="medium" @click="dialogVisible1 = false"
          >取 消</el-button
        >
        <el-button size="medium" type="primary" @click="delSave1"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :modal-append-to-body="false"
      class="dialig"
      :title="title"
      :visible.sync="dialogVisible"
      width="667px"
      @close="close"
    >
      <div class="dialog_content">
        <el-form
          ref="form"
          :model="dialogdata"
          :rules="rules"
          label-width="150px"
          size="medium"
        >
          <el-form-item label="检查库名称" prop="dangerName">
            <el-input
              placeholder="请输入检查库名称"
              v-model="dialogdata.dangerName"
            ></el-input>
          </el-form-item>
          <el-form-item label="工程类别" prop="projectClassify">
            <el-select
              v-model="dialogdata.projectClassify"
              style="width: 100%"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in riskItemList"
                :key="item.id"
                :label="item.name"
                :value="item.data"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              placeholder="请输入"
              v-model="dialogdata.remark"
            ></el-input>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              @click="dialogVisible = false"
              size="medium"
              icon="el-icon-circle-close"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="editSave('form')"
              :loading="isloading"
              size="medium"
              icon="el-icon-circle-check"
              >确 定</el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      class="dialig"
      :title="title"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible2"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="form"
          :model="dialogdata"
          :rules="rules"
          label-width="150px"
          size="medium"
        >
          <el-form-item label="大项名称" prop="dangerName">
            <el-input
              placeholder="请输入大项"
              v-model="dialogdata.dangerName"
            ></el-input>
          </el-form-item>
          <el-form-item label="工程类别" prop="projectClassify">
            <el-select
              v-model="dialogdata.projectClassify"
              style="width: 100%"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in riskItemList"
                :key="item.id"
                :label="item.name"
                :value="item.data"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              placeholder="请输入"
              v-model="dialogdata.remark"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button
            @click="dialogVisible2 = false"
            size="medium"
            icon="el-icon-circle-close"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="editSave('form')"
            :loading="isloading"
            size="medium"
            icon="el-icon-circle-check"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
    <el-dialog
      class="dialig"
      :title="title"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible3"
      width="667px"
      @close="close"
    >
      <div class="dialog_content">
        <el-form
          ref="form2"
          :model="dialogdata"
          label-width="150px"
          :rules="rules2"
          size="medium"
        >
          <el-form-item label="项目类型" prop="projectType">
            <el-select
              v-model="dialogdata.projectType"
              class="input"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in projectTypeList"
                :key="item.id"
                :value="item.id"
                :label="item.title"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题等级" prop="level">
            <el-select
              v-model="dialogdata.level"
              class="input"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option :value="1" label="1级"></el-option>
              <el-option :value="2" label="2级"></el-option>
              <el-option :value="3" label="3级"></el-option>
              <el-option :value="4" label="4级"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题等级分类二" prop="priorityNameDic">
            <el-select
              v-model="dialogdata.priorityNameDic"
              class="input"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in dangerItemList"
                :key="item.id"
                :label="item.name"
                :value="item.data"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题描述" prop="content">
            <el-input
              placeholder="请输入"
              v-model="dialogdata.content"
            ></el-input>
          </el-form-item>

          <el-form-item label="整改要求">
            <el-input
              placeholder="请输入"
              v-model="dialogdata.remark"
            ></el-input>
          </el-form-item>
          <el-form-item label="整改时限(天)" prop="changeLimit">
            <el-input
              placeholder="请输入"
              v-model="dialogdata.changeLimit"
              @input="handleEdit"
            ></el-input>
          </el-form-item>
          <el-form-item label="扣分" prop="deductScore">
            <el-input-number
              style="width: 100%"
              v-model="dialogdata.deductScore"
              placeholder="请输入"
              :min="0"
              :max="100"
            ></el-input-number>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button
            @click="dialogVisible3 = false"
            size="medium"
            icon="el-icon-circle-close"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="editSave('form2')"
            :loading="isloading"
            size="medium"
            icon="el-icon-circle-check"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import moment from "moment";
import {
  addSafeDangerTypeRecordApi,
  editSafeDangerTypeRecordApi,
  delSafeDangerItemRecordApi,
  delSafeDangerTypeRecordApi,
  getSafeCompanyDangerTypeRecordApi,
  getTopProjectClassifyTypeRecordTreePageApi,
  addSafeDangerItemRecordApi,
  editSafeDangerItemRecordApi,
  getSafeCompanyDangerItemRecordApi,
  deleteBatchXzSecurityDangerItemRecordApi,
} from "@/assets/js/api/quality";
import { getDictionaryItemApi } from "@/assets/js/api/companyDiagram";
import axios from "axios";

export default {
  data() {
    return {
      fullscreenLoading: false,
      isloading: false,
      currentTwo: -1,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      current: -1,
      dataList: [],
      threeData: [],
      editId: "",
      title: "",
      dialogdata: {
        level: "",
        priorityNameDic: "",
        remark: "",
        dangerName: "",
        parentId: "",
        projectType: "",
      },
      typeFa: "",
      // typeSmallList:[],
      // allTypelist:[],
      // typeList: [
      //   { id: 1, name: "法律" },
      //   { id: 2, name: "行政法规" },
      //   { id: 3, name: "规章" },
      //   { id: 4, name: "其它公文" }
      // ],
      parentid: "",
      parentid1: "",
      type: 0,
      ofThree: false,
      threeIndex: -1,
      rules: {
        dangerName: [
          { required: true, message: "请输入名称", trigger: "blur" },
          // { min: 10, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        projectClassify: [
          { required: true, message: "请选择", trigger: "change" },
        ],
      },
      rules2: {
        level: [
          { required: true, message: "请选择问题等级", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入问题描述", trigger: "blur" },
        ],
        changeLimit: [
          { required: true, message: "请输入整改时限", trigger: "blur" },
        ],
      },
      secondId: "",
      levelList: ["一级", "二级", "三级", "四级"],
      projectTypeList: [
        {
          id: 1,
          title: "保证项目",
        },
        {
          id: 2,
          title: "一般项目",
        },
      ],
      defaultExpandAll: false,
      defaultExpandedKeys: [],
      riskItemList: [],
      dangerItemList: [],
      riskListForm: {
        projectClassify: "",
        name: "",
      },
    };
  },
  mounted() {
    this.loadList();
    this.getDicProjectTypeList();
    // this.loadType();
  },
  computed: {
    headers() {
      return { Authorization: this.$store.state.userInfo.token };
    },
    dataListUp() {
      const searchResult = this.fuzzySearchTree(
        this.dataList,
        this.riskListForm.name
      );
      return searchResult;
    },
  },
  //列表加载
  methods: {
    fuzzySearchTree(treeData, keyword, key = "name") {
      const result = [];
      for (const node of treeData) {
        const newNode = { ...node };
        // 检查当前节点是否匹配关键词
        if (node[key] && node[key].includes(keyword)) {
          result.push(newNode);
        } else if (node.children && node.children.length > 0) {
          // 递归查询子节点
          const childrenResult = this.fuzzySearchTree(
            node.children,
            keyword,
            key
          );
          if (childrenResult.length > 0) {
            newNode.children = childrenResult;
            result.push(newNode);
          }
        }
      }
      return result;
    },
    deleteAttendanceBatch() {
      if (this.$refs.multipleTable.selection.length === 0)
        return this.$message.warning("请勾选需要删除的数据！");
      this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const ids = this.$refs.multipleTable.selection
            .map((item) => item.id)
            .join(",");
          console.log(this.$refs.multipleTable.selection);
          deleteBatchXzSecurityDangerItemRecordApi({ ids }).then((res) => {
            this.loadRigthtList();
          });
        })
        .catch(() => {});
    },
    isOpen(ele, eIndex) {
      const find = this.dataList.find((item) => item.id == ele.id);

      if (find.currentRight == ele.id) {
        find.currentRight = -1;
        return;
      }
      find.currentRight = ele.id;
    },
    // 获取字典工程类别列表
    getDicProjectTypeList() {
      getDictionaryItemApi({
        dictionaryEncoding: "risk_list_project_type",
        projectSn: this.$store.state.userInfo.headquartersSn,
      }).then((res) => {
        if (res.result.length > 0) {
          this.riskItemList = res.result;
        }
      });
      getDictionaryItemApi({
        dictionaryEncoding: "xz_security_danger_item_record_priority_name_dic",
        projectSn: this.$store.state.userInfo.headquartersSn,
      }).then((res) => {
        if (res.result.length > 0) {
          this.dangerItemList = res.result;
        }
      });
    },
    //全部关闭
    setCheckedKeys() {
      this.dataList.forEach((item, index) => {
        if (item.children && item.children.length > 0) {
          item.children.forEach((ele) => {
            this.$set(ele, "currentRight", -1);
          });
        }
        this.$set(item, "currentRight", -1);
      });
      this.current = -1;
    },
    //全部展开
    setCheckedNodes() {
      this.dataList.forEach((item, index) => {
        if (item.children && item.children.length > 0) {
          item.children.forEach((ele, index) => {
            this.$set(ele, "currentRight", ele.id);
          });
        }
        this.$set(item, "currentRight", item.id);
      });
      console.log(this.dataList);
    },
    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.$t("message.safeMangeCheck.toLeadSuccess") + "!"
        );
        this.loadList();
        this.loadRigthtList();
      } else {
        this.$message.error(this.$t("message.safeMangeCheck.toLeadFail") + "!");
      }
    },
    downloadFn() {
      fetch(
        this.$http.defaults.baseURL +
          "xmgl/xzSecurityDangerTypeRecord/downloadDangerTypeRecordExcelTemplate",
        {
          headers: {
            Authorization: this.$store.state.userInfo.token,
          },
        }
      )
        .then((response) => {
          // 处理响应
          if (!response.ok) {
            throw new Error("导出失败");
          }
          return response.blob();
        })
        .then((blob) => {
          console.log("导出成功");
          // 创建一个下载链接
          const url = window.URL.createObjectURL(blob);
          // 创建一个<a>元素
          const link = document.createElement("a");
          link.href = url;
          link.download = "隐患库导入模板.xlsx"; // 指定下载文件的文件名
          // 模拟点击下载链接
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          // 释放URL对象
          window.URL.revokeObjectURL(url);
          // 处理导出的文件
          // 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
    // 在 Input 值改变时触发
    handleEdit(e) {
      let value = e.replace(/[^\d]/g, ""); // 只能输入数字
      value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      value = value.replace(/(\d{15})\d*/, "$1"); // 最多保留15位整数
      this.dialogdata.changeLimit = value;
    },

    // selectFa(val) {
    //   this.typeSmallList = this.allTypelist[val];
    // },
    // loadType(type) {
    //   let url = serverUrl + "/policy/list";

    //   this.$http.get(url, { params: {} }).then(res => {
    //     if (res.data.result) {
    //       this.allTypelist = res.data.data;
    //       // this.typeSmallList = res.data.data[type];

    //     } else {
    //     }
    //   });
    // },
    add(type, id) {
      this.parentid1 = id;
      this.type = type;
      this.dialogdata = {};
      if (this.type == 1) {
        this.dialogVisible = true;
        this.title = "新增检查库";
      } else if (this.type == 2) {
        this.dialogVisible2 = true;
        this.title = "新增大项";
      } else if (this.type == 3) {
        this.dialogVisible3 = true;
        this.title = "新增小项";
      }
    },
    editSave(formName) {
      let url;
      let qs = require("qs");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.isloading = true;

          if (this.type == 1) {
            this.dialogdata.sn = this.$store.state.userInfo.headquartersSn;
            this.dialogdata.parentId = 0;
            this.dialogdata.level = 1;
          } else if (this.type == 2) {
            this.dialogdata.sn = this.$store.state.userInfo.headquartersSn;
            this.dialogdata.parentId = this.parentid1;
            this.dialogdata.level = 2;
          } else if (this.type == 3) {
            this.dialogdata.dangerTypeId = this.parentid;
            // this.dialogdata.level = 1;
            this.dialogdata.priorityName =
              this.levelList[this.dialogdata.level - 1];
          }
          if (this.type == 1 || this.type == 2) {
            if (this.title.indexOf("编辑") != -1) {
              delete this.dialogdata.createTime;
              editSafeDangerTypeRecordApi(this.dialogdata).then((res) => {
                // this.isloading = false;
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                this.dialogVisible3 = false;
                this.loadList("unfold");
                this.$message.success("更新成功！");
              });
            } else {
              addSafeDangerTypeRecordApi(this.dialogdata).then((res) => {
                this.isloading = false;
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                this.dialogVisible3 = false;
                this.loadList("unfold");
                this.$message.success("添加成功！");
              });
            }
          } else {
            if (this.title.indexOf("编辑") != -1) {
              editSafeDangerItemRecordApi(this.dialogdata).then((res) => {
                this.isloading = false;
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                this.dialogVisible3 = false;
                this.loadRigthtList();
                this.$message.success("更新成功！");
              });
            } else {
              addSafeDangerItemRecordApi(this.dialogdata).then((res) => {
                this.isloading = false;
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                this.dialogVisible3 = false;
                this.loadRigthtList();
                this.$message.success("添加成功！");
              });
            }
          }
        } 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"];
      }
      if (this.type == 1) {
        this.dialogVisible = true;
        this.title = "编辑检查库";
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      } else if (this.type == 2) {
        this.dialogVisible2 = true;
        this.title = "编辑大项";
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      } else if (this.type == 3) {
        this.dialogVisible3 = true;
        this.title = "编辑小项";
        this.$nextTick(() => {
          this.$refs.form2.clearValidate();
        });
      }
      this.dialogdata = {
        ...data,
        dangerName: data.name,
      };
    },
    delSave1() {
      if (this.type == 3) {
        delSafeDangerItemRecordApi({ id: this.editId }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.loadList("unfold");
            this.loadRigthtList();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
          this.dialogVisible1 = false;
        });
      } else {
        delSafeDangerTypeRecordApi({ id: this.editId }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.loadList("unfold");
            this.loadRigthtList();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
          this.dialogVisible1 = false;
        });
      }

      // this.dialogVisible1 = false;
      // this.$message({
      //   message: "删除成功",
      //   type: "success",
      // });
      // return;

      // let url = "http://47.104.132.250:9000/itbgpv2/inspect/option/delete";

      // this.$http.get(url, { params: { id: this.editId } }).then((res) => {
      //   if (res.data.result) {
      //     this.dialogVisible1 = false;
      //     this.$message({
      //       message: res.data.message,
      //       type: "error",
      //     });
      //     this.loadList();
      //   } else {
      //     this.$message({
      //       message: res.data.message,
      //       type: "error",
      //     });
      //   }
      // });
    },
    del1(id, type) {
      console.log("当前点击的id", id, "类型", type);
      this.type = type;
      this.title = "删除";
      this.editId = id;
      this.dialogVisible1 = true;
    },
    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) {
      console.log(data);
    },
    next2(item) {
      this.secondId = item.id;
      this.loadRigthtList();
    },
    next(index, $event, data, type) {
      console.log("data", data);
      this.currentTwo = -1;
      //
      if (this.current != index) {
        this.threeIndex = -1;
      }

      this.threeData = [];
      this.type = type;
      this.parentid1 = data.id;
      if (this.current == index || data.currentRight == data.id) {
        this.current = -1;
        data.currentRight = -1;
      } else {
        this.current = index;
        data.currentRight = data.id;
      }
    },
    loadList(type) {
      let param = {
        sn: this.$store.state.userInfo.headquartersSn,
        projectClassify: this.riskListForm.projectClassify,
        name: this.riskListForm.name,

        // projectstage: ""
      };
      // this.loading=this.$loading({
      //   lock: true,
      //   text: "加载中",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)"
      // });
      // getSafeCompanyDangerTypeRecordApi
      getTopProjectClassifyTypeRecordTreePageApi(param).then((res) => {
        this.dataList = res.result.map((item) => {
          if (item.children.length > 0) {
            item.children = item.children.map((ele) => {
              this.$set(ele, "currentRight", -1);
              return {
                ...ele,
              };
            });
          }
          this.$set(item, "currentRight", -1);
          return {
            ...item,
          };
        });
        if (type == "unfold") {
          this.$nextTick(() => {
            this.setCheckedNodes();
          });
        }
        // if(res.result.length>0){

        // }
      });
    },
    loadRigthtList() {
      let param = {
        dangerTypeId: this.secondId,
        // projectstage: ""
      };
      // this.loading=this.$loading({
      //   lock: true,
      //   text: "加载中",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)"
      // });
      getSafeCompanyDangerItemRecordApi(param).then((res) => {
        this.threeData = res.result;
        // if(res.result.length>0){

        // }
      });
    },
    close() {
      this.dialogdata = {};
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
      this.$nextTick(() => {
        this.$refs.form2.clearValidate();
      });
    },
  },
};
</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;
  }
}

// .el-button--small,
// .el-button--small.is-round {
//   padding: 6px 9px;
// }
// .el-button--text {
//   color: #409eff;
//   background: 0 0;
//   padding-left: 0;
//   padding-right: 0;
//   padding-top: 0px;
//   font-size: 16px;
// }
// h1 {
//   line-height: 22px;
//   background-image: linear-gradient(
//     180deg,
//     rgba(190, 229, 255, 0.35) 0%,
//     rgba(81, 129, 246, 0.35) 100%
//   );
//   padding: 10px 10px 10px 15px;
//   font-weight: bolder;
//   font-size: 15px;
//   letter-spacing: 1px;
// }
.block {
  overflow: hidden;
  // min-height: 660px;
  // padding: 15px 20px;
  // height: calc(100% + 50px);
  background-color: #f3f5fd;
  .system-left {
    float: left;
    width: 330px;
    padding: 20px 15px;
    // min-height: 620px;
    // margin-left: 1.5%;
    height: calc(100% - 40px);
    // border: 1px solid #e9e9e9;
    background-color: white;
    .el-form {
      padding-top: 10px;
      .el-form-item {
        margin-bottom: 20px;
      }
    }
    .treeList {
      background-color: rgba(216, 216, 216, 0.2);
      height: calc(100% - 42px - 90px - 32px) !important;
    }
    li {
      cursor: pointer;
      font-size: 16px;
      line-height: 32px;
      letter-spacing: 1px;
      font-weight: bold;
      .clickName {
        // width: calc(100% - 145px);
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .imgbox {
          display: inline-block;
          margin: 0 6px 0 13px;
          color: black;
          font-size: 14px;
          opacity: 0.5;
        }
      }
    }
    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: 30px;
        font-weight: normal;
      }
    }
    .child1 {
      > li {
        padding-left: 10px !important;
        display: flex;
        justify-content: space-between;
      }
    }
    #child2 {
      li {
        font-size: 15px;
        padding-left: 44px;
        font-weight: normal;
      }
    }

    // .add:hover {
    //   background: white;
    // }
    // }
  }

  .system-right {
    float: right;
    // margin-right: 1.5%;
    margin-left: 20px;
    width: calc(100% - 360px - 20px - 30px);
    // min-height: 620px;
    height: calc(100% - 40px);
    // border: 1px solid #e9e9e9;
    background-color: white;
    padding: 20px 15px;
    .pageSubTitle {
      display: flex;
      justify-content: space-between;
      > div {
        display: flex;
        align-items: center;
        /deep/ .el-upload {
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
