<!--
 * @Date: 2022-09-21 11:59:20
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-13 10:52:42
 * @FilePath: /meihuaApp/src/components/navBar.vue
 * @Description: 底部导航栏
-->
<template>
  <view id="navbar-page" class="navbar-page">
    <view @tap="goTo('index')" class="home">
      <view style="height: 1.5rem;">
        <IconFont :name="icon_home" size="1.5rem" color="" />
      </view>
      <view><text :style="homeStyle">首页</text></view>
    </view>
    <view @tap="goTo('book')" class="book">
      <view style="height: 1.5rem;">
        <IconFont :name="icon_book" size="1.5rem" color="" />
      </view>
      <view><text :style="bookStyle">订房</text></view>
    </view>
    <view @tap="goTo('serverInfo')" class="server">
      <view style="height: 1.5rem;">
        <IconFont :name="icon_server" size="1.5rem" color="" />
      </view>
      <view><text :style="serverStyle">服务</text></view>
    </view>
    <view @tap="goTo('my')" class="my">
      <view style="height: 1.5rem;">
        <IconFont :name="icon_my" size="1.5rem" color="" />
      </view>
      <view><text :style="myStyle">我的</text></view>
    </view>
  </view>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref, defineProps, computed, onMounted } from 'vue'
import icon_home1 from '@/images/icon/icon_home1@2x.png'
import icon_home2 from '@/images/icon/icon_home2@2x.png'
import icon_my1 from '@/images/icon/icon_my1@2x.png'
import icon_my2 from '@/images/icon/icon_my2@2x.png'
import icon_book1 from '@/images/icon/icon_book1@2x.png'
import icon_book2 from '@/images/icon/icon_book2@2x.png'
import icon_server1 from '@/images/icon/icon_server1.png'
import icon_server2 from '@/images/icon/icon_server2.png'
// import { hostListAPI } from '@/api/Host/index'
import { IconFont } from '@nutui/icons-vue-taro';

const goTo = (page) => {
  if (props.activated === page) {
    return;
  }
  wx.redirectTo({
    url: `../${page}/index`
  });
}

// const createActivity = async () => {
//   // 获取主办方列表信息
//   const { code, data } = await hostListAPI();
//   if (code) {
//     if (!data.my_hosts.length) { // 主办方为空
//       Taro.showModal({
//         title: '温馨提示',
//         content: '请先创建主办方后新建活动',
//         success: function (res) {
//           if (res.confirm) {
//             Taro.navigateTo({
//               url: '../createProject/index'
//             });
//           }
//         }
//       });
//     } else {
//       Taro.navigateTo({
//         url: '../createActivity/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 = 'index'
  } else {
    currentPage.value = 'my'
  }
})

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

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

const icon_home = computed(() => {
  if (props.activated === 'index') {
    return icon_home1
  } else {
    return icon_home2
  }
})
const icon_my = computed(() => {
  if (props.activated === 'my') {
    return icon_my1
  } else {
    return icon_my2
  }
})
const icon_book = computed(() => {
  if (props.activated === 'book') {
    return icon_book1
  } else {
    return icon_book2
  }
})
const icon_server= computed(() => {
  if (props.activated === 'serverInfo') {
    return icon_server1
  } else {
    return icon_server2
  }
})

if (props.activated === 'index') {
  homeStyle.value = {
    color: '#6A4925',
    fontSize: '0.9rem'
  }
  myStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
  bookStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
  serverStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
} else if (props.activated === 'my') {
  homeStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
  myStyle.value = {
    color: '#6A4925',
    fontSize: '0.9rem'
  }
  bookStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
  serverStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
} else if (props.activated === 'book') {
  homeStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
  myStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
  bookStyle.value = {
    color: '#6A4925',
    fontSize: '0.9rem'
  }
  serverStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
} else if (props.activated === 'serverInfo') {
  homeStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
  myStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
  bookStyle.value = {
    color: '#999999',
    fontSize: '0.9rem'
  }
  serverStyle.value = {
    color: '#6A4925',
    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: 10%;
    transform: translateX(-15%);
    text-align: center;
  }

  .book {
    position: absolute;
    left: 35%;
    transform: translateX(-50%);
    text-align: center;
  }

  .server {
    position: absolute;
    left: 60%;
    transform: translateX(-50%);
    text-align: center;
  }

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