<template>
  <div id="detailPart" class="sides-container" :style="sideHeight?'height:'+sideHeight+'px':''">
    <el-input
      placeholder="搜索"
      class="side-input"
      v-model="searchText"
      clearable
      @input="handleSearch(true)"
      @keyup.enter.native="handleSearch()">
      <i slot="prefix" class="el-input__icon el-icon-search" @click="handleSearch()"></i>
    </el-input>
    <el-menu
      ref="sideMenu"
      :unique-opened="true"
      :default-active="searchIndex?searchIndex:routeIndex"
      class="detail-menu"
      @open="handleOpen">
      <template v-for="(item, index) in sideRoute">
        <template>
          <el-menu-item :index="index.toString()" @click="handleItem(item)">{{item.title}}</el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>

export default {
  name: 'Sidebar',
  props: {
    partBoxHeight: {
      type: Number,
      default: null
    },
    pathName: {
      type: String,
      default: null
    },
    customerId: {
      type: String,
      default: ''
    },
    isCompany: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      searchText: '',
      sideRoute: [
        {title: '集团成员', pathName: 'members'},
        {title: '集团资质', pathName: 'qualifications'},
        {title: '集团业绩', pathName: 'performance'},
      ],
      defaultRoute: [],
      customer:[
        'members',
        'qualifications',
        'performance',
      ],
      uniqueOpened:false,
      searchIndex: ''
    }
  },
  computed: {
    sideHeight() {
      let sideHeight = document.getElementById("detailPart")?document.getElementById("detailPart").offsetHeight:null, bowerHeight = document.body.clientHeight-170 || null
      if(this.partBoxHeight<bowerHeight) {
        sideHeight = bowerHeight
      }else{
        sideHeight = '1222'/*this.partBoxHeight*/
      }
      return sideHeight
    },
    routeIndex(){
      let idx = this.getRouteIdx('', this.pathName) || '0'
      return idx
    }
  },
  created() {
    this.defaultRoute = JSON.parse(JSON.stringify(this.sideRoute))
  },
  watch:{

  },
  methods: {
    handleOpen(key, keyPath) {

    },
    handleItem(item){
      this.$emit("currentPath", item)
    },
    handleSearch(flag){
      if((this.searchText&&!flag) || (!this.searchText&&flag)){
        let idx = this.getRouteIdx(this.searchText)
        if(idx){
          if(idx.includes('-')){
            let openIdx = idx.slice(0, 1)
            this.sideRoute = [this.defaultRoute[openIdx]]
            this.$refs.sideMenu.open(openIdx)
          }else{
            this.sideRoute = [this.defaultRoute[idx]]
          }
          this.searchIndex = '-1'
        }else{
          this.sideRoute = this.defaultRoute
          this.searchIndex = ''
        }
      }
    },
    getRouteIdx(pathTitle, pathName){
      let idx = '', sideArr = this.sideRoute==this.defaultRoute?this.sideRoute:this.defaultRoute
      for(let i=0; i < sideArr.length; i++){
        if(sideArr[i].title == pathTitle || sideArr[i].pathName == pathName){
          idx = i.toString()
          break
        }else if(sideArr[i].children){
          for(let j=0; j< sideArr[i].children.length ; j++){
            if(sideArr[i].children[j].title == pathTitle || sideArr[i].children[j].pathName == pathName){
              idx = i+'-'+j
              break
            }
          }
        }
      }
      return idx
    },
  }
}
</script>

<style lang="scss" scoped>
  #app{
    .sides-container{
      width: 144px;
      min-height: calc(100vh - 170px);
      padding-bottom: 20px;
      background: #FFFFFF;
      border-radius: 4px;
      .side-input{
        width: 128px;
        margin-top: 16px;
        margin-left: 8px;
        border: 0;
        ::v-deep .el-input__inner{
          height: 32px;
          background: #F3F3F4;
          border-radius: 20px;
          border: 0;
          &::placeholder {
            color: #3D3D3D;
          }
        }
        .el-icon-search{
          line-height: 34px;
          color: #0081FF;
          cursor: pointer;
        }
      }
      .detail-menu{
        margin-top: 20px;
        border-right: 0;
        ::v-deep .el-menu-item, ::v-deep .el-submenu__title{
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #232323;
          padding: 0 0 0 16px !important;
          text-align: initial !important;
          &:hover, &:focus, &.is-active{
            color: #0081FF !important;
            background: linear-gradient(91deg, rgba(0,129,255,0.1) 0%, rgba(0,129,255,0) 100%);;
          }
          .el-submenu__icon-arrow{
            color: #232323;
            right: 48px;
            margin-top: -5px;
          }
        }
        .is-disabled:hover{
          color: rgba(35, 35, 35, 0.8)!important;
          &:before {
            color: rgba(35, 35, 35, 0.8)!important;
          }
        }
        ::v-deep .el-submenu .el-menu-item{
          font-size: 12px;
          color: rgba(35,35,35,0.8);
          padding: 0 0 0 27px !important;
          min-width: 144px !important;
          position: relative;
          &:before {
            content: "";
            position: absolute;
            top: 14px;
            left: 21px;
            width: 2px;
            height: 2px;
            background: #0081FF;
            border-radius: 50%;
          }
        }
      }
    }
  }
</style>
