<template>
  <basic-container ref="container" style="height:100%;">
    <el-row>
      <el-col :span="24">

        <div class="h-100p flex flex-d-c ov-hidden">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="竣工档案目录" name="first">
            </el-tab-pane>
            <el-tab-pane label="文书档案目录" name="second">
            </el-tab-pane>
          </el-tabs>
          <div style="height:100%">
            <!-- <h2>归档目录树</h2> -->
            <div class="flex ">
              <el-input placeholder="输入关键字进行过滤" clearable v-model="filterText">
              </el-input>
              <el-button type="primary" @click="searchClick" :loading="searchLoading">搜索</el-button>
            </div>
            <div style="height:100%;overflow-y: auto;" class="scrollClass ">
              <el-scrollbar style="height:75%">
                <el-tree style="box-sizing: border-box;" v-show="!filterText" ref="trees1" :props="props"
                  :load="loadNode" node-key="id" :default-expanded-keys="defaultExpandedKeys"
                  :current-node-key="curreenttid" @node-click="nodeClick" lazy>
                  <span class="custom-tree-node flexStar" style="flex: 1;width: 100%;justify-content: flex-start;"
                    :class="data.moreShow ? 'show' : ''" slot-scope="{ node, data }" @mouseover="mouseOver(data)"
                    @mouseleave="mouseLeave(data)">

                    {{ data.title }}


                    <span class="marleft10" v-show="data.moreShow">
                      <div class="normal-black ">
                        <div>
                          <el-link :underline="false">
                            <el-tooltip placement="right" effect="light">
                              <div slot="content">
                                <ul class="contextmenu">
                                  <li v-for="item in menusData" :key="item"
                                    @click="menuClick($event, item, data, node)">
                                    <i :class="item.icon"></i>
                                    <span>{{ item.label }}</span>
                                  </li>
                                </ul>
                              </div>
                              <i class="el-icon-menu " v-if="node.level != 1"></i>
                            </el-tooltip>
                            <i class="el-icon-refresh" @click="synctree(data, node)" v-if="node.level == 1"></i>
                          </el-link>
                        </div>
                      </div>
                    </span>
                  </span>
                </el-tree>

                <el-tree v-loading="searchLoading" v-show="isShowSearch" :props="props" :data="data" node-key="id"
                  ref="trees2" :default-expand-all="true" :filter-node-method="filterNode"
                  :default-expanded-keys="defaultExpandedKeys" :current-node-key="curreenttid" @node-click="nodeClick">

                  <span class="custom-tree-node flexStar" style="flex: 1;width: 100%;justify-content: flex-start;"
                    :class="data.moreShow ? 'show' : ''" slot-scope="{ node, data }" @mouseover="mouseOver(data)"
                    @mouseleave="mouseLeave(data)">
                    {{ data.title }}

                    <span class="marleft10" v-show="data.moreShow">
                      <div class="normal-black ">
                        <div>
                          <el-link :underline="false">
                            <el-tooltip placement="right" effect="light" :manual="true">
                              <div slot="content">
                                <ul class="contextmenu">
                                  <li v-for="item in menusData" :key="item"
                                    @click="menuClick($event, item, data, node)">
                                    <i :class="item.icon"></i>
                                    <span>{{ item.label }}</span>
                                  </li>
                                </ul>
                              </div>
                              <i class="el-icon-menu " v-if="node.level != 1"></i>
                            </el-tooltip>
                            <i class="el-icon-refresh" @click="synctree(data, node)" v-if="node.level == 1"></i>
                          </el-link>
                        </div>
                      </div>
                    </span>
                  </span>
                </el-tree>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 新增编辑 -->
    <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="treeTap" width="700px" :modal-append-to-body="false" top="10vh" @closed="treeClose">
      <div>
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="节点名称" prop="nodeName">
            <el-input v-model="form.nodeName" style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item label="岗位类型" prop="postType">
            <el-select v-model="form.postType" placeholder="请选择岗位" style="width:400px;">
              <el-option v-for="item in JobTypeList" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="节点类型" prop="nodeType">
            <el-select v-model="form.nodeType" placeholder="请选择节点" style="width:400px;">
              <el-option v-for="item in nodeTypeList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工程类型" prop="projectType">
            <el-select v-model="form.projectType" placeholder="工程类型" style="width:400px;">
              <el-option v-for="item in projectTypeList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="并卷规则" prop="archiveAutoType">
            <el-select v-model="form.archiveAutoType" placeholder="工程类型" style="width:400px;">
              <el-option v-for="item in ruleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="储存类型" prop="storageType" v-if="form.nodeType == 1">
            <el-select v-model="form.storageType" style="width:400px;" placeholder="请选择">
              <el-option v-for="item in storageTypeList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <template v-if="form.nodeType == 2">
            <el-form-item label="是否存储节点" prop="isStorageNode">
              <el-select v-model="form.isStorageNode" style="width:400px;">
                <el-option v-for="item in storageNodeList" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <template v-if="form.isStorageNode == 1">
              <el-form-item label="保管期限" prop="storageTime">
                <el-select v-model="form.storageTime" style="width:400px;">
                  <el-option v-for="item in timeList" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="储存类型" prop="storageType">
                <el-select v-model="form.storageType" style="width:400px;" placeholder="请选择">
                  <el-option v-for="item in storageTypeList" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="是否接口节点" prop="isInterfaceNode">
                <el-select v-model="form.isInterfaceNode" style="width:400px;">
                  <el-option v-for="item in interfaceNodeList" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <template v-if="form.isInterfaceNode == 1">
                <el-form-item label="选择接口类型">
                  <el-select v-model="form.interfaceType" style="width:400px;">
                    <el-option v-for="item in interfaceTypeList" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </template>
          </template>
          <!-- 数字化文件上传 -->
          <template v-if="form.nodeType == 1">
            <el-form-item label="关联类型" prop="associationType">
              <el-select v-model="form.associationType" style="width:400px;" placeholder="请选择">
                <el-option v-for="item in associationTypeList" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <template v-if="form.associationType == 1">
              <el-form-item label="业内资料类型" prop="majorDataType">
                <el-checkbox-group v-model="form.majorDataType">
                  <el-checkbox v-for="item in majorDataTypeList" :key="item.dictKey" :label="item.dictKey"
                    name="type">{{ item.dictValue }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="显示层级" prop="displayHierarchy">
                <el-select v-model="form.displayHierarchy" style="width:400px;" placeholder="请选择">
                  <el-option v-for="item in displayHierarchyList" :key="item.dictKey" :label="item.dictValue"
                    :value="item.dictKey"></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-if="form.associationType == 2">
              <el-form-item label="试验文件类型" prop="expDataTypes">
                <el-checkbox-group v-model="form.expDataTypes">
                  <el-checkbox v-for="item in contractTrialTypes" :key="item.dictKey" :label="item.dictKey">{{
                    item.dictValue }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </template>
            <template v-if="form.associationType == 6">
              <el-form-item label="日志文件类型" prop="contractLogTypes">
                <el-checkbox-group v-model="form.contractLogTypes">
                  <el-checkbox v-for="item in contractLogTypes" :key="item.dictKey" :label="item.dictKey">{{
                    item.dictValue }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </template>
          </template>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="treeClose">取 消</el-button>
        <el-button type="primary" :loading="saveBtnLoading" @click="saveTree">保 存</el-button>
      </span>
    </el-dialog>

    <!-- 右侧树 -->


    <!-- wbs树排序弹框 -->
    <el-dialog title="调整排序" :visible="sortTag" width="50%" append-to-body>
      <ManualSorting v-if="sortTag2" @bianhua='bianhua()' :sort='sort' />
      <span slot="footer" class="dialog-footer">
        <el-button @click="sortTag = false, sortTag2 = false">取 消</el-button>
        <el-button type="primary" @click="editSort()">确 定</el-button>
      </span>
    </el-dialog>



  </basic-container>
</template>

<script>
import ManualSorting from '@/components/WbsTree/ManualSorting'
import { archiveTreeInit, lazyTree, dictionary, remove, archiveTreeSave, archiveTreeUpdate, archiveTreeDetail, archiveTreetree, submitDisplayConfigTree, getSameGradeNode, submitArchiveTreeSort, syncProjectTree, saveArchiveAutoRule, getArchiveAutoRule, updateArchiveAutoRule, removeArchiveAutoRule } from "@/api/manager/archivetree";
import { getWbsList } from "@/api/manager/wbsinfo";
import { getToken } from '@/util/auth';
import { roletree } from "@/api/system/role.js";
import { getDictionaryBiz } from "@/api/other";
// import logoVue from '../../page/index/logo.vue';
import { getStore, setStore } from "@/util/store";
export default {
  components: {
    ManualSorting,
  },
  data() {
    return {
      publictreeoptions: [],
      publictreevalue: '',
      testtreeoptions: [],
      testtreevalue: '',
      activeName: 'second',
      activetabName: 'second',
      configactiveName: 'second',
      isentryTree: true,
      checkList: [],
      //#region 左侧树
      defaultExpanded: [],//默认选中的节点
      filterText: '',//筛选条件
      searchLoading: false,
      isShowSearch: false,//是否显示搜索框

      treeNode: {},
      treeParent: {},
      nodeNames: '',
      token: '',
      props: {
        label: 'title',
        children: 'children',
        isLeaf: 'hasChildren'
      },
      data: [],//树节点枚举值
      //#endregion

      //#region 新增编辑节点弹框
      treeTap: false,
      saveBtnLoading: false,
      form: {
        id: '',//新增还是编辑
        parentId: '',  //上级节点id
        nodeName: "",  //节点名称
        nodeType: '',  // 节点类型  2 = 数字化上传文件
        postType: '',  //岗位类型
        isStorageNode: '',  //是否为存储节点
        // isBuiltDrawing: '',  //竣工图
        isInterfaceNode: '',  //是否接口节点
        interfaceType: '',  //选择接口类型
        associationType: '',  //关联类型
        majorDataType: [],  //内业资料类型
        displayHierarchy: '',  //显示层级

        projectType: '',//工程类型
        storageType: '',//储存类型
        expDataTypes: [],//文件类型
        contractLogTypes: [],
        storageTime: '',
        archiveAutoType: '',//并卷规则
      },
      rules: {
        nodeName: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
        postType: [{ required: true, message: '请选择岗位类型', trigger: 'change' }],
        nodeType: [{ required: true, message: '请选择节点类型', trigger: 'change' }],
        isStorageNode: [{ required: true, message: '请选择存储节点', trigger: 'change' }],
        // isBuiltDrawing: [{ required: true, message: '请选择竣工图', trigger: 'change' }],
        isInterfaceNode: [{ required: true, message: '请选择接口节点', trigger: 'change' }],
        interfaceType: [{ required: true, message: '请选择接口类型', trigger: 'change' }],
        associationType: [{ required: true, message: '请选择关联类型', trigger: 'change' }],
        majorDataType: [{ required: true, message: '请选择业内资料类型', trigger: 'change' }],
        displayHierarchy: [{ required: true, message: '请选择显示层级', trigger: 'change' }],
        projectType: [{ required: true, message: '请选择工程类型', trigger: 'change' }],
        storageType: [{ required: true, message: '请选择储存类型', trigger: 'change' }],
        expDataTypes: [{ required: true, message: '请选择文件类型', trigger: 'change' }],
        contractLogType: [{ required: true, message: '请选择业内资料类型', trigger: 'change' }],
      },
      JobTypeList: [],//岗位类型枚举
      nodeTypeList: [
        {
          label: '关联电子原生文件',
          value: 1
        }, {
          label: '数字化上传文件',
          value: 2
        },
      ],//节点类型枚举
      projectTypeList: [
        {
          label: '水利水电工程',
          value: 1
        }, {
          label: '公路工程',
          value: 2
        }, {
          label: '全部',
          value: 3
        },
      ],//工程类型枚举
      storageTypeList: [
        {
          label: '普通',
          value: 1
        }, {
          label: '竣工图',
          value: 2
        }, {
          label: '计量',
          value: 3
        }, {
          label: '质检',
          value: 4
        }, {
          label: '声像',
          value: 5
        }, {
          label: '隐蔽',
          value: 6
        }, {
          label: '原材试验',
          value: 7
        }, {
          label: '管理文件',
          value: 8
        }, {
          label: '变更令',
          value: 9
        },
      ],
      ruleList: [
        {
          label: '单独组卷',
          value: 1
        }, {
          label: '分类并卷',
          value: 2
        },
        {
          label: '最高组卷',
          value: 3
        },
      ],
      timeList: [
        { label: '永久', value: '3' },
        { label: '30年', value: '2' },
        { label: '10年', value: '1' },
      ],
      //储存类型枚举
      storageNodeList: [{
        label: '是',
        value: 1
      }, {
        label: '否',
        value: 2
      },],//存储节点枚举
      builtDrawingList: [{
        label: '是',
        value: 1
      }, {
        label: '否',
        value: 2
      },],//竣工图枚举
      interfaceNodeList: [{
        label: '是',
        value: 1
      }, {
        label: '否',
        value: 2
      },],//接口节点枚举
      interfaceTypeList: [
        {
          label: '试验接口',
          value: 1
        }, {
          label: '计量接口',
          value: 2
        },
      ],//选择接口类型枚举
      associationTypeList: [{
        label: '质检资料',
        value: 1
      },
      {
        label: '试验资料',
        value: 2
      },
      {
        label: '影像资料',
        value: 3
      },
      {
        label: '台账资料',
        value: 4
      }, {
        label: '首件资料',
        value: 5
      }, {
        label: '日志文件',
        value: 6
      },
      ],//

      fileTypeList: [
        {
          label: '配合比',
          value: 1
        },
        {
          label: '原材',
          value: 2
        }, {
          label: '汇总',
          value: 3
        }, {
          label: '设备',
          value: 4
        }, {
          label: '外委(第三方)',
          value: 5
        },
      ],

      majorDataTypeList: [],//
      displayHierarchyList: [],//
      //#endregion

      //#region 右侧树节点
      pushfileTap: false,//开关
      Rightprops: {
        label: 'title'
      },
      rightData: [],
      rightTreeLoading: false,//右侧树加载
      //#endregion

      //#region 右侧树弹框
      dialogProps: {
        label: 'title'
      },
      dialogData: [],
      checkXuan: [],
      //#endregion
      heights: '',

      sortTag2: false,
      sortTag: false,
      sort: [],
      ruledata: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      ruledefaultProps: {
        children: 'children',
        label: 'label'
      },
      highVisible: false,
      configVisible: false,

      projectId: '',
      archiveAutoType: '',//最高1  分类2  独立3
      nodesList: [],

      configInfo: null,
      checkedKeys: [],//分类并卷 回显 勾选数组

      treeSelectId: '',//选中的划分树
      tooltipVisible: false,
      menusData: [
        { icon: 'el-icon-plus', label: '新增', key: "add" },
        { icon: 'el-icon-s-promotion', label: '编辑', key: "edit" },
        { icon: 'el-icon-sort', label: '排序', key: "sort" },

        { icon: 'el-icon-delete', label: '删除', key: "del" },
        { icon: 'el-icon-refresh', label: '同步', key: "sync" },

      ],//树组件操作菜单
      menuVisible: false,
      menuleft: 20,
      menutop: 0,
      defaultExpandedKeys: [],
      defaultExpandedKeys1: [],
      expandName: this.$route.fullPath,
      curreenttid: '',
      curreenttid1: '',
      contractLogTypes: [],
      contractTrialTypes: []
    }
  },
  computed: {

  },
  methods: {
    //切换tabs
    handleClick(tab, event) {
      console.log(tab, event);

    },
    handletabClick(tab, event) {
      console.log(tab, event);
    },
    confighandleClick(tab, event) {
      console.log(tab, event);
    },
    paixuMD(data) {
      this.sortTag = true
      this.sortTag2 = true
      this.curTreeData = data;
      this.findWbsTreeSameLevel(data.id)
    },
    async findWbsTreeSameLevel(parentId) {//查询当前节点的同级节点
      const { data: res } = await getSameGradeNode({ id: parentId })
      //console.log(res);
      if (res.code === 200) {
        this.sort = res.data
      }
    },
    bianhua() {
      this.sortTag2 = false
      this.$nextTick(() => {
        this.sortTag2 = true
      })
    },
    editSort() {//修改排序
      let sortArr = this.sort, newArr = []
      for (let i = 0; i < sortArr.length; i++) {
        newArr.push({
          id: sortArr[i].id,
          nodeName: sortArr[i].nodeName
        })
      }
      this.wbsTreeSort(newArr)
    },
    async wbsTreeSort(newArr) {//修改排序
      const { data: res } = await submitArchiveTreeSort(newArr)
      //console.log(res);
      if (res.code == 200) {
        this.sortTag = false
        this.sortTag2 = false
        //刷新页面
        window.location.reload()
      }
    },
    //#region 左侧树方法
    async loadNode(node, resolve) {
      console.log(node);
      if (node.level === 0) {
        let ks = await this.lazyTree(0)
        if (ks.length) {
          resolve(ks)
        } else {
          this.archiveTreeInit()
        }
      } else {
        resolve(await this.lazyTree(node.data.id))
      }
    },
    async archiveTreeInit() {//添加根节点
      const { data: res } = await archiveTreeInit({

        projectId: this.projectId//项目id
      })
      console.log(res);
      if (res.code == 200 && res.msg == '操作成功') {
        res.data.forEach(val => {
          val.hasChildren = !val.hasChildren
        });
        return res.data
      } else if (res.code == 200 && res.msg == "未查询到信息") {
        return []
      }
    },
    async lazyTree(parentId) {//树节点懒加载
      const { data: res } = await lazyTree({
        parentId,
        // token: this.token,
        projectId: this.projectId
      })
      console.log(res);
      if (res.code == 200 && res.msg == '操作成功') {
        res.data.forEach(val => {
          val.hasChildren = !val.hasChildren
        });
        return res.data
      } else if (res.code == 200 && res.msg == "未查询到信息") {
        return []
      }
    },
    mouseLeave(data) {
      if (data.moreShow) {
        this.$set(data, 'moreShow', false)
        // this.menuVisible=false
      }
    },
    mouseOver(data) {
      if (!data.moreShow) {
        this.$set(data, 'moreShow', true)
      }
    },
    //获取节点展开路径
    getExpandedKeys(node) {
      //console.log(node)
      let expandedKeys = [];
      while (node.parent) {
        expandedKeys.push(node.data.id);
        node = node.parent;
      }
      setStore({
        name: this.expandName,
        content: expandedKeys,
        type: true, //sessionStorage
      });
      //console.log(expandedKeys)
    },
    getExpandedKeys1(node) {
      //console.log(node)
      let expandedKeys = [];
      while (node.parent) {
        expandedKeys.push(node.data.id);
        node = node.parent;
      }
      setStore({
        name: 'configkey',
        content: expandedKeys,
        type: true, //sessionStorage
      });
      //console.log(expandedKeys)
    },
    nodeClick(data, node) {
      //获取节点展开路径
      this.getExpandedKeys(node);
      setStore({
        name: 'curreenttid',
        content: data.id,
        type: true, //sessionStorage
      });
    },
    addTree(data, node) {//添加树
      console.log(data);
      if (this.JobTypeList.length == 0) {
        this.roletree()
      }
      if (this.majorDataTypeList.length == 0) {
        this.major_data_type()//内业资料类型
      }
      if (this.displayHierarchyList.length == 0) {
        this.display_hierarchy()//显示层级
      }
      this.form.postType = data.postType

      this.form.id = ''
      this.form.parentId = data.id
      if (this.filterText) {
        this.defaultExpanded = [data.id]
      }
      this.form.contractLogTypes = []
      this.form.expDataTypes = []
      this.form.archiveAutoType = 1
      this.form.storageTime = '3'
      this.treeTap = true
    },
    async editTree(data, node) {//编辑树
      if (this.JobTypeList.length == 0) {
        this.roletree()
      }
      if (this.majorDataTypeList.length == 0) {
        this.major_data_type()//内业资料类型
      }
      if (this.displayHierarchyList.length == 0) {
        this.display_hierarchy()//显示层级
      }
      await this.archiveTreeDetail(data)
      this.form.id = data.id
      this.form.parentId = ''
      this.treeNode = data
      this.treeParent = node.parent.data
      this.treeTap = true
    },
    deleteTree(node) {//删除树
      let _that = this
      this.$confirm('是否删除此数据', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.remove(node.id).then(() => {
            _that.$refs.trees1.remove(node) //删除界面上的节点
            if (this.filterText) {
              this.archiveTreetree4()//全加载左侧树
            }
          }).catch(() => {

          })

        })
        .catch(() => {

        });
    },
    async remove(id) {//删除接口
      const { data: res } = await remove({ id })
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }
    },
    async archiveTreeDetail(data) {//详情接口
      console.log(data);
      const { data: res } = await archiveTreeDetail({ id: data.id })
      console.log(res.data.archiveAutoType, 'archiveAutoType');
      if (res.code == 200) {
        this.form.nodeName = res.data.fullName  //节点名称
        this.form.nodeType = res.data.nodeType   // 节点类型  2 = 数字化上传文件
        this.form.postType = res.data.postType   //岗位类型
        this.form.isStorageNode = res.data.isStorageNode   //是否为存储节点
        // this.form.isBuiltDrawing = res.data.isBuiltDrawing   //竣工图
        this.form.isInterfaceNode = res.data.isInterfaceNode   //是否接口节点
        this.form.interfaceType = res.data.interfaceType   //选择接口类型
        this.form.associationType = res.data.associationType   //关联类型
        // this.form.majorDataType = res.data.majorDataType.split(',')   //内业资料类型
        this.form.displayHierarchy = res.data.displayHierarchy   //显示层级

        this.form.projectType = res.data.projectType   //工程类型
        this.form.storageType = res.data.storageType   //储存类型
        this.form.archiveAutoType = res.data.archiveAutoType   //最高1  分类2  独立3
        this.form.storageTime = res.data.storageTime

        if (res.data.contractTrialType) {
          this.form.expDataTypes = res.data.contractTrialType.split(',')   //文件类型
        } else {
          this.form.expDataTypes = [];
        }
        if (res.data.majorDataType) {
          this.form.majorDataType = res.data.majorDataType.split(',')   //文件类型
        } else {
          this.form.majorDataType = [];
        }
        //日志类型
        let str
        if (res.data.contractLogType) {
          str = res.data.contractLogType
        } else {
          str = ''
        }
        this.form.contractLogTypes = str.split(',')
      }
    },
    async archiveTreetree4() {//全加载左侧树
      const { data: res } = await archiveTreetree({
        // token: this.token,
        projectId: this.projectId
      })
      console.log(res);
      if (res.code == 200 && res.msg == "操作成功") {
        this.data = res.data
      }
    },
    filterNode(value, data, node) {//筛选条件
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },


    //#endregion

    //#region 新增编辑节点弹框
    treeClose() {//弹框关闭事件
      this.treeTap = false
      this.form = {
        parentId: '',  //上级节点id
        nodeName: "",  //节点名称
        nodeType: '',  // 节点类型  2 = 数字化上传文件
        postType: '',  //岗位类型
        isStorageNode: '',  //是否为存储节点
        // isBuiltDrawing: '',  //竣工图
        isInterfaceNode: '',  //是否接口节点
        interfaceType: '',  //选择接口类型
        associationType: '',  //关联类型
        majorDataType: [],  //内业资料类型
        displayHierarchy: '',  //显示层级

        projectType: '',//工程类型
        storageType: '',//储存类型
        expDataTypes: [],//文件类型
        contractLogTypes: [],
        archiveAutoType: '',//最高1  分类2  独立3
        storageTime: '',//储存时间

      }
      this.$refs.form.resetFields();
      this.form.id = ''      
    },
    async roletree() {//岗位类型枚举
      const { data: res } = await roletree()
      console.log(res);
      if (res.code == 200) {
        this.JobTypeList = res.data
      }
    },
    async major_data_type() {//内业资料类型
      const { data: res } = await dictionary({ code: 'major_data_type' })
      console.log(res);
      if (res.code == 200) {
        this.majorDataTypeList = res.data.filter(item => item.dictKey !== '0');
      }
    },
    async display_hierarchy() {//显示层级
      const { data: res } = await dictionary({ code: 'display_hierarchy' })
      console.log(res);
      if (res.code == 200) {
        this.displayHierarchyList = res.data
      }
    },
    async saveTree() {//保存按钮
      console.log(this.form.postType, 'this.form.postType');
      if (this.treeParent.postType && this.treeParent.postType !== this.form.postType) {
        this.$message.warning('岗位类型必须和父级节点岗位类型一致')
      } else {
        const isValid = await this.$refs.form.validate()
        if (!isValid) {
          return false
        }
        this.$refs.form.validate(async val => {
          if (val) {
            this.saveBtnLoading = true
            if (this.form.nodeType == 2) {
              if (this.form.isStorageNode == 1) {
                if (this.form.isInterfaceNode == 1) {
                  await this.save({
                    id: this.form.id,
                    parentId: this.form.parentId, //上级节点id
                    nodeName: this.form.nodeName,  //节点名称
                    nodeType: this.form.nodeType,  // 节点类型
                    postType: this.form.postType,  //岗位类型
                    isStorageNode: this.form.isStorageNode,  //是否为存储节点
                    // isBuiltDrawing: this.form.isBuiltDrawing,  //竣工图
                    isInterfaceNode: this.form.isInterfaceNode,  //是否接口节点
                    interfaceType: this.form.interfaceType,  //选择接口类型

                    projectType: this.form.projectType, //工程类型
                    storageType: this.form.storageType, //储存类型
                    projectId: this.projectId,//项目id
                    archiveAutoType: this.form.archiveAutoType,//并卷规则
                    storageTime: this.form.storageTime,//存储时间
                  })
                } else {
                  await this.save({
                    id: this.form.id,
                    parentId: this.form.parentId, //上级节点id
                    nodeName: this.form.nodeName,  //节点名称
                    nodeType: this.form.nodeType,  // 节点类型
                    postType: this.form.postType,  //岗位类型
                    isStorageNode: this.form.isStorageNode,  //是否为存储节点
                    // isBuiltDrawing: this.form.isBuiltDrawing,  //竣工图
                    isInterfaceNode: this.form.isInterfaceNode,  //是否接口节点

                    projectType: this.form.projectType, //工程类型
                    storageType: this.form.storageType, //储存类型
                    projectId: this.projectId,//项目id
                    archiveAutoType: this.form.archiveAutoType,//并卷规则
                    storageTime: this.form.storageTime,//存储时间
                  })
                }
              } else {
                await this.save({
                  id: this.form.id,
                  parentId: this.form.parentId, //上级节点id
                  nodeName: this.form.nodeName,  //节点名称
                  nodeType: this.form.nodeType,  // 节点类型
                  postType: this.form.postType,  //岗位类型
                  isStorageNode: this.form.isStorageNode,  //是否为存储节点

                  projectType: this.form.projectType, //工程类型
                  projectId: this.projectId,//项目id
                  archiveAutoType: this.form.archiveAutoType,//并卷规则
                  storageTime: this.form.storageTime,//存储时间

                })
              }
            } else if (this.form.nodeType == 1) {
              if (this.form.associationType == 1) {
                await this.save({
                  id: this.form.id,
                  parentId: this.form.parentId, //上级节点id
                  nodeName: this.form.nodeName,  //节点名称
                  nodeType: this.form.nodeType,  // 节点类型
                  postType: this.form.postType,  //岗位类型
                  associationType: this.form.associationType,  //关联类型
                  majorDataType: this.form.majorDataType, //内业资料类型
                  displayHierarchy: this.form.displayHierarchy,  //显示层级

                  projectType: this.form.projectType, //工程类型
                  storageType: this.form.storageType, //储存类型
                  projectId: this.projectId,//项目id
                  archiveAutoType: this.form.archiveAutoType,//并卷规则
                  storageTime: this.form.storageTime,//存储时间
                })
              } else if (this.form.associationType == 2) {
                //试验资料
                await this.save({
                  id: this.form.id,
                  parentId: this.form.parentId, //上级节点id
                  nodeName: this.form.nodeName,  //节点名称
                  nodeType: this.form.nodeType,  // 节点类型
                  postType: this.form.postType,  //岗位类型
                  associationType: this.form.associationType,  //关联类型
                  contractTrialType: this.form.expDataTypes.join(','),//文件类型
                  projectType: this.form.projectType, //工程类型
                  storageType: this.form.storageType, //储存类型
                  projectId: this.projectId,//项目id
                  contractLogType: this.form.contractLogTypes.join(','),
                  archiveAutoType: this.form.archiveAutoType,//并卷规则
                  storageTime: this.form.storageTime,//存储时间
                })
              } else {
                await this.save({
                  id: this.form.id,
                  parentId: this.form.parentId, //上级节点id
                  nodeName: this.form.nodeName,  //节点名称
                  nodeType: this.form.nodeType,  // 节点类型
                  postType: this.form.postType,  //岗位类型
                  associationType: this.form.associationType,  //关联类型
                  projectType: this.form.projectType, //工程类型
                  storageType: this.form.storageType, //储存类型
                  projectId: this.projectId,//项目id
                  contractLogType: this.form.contractLogTypes.join(','),
                  archiveAutoType: this.form.archiveAutoType,//并卷规则
                  storageTime: this.form.storageTime,//存储时间
                })
              }
            }
          }
        })

      }
    },
    async save(da) {
      if (da.majorDataType) {
        if (da.majorDataType.length > 0) {
          let das = ''
          da.majorDataType.forEach((val, key) => {
            das += val
            if (da.majorDataType.length - 1 != key) {
              das += ','
            }
          })
          da.majorDataType = das
        }
      }
      if (this.form.id) {
        await this.archiveTreeUpdate(da)
      } else {
        await this.archiveTreeSave(da)
      }
      if (this.filterText) {
        await this.archiveTreetree4()
      }
      
      this.saveBtnLoading = false
      this.treeClose()
      if (this.menuKey = 'edit') {
        //刷新页面
        window.location.reload()
      }
    },
    async archiveTreeSave(da) {//新增
      console.log(da);
      const { data: res } = await archiveTreeSave(da)
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '新增成功'
        })
        // this.treeTap = false
        let das = await this.lazyTree(da.parentId)
        this.$refs.trees1.updateKeyChildren(da.parentId, das)
        let node = this.$refs.trees1.getNode(da.parentId);
        node.isLeaf = false;
        node.isLeafByUser = false;
      }
    },
    async archiveTreeUpdate(da) {//编辑
      const { data: res } = await archiveTreeUpdate(da)
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '编辑成功'
        })
        // this.treeTap = false
        this.treeNode.title = da.nodeName
        this.treeNode.postType = da.postType
      }
    },
    //#endregion
    async getWbsList() {
      const datas = await Promise.all([
        getWbsList(1),
        getWbsList(2),
      ])
      //console.log(datas,'ressssss');
      this.publictreeoptions = datas[0].data.data;
      this.testtreeoptions = datas[1].data.data;
    },
    synctree(data) {
      this.$confirm('是否同步该节点?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        syncProjectTree({
          id: data.id
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg)
            setTimeout(() => {
              // 刷新页面
              this.$router.go(0)
            }, 1000)
          } else {
            this.$message.warning(res.data.msg)
          }
        })
      }).catch(() => {

      });
    },

    //获取树节点名字路径
    getTreeNodePath(node, refName) {
      let nodeInfo = this.$refs[refName].getNode(node.id);
      //console.log(nodeInfo)
      let pathArr = [];
      while (nodeInfo.parent) {
        pathArr.push(nodeInfo.data.title)
        nodeInfo = nodeInfo.parent
      }
      return pathArr.reverse().join('/');
    },

    async setRecordsHandle() {
      const { data: res } = await saveArchiveAutoRule({
        archiveAutoType: this.archiveAutoType,//最高1  分类2  独立3
        selectNodeIds: this.checkList.join(','),//鼠标选择的节点ID（只要鼠标选择的节点，选择节点的下级子节点那种不要），逗号拼接
        iswbsNode: this.nodesList[0].iswbsNode,//是否是wbs节点
        projectId: this.projectId,//   系统级为0  项目级为项目id
      })

      if (res.code == 200 && res.msg == "操作成功") {
        this.$message({
          type: 'success',
          message: '设置成功'
        })
        this.archiveTreetree({
          // token: this.token,
          //disPlayTree: 1,
          //nodeType: 2,
        })
        this.highVisible = false;
      }
    },




    async removeArchive(data) {
      this.$confirm('此操作将永久删除配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeArchiveAutoRule({
          nodeId: data.id,
          iswbsNode: data.iswbsNode,//是否是wbs节点   flase 不是 true 是 （先false,具体怎么区分后面再看）
          projectId: this.projectId,//   系统级为0  项目级为项目id
        }).then((res) => {
          //console.log(res)
          if (res.data.code == 200 && res.data.msg == "操作成功") {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
          }
        })
      });
    },
    //树形控件菜单相关方法
    mouseout() {
      this.menuVisible = false
    },
    //展示菜单
    showMenu(e, data, node) {
      // e.preventDefault();
      // console.log(e,'e');
      var x = e.pageX; //这个应该是相对于整个浏览器页面的x坐标，左上角为坐标原点（0,0）
      var y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标，左上角为坐标原点（0,0）
      this.menutop = y - 70;
      this.menuleft = x;
      this.menuVisible = true

    },
    menuClick(e, item, data, node) {

      this.menuKey = ''
      //获取节点展开路径
      this.getExpandedKeys(node);
      e.preventDefault();
      if (item.key === 'add') {
        if (data.isStorageNode != 1) {
          this.addTree(data, node)
          this.menuKey = 'add'
        } else {
          this.$message.warning('该节点下不允许新增节点')
        }

      }

      else if (item.key === 'edit') {
        this.editTree(data, node)
        this.menuKey = 'edit'
      }
      else if (item.key === 'del') {
        this.menuKey = 'del'
        this.deleteTree(data, node)
      } else if (item.key === 'copy') {
        this.$message.info('暂无相关接口')
      }
      else if (item.key === 'sort') {
        this.menuKey = 'sort'
        this.paixuMD(data, node)
      }
      else if (item.key === 'sync') {
        this.menuKey = 'sync'
        this.synctree(data, node)
      }
    },
    //获取日志类型
    getContractLogType() {
      getDictionaryBiz({ code: 'contract_log_type' }).then(({ data }) => {
        if (data.code === 200) {
          this.contractLogTypes = data.data
        } else {
          this.contractLogTypes = []
        }
      })
    },
    getContractTrialType() {
      getDictionaryBiz({ code: 'contract_trial_type' }).then(({ data }) => {
        if (data.code === 200) {
          this.contractTrialTypes = data.data
        } else {
          this.contractTrialTypes = []
        }
      })
    },
    async searchClick() {
      this.searchLoading = true
      this.isShowSearch = true
      if (this.data.length > 0) {
        this.$refs.trees2.filter(this.filterText);
        this.searchLoading = false
      } else {
        this.searchLoading = true
        const { data: res } = await archiveTreetree({
          // token: this.token,
          projectId: this.projectId
        })

        if (res.code == 200 && res.msg == "操作成功") {
          this.data = res.data
          this.searchLoading = false
        }
        this.$refs.trees2.filter(this.filterText);
      }


    }
  },
  watch: {
    filterText(val) {
      console.log(val, 'val');

      // this.$refs.trees2.filter(val);
      if (!val) {
        this.isShowSearch = false
      }
    },

  },
  created() {
    this.token = 'bearer ' + getToken()

    this.projectId = this.$route.query.projectId;
    this.defaultExpandedKeys = getStore({ name: this.expandName });
    this.defaultExpandedKeys1 = getStore({ name: 'configkey' });
    this.curreenttid = getStore({ name: 'curreenttid' });
    this.curreenttid1 = getStore({ name: 'curreenttid1' });




    this.getWbsList();

    this.getContractLogType()
    this.getContractTrialType()
  },
  mounted() {
    this.heights = this.$refs.container.$el.offsetHeight;
  },


}
</script>

