<template>
  <view class="component-shop-tabbar">
    <block
      v-for="(item, index) in list"
      :key="index"
    >
      <view
        class="tabBar"
        @tap="tabChange(index)"
      >
        <view class="tabIcon">
          <image
            v-if="activeTab === index"
            style="width: 100%; height: 100%;"
            :src="item.selectedIconPath"
          />
          <image
            v-else
            style="width: 100%; height: 100%;"
            :src="item.iconPath"
          />
        </view>
        <view :class="'tabTitle ' + (activeTab === index ? 'on':'')">
          {{ item.text }}
        </view>
      </view>
    </block>
  </view>
</template>

<script setup>
import shopIndexSion from '@/static/images/shop-index.png'
import shopIndexRSion from '@/static/images/shop-index-r.png'
import shopProdsSion from '@/static/images/shop-prods.png'
import shopProdsRSion from '@/static/images/shop-prods-r.png'
import shopNoticesSion from '@/static/images/shop-notices.png'
import shopNoticesRSion from '@/static/images/shop-notices-r.png'
import shopCategorySion from '@/static/images/shop-category.png'
import shopCategoryRSion from '@/static/images/shop-category-r.png'

const props = defineProps({
  currentTab: {
    type: [String, Number],
    default: 0
  },
  shopId: {
    type: [String, Number],
    default: null
  }
})

const activeTab = ref(Number(props.currentTab))
const list = ref([{
  // text: "首页",
  iconPath: shopIndexSion,
  selectedIconPath: shopIndexRSion
}, {
  // text: "商品",
  iconPath: shopProdsSion,
  selectedIconPath: shopProdsRSion
}, {
  // text: "公告",
  iconPath: shopNoticesSion,
  selectedIconPath: shopNoticesRSion
}, {
  // text: "分类",
  iconPath: shopCategorySion,
  selectedIconPath: shopCategoryRSion
}])

const shopInfo = ref({})

onBeforeMount(() => {
  // 在组件实例进入页面节点树时执行
  const listText = list.value
  listText[0].text = '首页'
  listText[1].text = '商品'
  listText[2].text = '公告'
  listText[3].text = '分类'

  // 店铺信息
  shopInfo.value = uni.getStorageSync('cloudShopInfo')
})

// tabbar切换
const tabChange = (index) => {
  activeTab.value = index
  if (activeTab.value === 0) {
    getShopInfo()
  } else if (activeTab.value === 1) {
    uni.redirectTo({
      url: '/package-shop/shop-page/shop-prods/shop-prods?shopId=' + props.shopId
    })
  } else if (activeTab.value === 2) {
    uni.redirectTo({
      url: '/package-shop/shop-page/notice-list/notice-list?shopId=' + props.shopId
    })
  } else if (activeTab.value === 3) {
    uni.redirectTo({
      url: '/package-shop/shop-page/shop-category/shop-category?shopId=' + props.shopId
    })
  }
}

/**
   * 获取店铺信息
   */
const getShopInfo = () => {
  http.request({
    url: '/mall4cloud_admin/ua/shop_detail/head_info',
    method: 'GET',
    data: {
      shopId: props.shopId,
      imgType: 0 // 图片类型：0.app(h5) 1.pc
    }
  }).then((res) => {
    uni.setStorageSync('cloudShopInfo', res)
    uni.redirectTo({
      url: res.renovationId ? '/package-shop/shop-page/feature-index/feature-index?shopId=' + res.shopId +
        '&renovationId=' + res.renovationId : '/package-shop/shop-page/shop-index/shop-index?shopId=' + props.shopId
    })
  })
}

</script>

<style lang="scss" scoped>
@use "./shop-tabbar.scss"
</style>
