<script setup>
import { ref, computed } from "vue";
const props = defineProps({
  selected: {
    type: Number,
    default: 0,
  },
  onClick: {
    type: Function,
    default: (index) => {},
  },
});
const isIOS = computed(() => {
  const systemInfo = uni.getDeviceInfo();
  return systemInfo.osName === "ios";
});
</script>
<template>
  <view class="tabbar" :style="{ paddingBottom: isIOS ? '30rpx' : '0rpx' }">
    <view @click="onClick(0)">
      <image
        :src="`/static/tab-score${selected === 0 ? '-s' : ''}.png`"
        mode="widthFix"
      />
      <text :style="{ color: selected === 0 ? '#333' : '#999999' }">Score</text>
    </view>
    <view @click="onClick(1)">
      <image
        :src="`/static/tab-history${selected === 1 ? '-s' : ''}.png`"
        mode="widthFix"
      />
      <text :style="{ color: selected === 1 ? '#333' : '#999999' }"
        >History</text
      >
    </view>
    <view @click="onClick(2)">
      <image
        :src="`/static/tab-user${selected === 2 ? '-s' : ''}.png`"
        mode="widthFix"
      />
      <text :style="{ color: selected === 2 ? '#333' : '#999999' }"
        >Profile</text
      >
    </view>
  </view>
</template>

<style scoped>
.tabbar {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100vw;
  height: 100rpx;
}
.tabbar > view {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
}
.tabbar > view > image {
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 5rpx;
}
</style>
