<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="1"
      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
    },
  },
  data() {
    return {
      searchText: '',
      sideRoute: [
        {title: '企业概要', pathName: '', children: [
          {title: '企业速览', pathName: ''},
          {title: '工商信息', pathName: ''},
          {title: '股东信息', pathName: ''},
          {title: '高管信息', pathName: ''},
          {title: '对外投资', pathName: ''},
          {title: '分支机构', pathName: ''}
        ]},
        {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: ''},
        {title: '合作情况', pathName: ''},
        {title: '决策链条', pathName: ''},
        {title: '跟进记录', pathName: ''}
      ]
    }
  },
  computed: {
    sideHeight() {
      let sideHeight = document.getElementById("detailPart")?document.getElementById("detailPart").offsetHeight:null
      if(sideHeight<this.partBoxHeight) {
        sideHeight = this.partBoxHeight
      }else {
        sideHeight = null
      }
      return sideHeight
    }
  },
  created() {
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleItem(item){
      this.$emit("currentPath", item)
    },
    handleSearch(){
      console.log('开始搜索了')
    }
  }
}
</script>

<style lang="scss" scoped>
  .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;
        &:hover, &:focus{
          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>
