<template>
  <div class="transfer-market-classification-con">
    <!-- 分类 -->
    <div class="classification">
      <div
        class="item-con"
        v-for="(item, index) of list"
        :key="`item-${index}`"
      >
        <div class="item flex-default" @click="handleClick(item)">
          <img class="pic" :src="item.thumb" />
          <div class="label">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <!-- 推荐 -->
    <!-- <div class="recommend flex-default">
      <div class="content-item">
        <div class="header flex-between">
          <span class="title">优品捡漏</span>
          <div class="flex-defualt">
            <span class="sub-title">品质保证</span>
            <m-icon icon="icon-more-light" :size="9" />
          </div>
        </div>
        <div class="goods-list flex-default">
          <div class="goods-item flex-default">
            <div class="pic" />
            <div class="label">办公</div>
          </div>
          <div class="goods-item flex-default">
            <div class="pic" />
            <div class="label">手机</div>
          </div>
          <div class="goods-item flex-default">
            <div class="pic" />
            <div class="label">平板</div>
          </div>
        </div>
      </div>
      <div class="content-item">
        <div class="header flex-between">
          <span class="title">值得买</span>
          <div class="flex-defualt">
            <span class="sub-title">品质保证</span>
            <m-icon icon="icon-more-light" :size="9" />
          </div>
        </div>
        <div class="goods-list flex-default">
          <div class="goods-item flex-default">
            <div class="pic" />
            <div class="label">摄影摄像</div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClick({ categoryId = "", name = "" }) {
      let query = { categoryId, name };
      this.$router.push({ name: "transfer-classification-list", query });
    },
  },
  created() {},
};
</script>

<style lang="less">
.transfer-market-classification-con {
  > .classification {
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    padding: 14px 13px;
    margin-bottom: 10px;
    > .item-con {
      width: 20%;
      margin-bottom: 10px;
      &:nth-of-type(n + 5) {
        margin-bottom: 0;
      }
    }
    > .item-con .item {
      flex-direction: column;
      .pic {
        width: 40px;
        height: 40px;
        background: lightgrey;
        margin-bottom: 8px;
      }
      .label {
        font-size: 12px;
      }
    }
  }
  > .recommend {
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 10px;
    > .content-item {
      width: 50%;
      padding: 12px;
    }
    > .content-item .header {
      margin-bottom: 10px;
      .title {
        font-size: 16px;
        font-weight: bold;
      }
      .sub-title {
        font-size: 10px;
        color: #999999;
      }
    }
    > .content-item .goods-list {
      .goods-item {
        flex-direction: column;
        margin-right: 22px;
        &:last-of-type {
          margin-right: 0;
        }
      }
      .goods-item .pic {
        width: 33px;
        height: 33px;
        margin-bottom: 9px;
      }
      .goods-item .label {
        font-size: 10px;
      }
    }
  }
}
</style>