<template>
  <view class="custom-tabbar">
    <view class="row">
      <view class="tabbar-item" @click="switchTab('/pages/home', 0)"  :class="{active: current === 0}">
        <image :src="current === 0 ? 'https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_home_on.png' : 'https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_home_off.png'" mode="aspectFit"></image>
        <text>首页</text>
      </view>
      <view class="tabbar-item" @click="switchTab('/pages/discover', 1)" :class="{active: current === 1}">
        <image :src="current === 1 ? 'https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_discover_on.png' : 'https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_discover_off.png'" mode="aspectFit"></image>
        <text>发现</text>
      </view>
      <view class="tabbar-item center" @click="switchTab('/pages/inhert', 2)" :class="{active: current === 2}">
        <image :src="current === 2 ? 'https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_inhert_on.png' : 'https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_inhert_off.png'" mode="aspectFit"></image>
        <text>传承</text>
      </view>
      <view class="tabbar-item" @click="switchTab('/pages/travel', 3)" :class="{active: current === 3}">
        <image :src="current === 3 ? 'https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_shop_on.png' : 'https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_shop_off.png'" mode="aspectFit"></image>
        <text>文旅</text>
      </view>
      <view class="tabbar-item" @click="switchTab('/pages/user/index', 4)" :class="{active: current === 4}">
        <image :src="current === 4 ? 'https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_profile_on.png' : 'https://mn.wenlvti.net/app_static/minnan/images/tabs/icon_profile_off.png'" mode="aspectFit"></image>
        <text>我的</text>
      </view>
    </view>
    <u-safe-bottom />
  </view>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
    }
  },
  methods: {
    switchTab(path, index) {
      if (this.current === index) return
      uni.switchTab({
        url: path
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: auto;
  background-color: #f7f3e8;
  box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);

  display: flex;
  flex-direction: column;

  .row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 20rpx;
  }
  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &.center{
      margin-top: -58rpx;
      image{
        width: 120rpx;
        height: 120rpx;
      }
      text {
        margin-top: 0rpx;
        z-index: 99;
      }
      &.active {
        text {
          color: #d94a2f;
        }
      }
    }
    image {
      width: 65rpx;
      height: 65rpx;
    }

    text {
      font-size: 24rpx;
      color: #111111;
      margin-top: 8rpx;
    }

    &.active {
      text {
        color: #d94a2f;
      }
    }
  }
}
</style>
