<template>
  <div class="menuDiv">
    <h3 v-if="showHeader">商品分类</h3>
    <ul class="menuUl">
      <li v-for="{ id, title } in items" :key="id" class="menuli">
        <div class="dalei">
          <span class="menuLine"></span>{{ title }}
          <i class="el-icon-arrow-right"></i>
        </div>

        <div class="menuCon">
          <ul class="menuConUl">
            <li v-for="{ id: sid, title: st } in getSub(id)" :key="sid">
              {{ st }}
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import menu from "@/store/modules/menu";
@Component
export default class extends Vue {
  @Prop(Boolean) private showHeader!: boolean;
  get items() {
    return menu.pList;
  }
  getSub(pid: number) {
    return menu.subList(pid);
  }
}
</script>
<style lang="scss" scoped>
.menuDiv {
  width: 100%;
  position: relative;
  h3 {
    background: #fd5522;
    color: #fff;
    height: 35px;
    line-height: 35px;
    padding-left: 20px;
  }
  .menuUl {
    list-style: none;
    width: 100%;
    background: #fff;

    li.menuli {
      height: 5.6rem;
      line-height: 5.6rem;
      font-size: 1.4rem;
      color: #333;
      border-bottom: 0.1rem solid #e5e5e5;
      padding-right: 1.6rem;
      box-sizing: border-box;
      &:hover {
        background: #ffddd3;
        a {
          color: #fd5522;
        }
        i {
          color: #fd5522;
        }
        .menuLine {
          background: #fd5522;
        }
        .menuCon {
          display: block;
        }
      }
      .dalei {
        cursor: pointer;
      }
      .menuLine {
        display: inline-block;
        height: 1.4rem;
        width: 0.2rem;
        background: #fff;
        margin-right: 1.6rem;
      }
      i {
        float: right;
        margin-top: 2rem;
      }
    }
  }
  .menuCon {
    overflow: scroll;
    width: 60rem;
    // min-height: 38rem;
    background: #fff;
    padding: 1.6rem;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -60rem;
    z-index: 99;
    display: none;
    .menuConUl {
      list-style: none;
      overflow: hidden;
      li {
        float: left;
        font-size: 1.2rem;
        color: #333;
        margin-right: 1rem;
        cursor: pointer;
        &:hover {
          color: #fd5522;
        }
      }
    }
  }
}
</style>
