<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 分类导航 -->
  <view class="Mall4j component-navigation-classification">
    <view
      v-for="(navItem, index) in fieldData.nav"
      :key="navItem.title + index"
      :class="['item', fieldData.size === 4 ? 'column-four': 'column-five']"
      @tap="toClassifyPage(index)"
    >
      <view
        v-if="fieldData.set.type===2 || fieldData.set.type===1"
        class="img"
      >
        <img-show
          :src="navItem.img"
          :class-list="['nav-img']"
        />
      </view>
      <text
        v-if="fieldData.set.type===2 || fieldData.set.type===3"
        class="nav-title"
        @tap.stop="toClassifyPage(index)"
      >
        {{ navItem.title }}
      </text>
    </view>
    <block v-if="fieldData.nav.length % fieldData.size !== 0">
      <view
        v-for="(navItem, index) in fieldData.size - (fieldData.nav.length % fieldData.size)"
        :key="(getKeys + index)"
        style="visibility: hidden;"
        :class="['item', fieldData.size===4 ? 'column-four': 'column-five']"
      >
        <view
          v-if="fieldData.set.type===2 || fieldData.set.type===1"
          class="img"
        >
          <img-show
            :src="navItem.img"
            :class-list="['nav-img']"
          />
        </view>
        <text
          v-if="fieldData.set.type===2 || fieldData.set.type===3"
          class="nav-title"
          @tap.stop="toClassifyPageM(index)"
        >
          {{ navItem.title }}
        </text>
      </view>
    </block>
  </view>
</template>

<script setup>
import util from '@/utils/util.js'

const props = defineProps({
  fieldData: {
    type: Object,
    default: () => ({})
  },
  shopId: {
    type: [Number, String],
    default: 0
  },
  will: {
    // 需要获取的类型 默认首页
    type: String,
    default: 'home'
  }
})

const getKeys = () => {
  return Math.random * 10000000
}

/**
 * 导航项目点击事件
 * item.img    图文/图片导航 的图片链接
 * item.link    商品id/自定义路径/微页面id
 * item.linkType    1-商品 2-购物车 3-个人中心 4-自定义路径 5-指定微页面
 * item.title    图文/文字导航 的标题
 */
const toClassifyPage = (index) => {
  const item = props.fieldData.nav[index]
  util.toRedirectLink(item.path.type, item.path.link, props.shopId)
}

const toClassifyPageM = (index) => {
  const item = props.fieldData.nav[index + Math.ceil(props.fieldData.nav.length / props.fieldData.size)]
  util.toRedirectLink(item.path.type, item.path.link, props.shopId)
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
