<template>
  <view class="tabbar">
    <view class="tabbar_item" @click="tabChange(0)">
      <image
        v-if="tabIndex == 1"
        src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/home_icon_normal.png"
        class="tabbar_img"
      />
      <image
        v-if="tabIndex == 0"
        src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/home_icon_pre.png"
        class="tabbar_img"
      />
      <text
        class="tabbar_title"
        :style="{ color: tabIndex == 0 ? '#D13E3C' : '#757A80' }"
        >海外资讯</text
      >
    </view>

    <view class="tabbar_item" @click="tabChange(1)">
      <image
        v-if="tabIndex == 0"
        src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/mine_icon_normal.png"
        class="tabbar_img"
      />
      <image
        v-if="tabIndex == 1"
        src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/mine_icon_pre.png"
        class="tabbar_img"
      />
      <text
        class="tabbar_title"
        :style="{ color: tabIndex == 1 ? '#D13E3C' : '#757A80' }"
        >全部</text
      >
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
const emit = defineEmits(["tabChange"]);

const tabIndex = ref(0);
function tabChange(index) {
  tabIndex.value = index;
  emit("tabChange", index);
}

onMounted(async () => {});
</script>

<style scoped lang="scss">
.tabbar {
  display: flex;
  width: 100vw;
  height: 150rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 0 -2rpx 10rpx rgba(128, 128, 128, 0.2);
  width: 100vw;
  background-color: white;
  z-index: 9999999;

  .tabbar_item {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
  }

  .tabbar_img {
    width: 44rpx;
    height: 44rpx;
  }

  .tabbar_title {
    display: flex;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 20rpx;
    color: #666666;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    margin-top: 5rpx;
  }
}
</style>
