<template>
  <div class="height_100">
    <el-container>
      <el-aside :width="width">
        <div class="point" @click="getCollapse">
          {{ isCollapse ? '收起' : '展开' }}
        </div>
        <el-menu class="theme-dark" :default-active="activeMenu" @select="changeActiveMenu" :collapse="!isCollapse">
          <el-menu-item v-for="item in menuList" :key="item.name" :index="item.name" >
            <i class="el-icon-film"></i>
            <span slot="title">{{ item.label }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <component :is='activeMenu' :projectId="projectId" queryApi="queryNoveltyReport" deleteApi="deleteNoveltyReport"></component>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import basicMessageVue from './components/basicMessage/basicMessage.vue';
import signMessage from './components/signMessage/signMessage.vue';
import contrastRecords from './components/contrastRecords/contrastRecords.vue';
import contrastFile from './components/contrastFile/contrastFile.vue';
import reportFile from '@/views/report/components/reportFile/reportFileTable.vue';
import searchRecords from './components/searchRecords/searchRecords.vue'
export default {
  components: {
    basicMessageVue,
    signMessage,
    contrastRecords,
    contrastFile,
    reportFile,
    searchRecords
  },
  props: {
    projectId:{},
    firstComponent:{}
  },
  data() {
    return {
      isCollapse:true,
      width:'200px',
      activeMenu: this.firstComponent || 'basicMessageVue',
      menuList:[
        {
          label: '基本信息',
          name: "basicMessageVue",
        },
        {
          label: '技术方案信息',
          name: "signMessage",
        },
        {
          label: '检索记录',
          name: "searchRecords",
        },
        {
          label: '对比文件',
          name: "contrastFile",
        },
        {
          label: '对比记录',
          name: "contrastRecords",
        },
        {
          label: '报告文档',
          name: "reportFile",
        },
      ],
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    getCollapse(){
      this.isCollapse = !this.isCollapse
      this.$nextTick(()=>{
        this.width = this.isCollapse?'200px':'64px'
      })
    },
    changeActiveMenu(name){
      this.activeMenu = name
    },
  },
};
</script>
<style lang="scss" scoped>
.point {
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #e6e6e6;
  /* color: var(--color); */
  font-family: var(--fm);
  color: var(--color2);
  cursor: pointer;
  width: 100%;

  &:hover {
    background: #ecf5ff
  }
}
</style>