<template>
  <div id="list">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="5" class="menu">
              <el-image :src="squareImage"></el-image>
              <span class="menuTitle">Menu</span>
              <el-col :span="24" class="menuList" v-for="(item, index) in menuList" :key="index">
                <p @click="changeMenu(item.component, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
              </el-col>
            </el-col>
            <el-col :span="19" class="listInfo">
              <component :is="component" v-bind="params"></component>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'list',
  props: {},
  components: {
    kjcg: () => import('./list/kjcg.vue'),
    zlxx: () => import('./list/zlxx.vue'),
    zjzk: () => import('./list/zjzk.vue'),
    xmlu: () => import('./list/xmlu.vue'),
    jxxq: () => import('./list/jxxq.vue'),
    swfw: () => import('./list/swfw.vue'),
  },
  data: function () {
    return {
      menuList: [
        { name: '科技成果', component: 'kjcg', options: { useTab: false, listModel: 0 } },
        { name: '专利信息', component: 'zlxx', options: { useTab: false, listModel: 1 } },
        { name: '专家智库', component: 'zjzk', options: { useTab: false, listModel: 2 } },
        { name: '项目路演', component: 'xmlu', options: { useTab: false, listModel: 3 } },
        { name: '技术需求', component: 'jxxq', options: { useTab: false, listModel: 4 } },
        { name: '商务服务', component: 'swfw', options: { useTab: false, listModel: 5 } },
      ],
      component: '',
      params: {},
      menuColor: 'rgb(254, 149, 14)',
      squareImage: require('@a/square_big.png'),
    };
  },
  created() {},
  methods: {
    changeMenu(component, index) {
      if (index !== this.menuIndex) this.$router.push({ path: './list', query: { index } });
      this.component = component;
    },
  },
  computed: {
    ...mapState(['user']),
    menuIndex() {
      const index = this.$route.query.index || 0;
      const obj = this.menuList[index];
      const params = {
        title: _.get(obj, 'name'),
        ..._.get(obj, 'options'),
      };
      this.$set(this, 'component', _.get(obj, 'component', 'kjcg'));
      this.$set(this, 'params', params);
      return index;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  min-height: 500px;
  margin: 10px 0;
  .one {
    .menu {
      height: 600px;
      overflow: hidden;
      padding: 15px 10px;
      background: no-repeat 100% 100%;
      background-image: url('~@a/menu_back.jpg');
      box-sizing: border-box;
      box-shadow: 0 0 10px #bbbaba;
      .menuTitle {
        font-size: 24px;
        color: #92959a;
        font-weight: bold;
        position: relative;
        top: -10px;
        left: 10px;
      }
      .menuList {
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #409eff;
        p {
          font-weight: bold;
          font-size: 18px;
          color: #044b79;
        }
      }
      .menuList:hover {
        cursor: pointer;
      }
    }
    .listInfo {
      float: right;
      width: 78%;
      min-height: 600px;
      overflow: hidden;
      box-shadow: 0 0 10px #409eff;
      padding: 10px;
    }
  }
}
</style>
