<template>
  <div class="type-box">
    <div v-if="isFixed" class="height"></div>
    <scroll-view scroll-x="true" class="type-list'" :class="{'fixed-box' : isFixed }">
      <div
        class="type-item"
        :class="{'active' : '' === typeId}"
        @click="changeType('')">猜你喜欢</div>
      <div
        class="type-item"
        v-for="(type, key) in typeList"
        :key="key"
        @click="changeType(type.id)"
        :class="{'active' : type.id === typeId}">
        {{type.name}}
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  props: ['menuType', 'isFixed'],
  computed: {
    typeList () {
      return this.menuType.filter(item => {
        return item.isShow
      }).sort((a, b) => {
        return b.sort - a.sort
      })
    }
  },
  data () {
    return {
      typeId: ''
    }
  },
  created () {
  },

  methods: {
    // 改变分类
    changeType (typeId) {
      this.typeId = typeId
      this.$emit('changeType', typeId)
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.type-box{
  margin: 0  0 @spacing 0;
  line-height: 30px;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  .height{
    height: 35px;
  }
  .type-list{
    padding: 0 @spacing;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    ::-webkit-scrollbar{
      width: 0;
      height: 0;
      color: transparent;
    }
    &.fixed-box{
      z-index: 99;
      position: fixed;
      top: 0;
      width: 100%;
      background: #fff;
    }
    .type-item{
      display: inline-block;
      padding: 0 10px;
      line-height: 35px;
      font-size: 15px;
      text-align: center;
      color: #999999;
      &.active{
        position: relative;
        font-size: 18px;
        color: @themeColor;
        &::before{
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translate(-50%, 0);
          width: 48%;
          height: 2px;
          background: @themeColor;
        }
      }
    }
  }
}
</style>
