<template>
  <el-container class="fullheight" style="border: 1px solid #eee">
    <el-aside
      :width="isShowAside ? '220px' : '0px'"
      style="
        border-right: 1px solid #eee;
        transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
      "
    >
      <div class="tree-header flex">
        <el-input placeholder="请输入" v-model="filterText" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div
          :class="
            isIeExplorer
              ? 'tree-button-group is-ie-explorer flex'
              : 'tree-button-group flex'
          "
        >
          <i
            :class="{'icon-zhankai': !isExpand, 'icon-shouqi': isExpand}"
            :title="isExpand ? '收起' : '展开'"
            @click="handleExpandCollapse"
          />
          <i
            class="icon-sync"
            :class="{'icon-spin': loading}"
            title="刷新"
            @click="refresh"
          />
        </div>
      </div>
      <el-tree
        :data="treeData"
        :props="defaultProps"
        :load="loadNode"
        :filter-node-method="filterNode"
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="defaultExpandedKeys"
        node-key="id"
        @node-click="handleNodeClick"
        accordion
        ref="tree"
        highlight-current
        style="background: #fafafa"
      >
        <span class="custom-tree-node" slot-scope="{node}">
          <div>
            <i class="el-icon-s-order icon"></i>
            <span style="padding-left: 4px">{{ node.label }}</span>
          </div>
        </span>
      </el-tree>
    </el-aside>
    <el-container style="background-color: #fff">
      <div class="shrink" @click="handleHideMenu">
        <i
          :class="isShowAside ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
        ></i>
      </div>
      <div style="width: 100%; height: 100%">
        <component
          :pid="projectId"
          :isShow="isShow"
          :alias="currentComponent"
          v-bind:is="currentComponent"
        >
        </component>
      </div>
    </el-container>
  </el-container>
