<!--
 * @Date: 2022-09-21 11:59:20
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-09-21 15:11:47
 * @FilePath: /swx/src/components/navbar.vue
 * @Description: 底部导航栏
-->
<template>
  <view class="navbar-page">
    <view @tap="goTo('home')" class="home">
      <view style="height: 2rem;">
        <van-icon :name="icon_home" size="2rem" />
      </view>
      <view><text :style="homeStyle">首页</text></view>
    </view>
    <view class="add">
      <view>
        <van-icon :name="icon_add" size="4.5rem" />
      </view>
    </view>
    <view @tap="goTo('my')" class="my">
      <view style="height: 2rem;">
        <van-icon :name="icon_my" size="2rem" />
      </view>
      <view><text :style="myStyle">我的</text></view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, computed, onMounted } from 'vue'
import icon_home1 from '@/images/icon/home01@2x.png'
import icon_home2 from '@/images/icon/home02@2x.png'
import icon_my1 from '@/images/icon/my01@2x.png'
import icon_my2 from '@/images/icon/my02@2x.png'
import icon_add from '@/images/icon/new@2x.png'

import Taro from '@tarojs/taro'

const goTo = (page) => {
  if (page === 'home') {
    if (currentPage.value === 'home') return;
    Taro.redirectTo({
      url: '../index/index'
    })
  } else {
    if (currentPage.value === 'my') return;
    Taro.redirectTo({
      url: '../my/index'
    })
  }
}

const currentPage = ref('');

onMounted(() => {
  let pages = getCurrentPages();
  let current_page = pages[pages.length - 1];
  let url = current_page.route;
  if (url == 'pages/index/index') {
    currentPage.value = 'home'
  } else {
    currentPage.value = 'my'
  }
})

const props = defineProps({
  activated: String,
})

const homeStyle = ref({})
const myStyle = ref({})

const icon_home = computed(() => {
  if (props.activated === 'home') {
    return icon_home1
  } else {
    return icon_home2
  }
})
const icon_my = computed(() => {
  if (props.activated === 'home') {
    return icon_my2
  } else {
    return icon_my1
  }
})

if (props.activated === 'home') {
  homeStyle.value = {
    color: '#2A5F45',
    fontSize: '0.9rem'
  }
  myStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
} else {
  homeStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
  myStyle.value = {
    color: '#2A5F45',
    fontSize: '0.9rem'
  }
}

</script>

<style lang="less">
.navbar-page {
  position: fixed;
  bottom: 0;
  background-color: #FFFFFF;
  padding-top: 0.5rem;
  height: 5rem;
  width: 100%;

  .home {
    position: absolute;
    left: 20%;
    transform: translateX(-20%);
    text-align: center;
  }

  .add {
    position: absolute;
    top: -1.25rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .my {
    position: absolute;
    left: 80%;
    transform: translateX(-80%);
    text-align: center;
  }
}
</style>