<template>
  <div class="test-tree">
    <section class="title-area">
      <span class="title-icon">
        <svg
          width="100%"
          height="100%"
          viewBox="0 0 24 24"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <title>工厂</title>
          <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -152.000000)" fill-rule="nonzero">
              <g id="工厂" transform="translate(376.000000, 152.000000)">
                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24" />
                <path
                  id="形状"
                  d="M12.25,6.75 L12.25,10.25 L20.75,10.25 L20.75,21.25 L3.25000001,21.25 L3.25000001,6.75 L12.25,6.75 L12.25,6.75 Z M10.75,8.25 L4.75000001,8.25 L4.75000001,19.75 L19.25,19.75 L19.25,11.75 L10.75,11.75 L10.75,8.25 Z M17.5,16.5 L17.5,18 L16,18 L16,16.5 L17.5,16.5 Z M14,16.5 L14,18 L12.5,18 L12.5,16.5 L14,16.5 Z M17.5,13.5 L17.5,15 L16,15 L16,13.5 L17.5,13.5 Z M14,13.5 L14,15 L12.5,15 L12.5,13.5 L14,13.5 Z M8.99999999,10.256 L8.99999999,11.756 L6.49999999,11.756 L6.49999999,10.256 L8.99999999,10.256 Z M9.4755,2.82499999 C10.4715,2.63649998 11.0695,2.739 12.1845,3.291 L12.581,3.49000001 L12.7945,3.58999999 C13.2545,3.79899998 13.532,3.85899998 13.887,3.82849999 L13.9855,3.81850001 L14.1545,3.79249999 L14.2455,3.77650001 C14.8380746,3.66404309 15.3698683,3.34077505 15.7425,2.8665 L15.8205,2.763 L17.0405,3.636 L16.9485,3.76000001 C16.3504031,4.53742507 15.4872916,5.06774928 14.5235,5.25 C13.5275,5.43799999 12.9285,5.3355 11.814,4.7835 L11.4175,4.58500001 C10.781,4.27450001 10.4765,4.20100001 10.024,4.25599999 L9.9315,4.26850001 L9.7545,4.299 C9.16166181,4.41148918 8.62956287,4.73472685 8.25649999,5.20900001 L8.17849999,5.31199999 L6.95899999,4.43800001 L7.0515,4.31449999 C7.64947141,3.53774907 8.51191259,3.00768671 9.47500001,2.82499999 L9.4755,2.82499999 Z"
                  fill="#0B58FF"
                />
              </g>
            </g>
          </g>
        </svg>
      </span>
      <span class="title-content">合肥新能源工厂</span>
    </section>
    <section class="routes-area" v-if="showList">
      <el-menu @select="handleSelect">
        <!-- 此处假设了只有一个根节点 -->
        <template v-for="(menuItem, index) in menuListTrue[0].children" >
          <TestMenuItem :level="1" :key="index" :menuItem="menuItem" />
        </template>
      </el-menu>
    </section>
  </div>
</template>

<script>
import TestMenuItem from './TestMenuItem.vue'
export default {
  name: 'TestTree',
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  },
  components: { TestMenuItem },
  data() {
    return {
      menuListTrue: [],
      showList: false
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.reconstructMenuList()
    })
  },

  methods: {
    reconstructMenuList() {
      this.showList = false
      this.menuListTrue.splice(0)
      if (this.menuList) {
        this.menuList.forEach(item => {
          if (item.parentId === '-1') {
            this.menuListTrue.push(item)
          } else {
            this.constructMenuList(item)
          }
        })
      }

      this.showList = true
    },
    constructMenuList(child) {
      this.menuList.forEach(item => {
        if (child.parentId === item.id) {
          if (!('children' in item)) {
            this.$set(item, 'children', [])
          }
          item.children.push(child)
        }
      })
    },
    handleSelect(index, indexPath) {
      const [id, name] = index.split('$--$')
      this.$emit('getOrganization', { id, name })
    }
  }
}
</script>

<style scoped>
.test-tree {
  height: 100%;
  padding: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.title-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
}

.routes-area {
  flex: 1;
  height: 1px;
  background-color: #fff;
  overflow: hidden;
  overflow-y: auto;
}

.title-icon {
  height: 24px;
  width: 24px;
}

.title-content {
  font-size: 16px;
  line-height: 1;
}

.routes-area >>> .el-submenu__title,
.routes-area >>> .el-menu-item {
  font-size: 14px;
  line-height: 40px;
  height: 40px;
  letter-spacing: 0.88px;
}
/* 
.routes-area >>> .el-submenu__title span,
.routes-area >>> .el-menu-item span {
}
*/

#app .hideSidebar .routes-area >>>  .el-submenu>.el-submenu__title {
  padding: 0 20px !important;
}
</style>
