<template>
  <div id="detailPart" class="sides-container" :style="sideHeight?'height:'+sideHeight+'px':''">
    <el-input
      placeholder="搜索"
      class="side-input"
      v-model="searchText"
      @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="routeIndex"
      class="detail-menu"
      @open="handleOpen">
      <template v-for="(item, index) in sideRoute">
        <el-submenu :index="index.toString()" v-if="item.children">
          <template slot="title">
            <span>{{item.title}}</span>
          </template>
          <el-menu-item :index="index+'-'+idx" v-for="(it, idx) in item.children" :key="idx" @click="handleItem(it)" :disabled="it.disabled">{{it.title}}</el-menu-item>
        </el-submenu>
        <template v-else>
          <el-menu-item :index="index.toString()" @click="handleItem(item)" :disabled="item.disabled" v-if="isCustomerId(item.pathName)">{{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: ''
    }
  },
  data() {
    return {
      searchText: '',
      sideRoute: [
        {title: '企业概要', pathName: '', children: [
          {title: '企业速览', pathName: 'overview'},
          {title: '工商信息', pathName: 'businfo'},
          {title: '股东信息', pathName: 'holderinfo'},
          {title: '高管信息', pathName: 'execuinfo'},
          {title: '对外投资', pathName: 'overseas'},
          {title: '分支机构', pathName: 'branch'}
        ]},
        {title: '财务简析', pathName: 'financial'},
        {title: '项目商机', pathName: '', children: [
          {title: '土地交易', pathName: 'landtransaction'},
          {title: '拟建项目', pathName: 'proposed'},
          {title: '专项债项目', pathName: 'bond'},
          {title: '招标计划', pathName: 'biddingplan'},
          {title: '招标公告', pathName: 'announcement'},
          {title: '标讯Pro', pathName: 'tencent'},
          {title: '行政许可', pathName: 'administrative'}
        ]},
        {title: '业务往来', pathName: '', children: [
          {title: '客户', pathName: 'custom'},
          {title: '供应商', pathName: 'supplier'},
          {title: '招标代理', pathName: 'bidagency'},
          {title: '历史发包', pathName: 'hiscontract'},
          {title: '开标记录', pathName: 'bidrecords'}
        ]},
        {title: '城投分析', pathName: '', children: [
          {title: '区域经济', pathName: 'regionalEconomies'},
          {title: '城投拿地', pathName: 'landAcquisition'},
          {title: '同地区城投', pathName: 'sameRegion'}
        ]},
        {title: '风险信息', pathName: '', children: [
          {title: '行政处罚', pathName: 'punish'},
          {title: '经营异常', pathName: 'businessAnomaly'},
          {title: '被执行人', pathName: 'ifThePerson'},
          {title: '失信被执行人', pathName: 'dishonesty'},
          {title: '裁判文书', pathName: 'judgment'},
          {title: '法院公告', pathName: 'courtNotice'},
          {title: '开庭公告', pathName: 'openacourtsessionNotice'},
          // {title: '信用中国', pathName: ''}
        ]},
        {title: '商务信息', pathName: 'business'},
        {title: '招标偏好', pathName: 'preference'},
        {title: '合作情况', pathName: 'cooperate'},
        {title: '决策链条', pathName: 'decisionMaking'},
        {title: '跟进记录', pathName: 'gjjl'}
      ],
      customer:[
        'business',
        'preference',
        'cooperate',
        'decisionMaking',
        'gjjl'
      ],
    }
  },
  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 = this.partBoxHeight
      }
      return sideHeight
    },
    routeIndex(){
      let idx = this.getRouteIdx('', this.pathName) || '0-0'
      return idx
    }
  },
  created() {
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleItem(item){
      this.$emit("currentPath", item)
    },
    handleSearch(){
      if(this.searchText){
        let idx = this.getRouteIdx(this.searchText)
        if(idx&&idx.includes('-')){
          let openIdx = idx.slice(0, 1)
          this.$refs.sideMenu.open(openIdx)
        }
      }
    },
    getRouteIdx(pathTitle, pathName){
      let idx = '', sideArr = this.sideRoute
      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
    },
    isCustomerId(name){
      if(this.customer.indexOf(name) != -1){
        if(this.customerId){
          return true
        }
        return false
      }
      return true
    }
  }
}
</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;
          }
        }
        ::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: rgba(35,35,35,0.8);
            border-radius: 50%;
          }
        }
      }
    }
  }
</style>