<style lang="scss" scoped>
.peizhi {
  // border: 1px solid #e5e5e5;
  border-radius: 5px;
  padding: 15px 10px;
}

.btnground {
  background-color: #e5e5e5;
}

.el-tree .el-tree-node__content {
  display: block !important;
}

::v-deep .el-tree .el-tree-node__children {
  overflow: visible !important;
}

.config-type-name {
  font-size: 18px;
}

.config-allname {
  margin-top: 20px;
}

.wraplabel ::v-deep .el-checkbox__label {
  display: inline-grid;
  white-space: pre-line;
  word-wrap: break-word;
  overflow: hidden;
  line-height: 20px;
}

.treeBox {

  overflow-y: auto;
  width: 100%;
  height: 650px;
  font-size: 14px;

}

.treebox .el-tree {
  display: inline-block;
  min-width: 100%;
  font-size: s;

}

.el-tooltip__popper .contextmenu {
  margin: -12px;
  /* 抵消 Tooltip 的默认内边距 */
}

.contextmenu {
  padding: 4px 0;
  /* 添加适当的内边距 */
  // min-width: 120px;
}

.contextmenu ul {
  list-style: none;
  /* 移除小圆点 */
  padding: 0;
  margin: 0;
  // min-width: 80px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}


.contextmenu li {
  padding: 8px 16px;
  line-height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}


.contextmenu li i {
  margin-right: 8px;
  font-size: 16px;
}


.contextmenu li span {
  font-size: 14px;
  color: #606266;
}


.contextmenu li:hover,
.contextmenu li.active {
  background-color: #f5f7fa;
  color: #409eff;
}


.contextmenu li.divider {
  height: 1px;
  background-color: #e4e7ed;
  margin: 4px 0;
  padding: 0;
}

.config_type {
  display: inline-block;
  background: rgb(254, 110, 34);
  color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  margin-right: 8px;
  font-size: 12px;
}
</style>
