<template>
  <div class="list-box">
    <ul class="list">
      <li
        class="item"
        :class="{ 'z-active': value == index }"
        v-for="(item, index) in menuListPc"
        :key="index"
      >
        <template v-if="item.menuType == 'imagetext'">
          <image-text :menuInfo="item.menuInfo"></image-text>
        </template>
        <template v-else-if="item.menuType == 'playlists'">
          <play-lists :listId="item.menuInfo"></play-lists>
        </template>
        <template v-else-if="item.menuType == 'report'">
          <report-box :id="item.menuInfo"></report-box>
        </template>
        <template v-else-if="item.menuType == 'iframeLine'">
          <iframe-line :menuInfo="item.menuInfo"></iframe-line>
        </template>
        <template v-else>
          <empty404></empty404>
        </template>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import imageText from './menuClass/imageText';
import playLists from './menuClass/playLists';
import reportBox from './menuClass/report';
import iframeLine from './menuClass/iframeLine';
import empty404 from './menuClass/404';

export default {
  name: 'pv-menu-list',
  components: {
    imageText,
    playLists,
    reportBox,
    iframeLine,
    empty404
  },
  props: {
    value: {}
  },
  computed: {
    ...mapGetters({
      menuListPc: 'menuListPc'
    })
  }
};
</script>

<style lang="less" scoped>
.list-box {
  .list {
    .item {
      height: 800px;
      display: none;
      &.z-active {
        display: block;
      }
    }
  }
  ::v-deep ::-webkit-scrollbar {
    background: #2f3035;
    width: 5px;
  }
  ::v-deep ::-webkit-scrollbar-track-piece {
    background-color: #2f3035;
    margin: -2px;
  }
  ::v-deep ::-webkit-scrollbar-thumb {
    background: #383940;
    min-height: 150px;
    min-width: 150px;
    border-radius: 10px;
  }
}
</style>