</template>
<script>
import moduleRouter from '@/module_components.js'
import menuApi from '@/api/menu.js'
export default {
  name: 'ProjectFlowChart',
  components: {
    ...moduleRouter,
  },
  data() {
    return {
      isShow: false,
      currentComponent: '',
      menuTabsStyle: null,
      filterText: '', //树型搜索内容
      isIeExplorer: false, //
      isExpand: false,
      loading: false,
      treeData: [],
      defaultProps: {
        label: 'name',
        code: 'code',
        id: 'id',
        children: 'children',
        isLeaf: 'leaf', // 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
      },
      defaultCheckedKeys: [],
      defaultExpandedKeys: [],
      node: '',
      resolve: '',
      isShowAside: true, //左侧菜单默认显示
    }
  },
  mounted() {
    if (this.$route.params && this.$route.params.alias) {
      this.getInitMenus(this.$route.params)
    } else {
      this.getInitMenus()
    }
    // this.getInitMenus()
  },
  computed: {
    projectId() {
      return this.$route.params.id
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  defaultCheckedKeys(val) {
    this.$refs.tree.setCheckedKeys(val)
  },
  methods: {
    //点击节点
    handleNodeClick(data) {
      if (data.alias && data.children.length == 0) {
        // console.log(data)
        this.currentComponent = data.alias
        sessionStorage.setItem('activeAlias', JSON.stringify(data))
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data[this.defaultProps.label].indexOf(value) !== -1
    },
    loadNode(node, resolve) {},
    // 树状菜单的全部展开和收起
    handleExpandCollapse() {
      let elTree = this.$refs.tree
      for (var i = 0; i < elTree.store._getAllNodes().length; i++) {
        elTree.store._getAllNodes()[i].expanded = this.isExpand
      }
      this.isExpand = !this.isExpand
    },
    //树状刷新
    refresh() {
      this.loading = true
      this.$emit('refresh', () => {
        this.loading = false
        this.filterText = ''
        this.getInitMenus()
      })
      setTimeout(() => {
        this.loading = false
        this.filterText = ''
        this.getInitMenus()
      }, 2000)
    },
    //初始获取树状的菜单目录
    getInitMenus(params) {
      // debugger
      // console.log(params)
      this.$http
        .post(
          '${cqxy}/biz/projectManagement/projectPersonnelMenu/v1/getCurrentUserMenuByProjectId?projectId=' +
            this.projectId
        )
        .then((res) => {
          if (res.data.state) {
            console.log(res.data.value, '555555555555555555')
            // let menus = JSON.parse(sessionStorage.getItem('currentFrontMenus'))
            let menus = res.data.value
            //将菜单统计报表下的项目台账隐藏并将统计报表更名为项目台账
            menus.forEach((item, index) => {
              // console.log(item.alias, item.name)
              //隐藏菜单中的项目管理菜单
              if (item.alias == 'projectManagentSub') {
                delete menus[index]
              }
              //隐藏菜单中的年度计划菜单
              if (
                item.alias == 'AnnualPlan' ||
                item.alias == 'planningEIA' ||
                item.alias == 'fileLibrary' ||
                item.alias == 'DirectoryManagement'|| item.alias == "projectAccount"|| item.alias == "projectApprovalAccount"|| item.alias == "biddingAccount"|| item.alias == "contractAccount"|| item.alias == "investmentProgressAccount"|| item.alias == "paymentAccount"|| item.alias == "contractChangeAccount"|| item.alias == "projectInformationStatistics"|| item.alias == "userDefinedLedger"
              ) {
                delete menus[index]
              }
            })
            menus.forEach((item) => {
              if (item.alias == 'statisticalReport') {
                item.children.forEach((item1, index) => {
                  if (item1.alias == 'projectInformationStatistics') {
                    item.children.splice(index, 1)
                  }
                })
              }
            })
            let tree = menus.filter((item) => {
              return item.alias !== 'projectManagement'
            })
            let arrPcode = [
              {
                name: '项目管理',
                code: 'root',
                children: [],
                id: '0',
                isLeaf: true,
                alias: 'root',
              },
            ]
            arrPcode[0].children.push(...tree)
            this.treeData = arrPcode
            let defaultKey = this.treeData[0].children
            let cureentAlias = JSON.parse(sessionStorage.getItem('activeAlias'))
            if (cureentAlias) {
              this.defaultTable(cureentAlias)
            } else if (params) {
             let al=defaultKey.filter(item=>{
                  if(item.children.length>0){
                      item.children.forEach(item2=>{
                        if(item2.alias==params.alias){
                          return item
                        }
                      })
                  }else{
                    if(item.alias==params.alias){
                      return item
                    }
                  }
             })
             this.defaultTable(al[0])
            } else {
              for (let i in defaultKey) {
                if (i == 0) {
                  if (defaultKey[i].children.length > 0) {
                    this.defaultTable(defaultKey[i].children[i])
                  } else {
                    this.defaultTable(defaultKey[i])
                  }
                }
              }
            }
          }
        })
    },
    defaultTable(data) {
      console.log(data)
      this.defaultCheckedKeys.push(data.id)
      this.defaultExpandedKeys.push(data.id)
      this.currentComponent = data.alias
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(data.id)
      })
    },
    //隐藏目录
    handleHideMenu() {
      this.isShowAside = !this.isShowAside
    },
  },
  destroyed() {
    delete sessionStorage.removeItem('activeAlias')
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/common.scss';
.form-empty {
  position: absolute;
  text-align: center;
  width: 300px;
  font-size: 20px;
  top: 200px;
  left: 50%;
  margin-left: -150px;
  color: rgba(0, 0, 0, 0.5);
}
div.tree-header {
  min-height: 30px;
  /deep/ .el-input--small .el-input__inner {
    border: none;
  }
}
div.tree-header >>> .el-input__inner {
  border-width: 0;
  padding-right: 0;
}
div.tree-button-group i {
  cursor: pointer;
  display: inline;
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}
div.tree-button-group i:hover {
  color: lightcoral;
}
.tree-button-group {
  margin-left: 10px;
}
.is-ie-explorer {
  margin-right: 25px;
}
.flex {
  display: flex;
}
.shrink {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 12px solid #ebebeb;
  border-top: 8px solid transparent;
  opacity: 0.9;
  cursor: pointer;
  i {
    position: absolute;
    top: 50%;
    left: -14px;
    transform: translateY(-50%);
  }
  &:hover {
    color: #21aeff;
  }
}
</style>