<template>
  <div id="detailPart" class="detail-container" :style="sideHeight?'height:'+sideHeight+'px':''">
    <el-input
      placeholder="搜索"
      class="side-input"
      v-model="searchText">
      <i slot="prefix" class="el-input__icon el-icon-search" @click="handleSearch"></i>
    </el-input>
    <el-menu
      :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)">{{it.title}}</el-menu-item>
        </el-submenu>
        <el-menu-item :index="index.toString()" @click="handleItem(item)" v-else>{{item.title}}</el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  props: {
    partBoxHeight: {
      type: Number,
      default: null
    },
    pathName: {
      type: String,
      default: null
    },
  },
  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: ''},
          {title: '拟建项目', pathName: ''},
          {title: '专项债项目', pathName: ''},
          {title: '招标计划', pathName: ''},
          {title: '招标公告', pathName: ''},
          {title: '标讯Pro', pathName: ''},
          {title: '行政许可', pathName: ''}
        ]},
        {title: '业务往来', pathName: '', children: [
          {title: '客户', pathName: ''},
          {title: '供应商', pathName: ''},
          {title: '招标代理', pathName: ''},
          {title: '历史发包', pathName: ''},
          {title: '开标记录', pathName: ''}
        ]},
        {title: '城投分析', pathName: '', children: [
          {title: '区域经济', pathName: ''},
          {title: '城投那地', pathName: ''},
          {title: '同地区城投', pathName: ''}
        ]},
        {title: '风险信息', pathName: '', children: [
          {title: '行政处罚', pathName: ''},
          {title: '经营异常', pathName: ''},
          {title: '被执行人', pathName: ''},
          {title: '失信被执行人', pathName: ''},
          {title: '裁判文书', pathName: ''},
          {title: '法院公告', pathName: ''},
          {title: '开庭公告', pathName: ''},
          {title: '信用中国', pathName: ''}
        ]},
        {title: '商务信息', pathName: 'business'},
        {title: '招标偏好', pathName: 'preference'},
        {title: '合作情况', pathName: 'cooperate'},
        {title: '决策链条', pathName: 'decisionMaking'},
        {title: '跟进记录', pathName: 'gjjl'}
      ]
    }
  },
  computed: {
    sideHeight() {
      let sideHeight = document.getElementById("detailPart")?document.getElementById("detailPart").offsetHeight:null
      if(sideHeight<this.partBoxHeight) {
        sideHeight = this.partBoxHeight
      }else {
        sideHeight = null
      }
      return sideHeight
    },
    routeIndex(){
      let idx = '0-0', sideArr = this.sideRoute
      for(let i=0; i < sideArr.length; i++){
        if(sideArr[i].pathName == this.pathName){
          idx = i.toString()
          break
        }else if(sideArr[i].children){
          for(let j=0; j< sideArr[i].children.length ; j++){
            if(sideArr[i].children.pathName == this.pathName){
              idx = i+'-'+j
              break
            }
          }
        }
      }
      return idx
    }
  },
  created() {
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleItem(item){
      this.$emit("currentPath", item)
    },
    handleSearch(){
      console.log('开始搜索了')
    }
  }
}
</script>

<style lang="scss" scoped>
  #app{
    .detail-container{
      width: 144px;
      min-height: calc(100vh - 170px);
      padding-bottom: 20px;
      background: #FFFFFF;
      .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{
          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{
            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>
