<!-- TabBar.vue -->
<template>
  <view>
    <image class="bar" src="/static/components/tarbar/pictures/bar.png"></image>

    <!-- Home 图标 -->
    <image class="home"
           src="/static/components/tarbar/pictures/home.png"
           @click="pick_up_home"
           :style="{ opacity: is_home_picked_up ? 0 : 1 }">
    </image>
    <image class="pick_up_home"
           src="/static/components/tarbar/pictures/home_picked_up.png"
           @click="pick_up_home"
           :style="{ opacity: is_home_picked_up ? 1 : 0 }">
    </image>

    <!-- Community 图标 -->
    <image class="community"
           src="/static/components/tarbar/pictures/community.png"
           @click="pick_up_community"
           :style="{ opacity: is_communnity_picked_up ? 0 : 1 }">
    </image>
    <image class="pick_up_community"
           src="/static/components/tarbar/pictures/community_pick_up.png"
           @click="pick_up_community"
           :style="{ opacity: is_communnity_picked_up ? 1 : 0 }">
    </image>

    <!-- Assistant 图标 -->
    <image class="assistant"
           src="/static/components/tarbar/pictures/assistant.png"
           @click="pick_up_assistant"
           :style="{ opacity: is_assistant_picked_up ? 0 : 1 }">
    </image>
    <image class="pick_up_assistant"
           src="/static/components/tarbar/pictures/assistant_picked_up.png"
           @click="pick_up_assistant"
           :style="{ opacity: is_assistant_picked_up ? 1 : 0 }">
    </image>

    <!-- User 图标 -->
    <image class="user"
           src="/static/components/tarbar/pictures/user.png"
           @click="pick_up_user"
           :style="{ opacity: is_user_picked_up ? 0 : 1 }">
    </image>
    <image class="pick_up_user"
           src="/static/components/tarbar/pictures/user_picked_up.png"
           @click="pick_up_user"
           :style="{ opacity: is_user_picked_up ? 1 : 0 }">
    </image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      is_home_picked_up: false,
      is_communnity_picked_up: false,
      is_assistant_picked_up: false,
      is_user_picked_up: false
    };
  },
  methods: {

      pick_up_home() {
        this.resetPicks();
        this.is_home_picked_up = true;
        uni.navigateTo({
          url: '/pages/homepages/home/home', // 使用 navigateTo
        });
      },
      pick_up_community() {
        this.resetPicks();
        this.is_communnity_picked_up = true;
        uni.navigateTo({
          url: '/pages/homepages/community/community',
        });
      },
      pick_up_assistant() {
        this.resetPicks();
        this.is_assistant_picked_up = true;
        uni.navigateTo({
          url: '/pages/homepages/puppy_chat/puppy_chat',
        });
      },
      pick_up_user() {
        this.resetPicks();
        this.is_user_picked_up = true;
        uni.navigateTo({
          url: '/pages/homepages/user/user',
        });
      },
      resetPicks() {
        this.is_home_picked_up = false;
        this.is_communnity_picked_up = false;
        this.is_assistant_picked_up = false;
        this.is_user_picked_up = false;
      }

  }
  };
</script>

<style lang="scss">
.bar {
  position: absolute;
  width: 95%;
  height: 10%;
  bottom: 1%;
  left: 2.5%;
  background-size: cover;
  background-position: center;
}
.home, .community, .assistant, .user {
  position: absolute;
  width: 15%;
  height: 6%;
  bottom: 2%;
  transition: opacity 0.3s ease; /* 添加渐变过渡 */
}
.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
  position: absolute;
  width: 17%;
  height: 10%;
  bottom: 2%;
  transition: opacity 0.3s ease; /* 添加渐变过渡 */
}

/* 图标位置调整 */
.home { left: 6%; }
.pick_up_home { left: 6%; }
.community { left: 30%; }
.pick_up_community { left: 30%; }
.assistant { left: 54%; }
.pick_up_assistant { left: 54%; }
.user { left: 78%; }
.pick_up_user { left: 78%; }
</style>