<template>
  <view class="ai-tab-wrapper">
    <view class="tab-container">
      <view class="tab-item is-left" :class="{ active: modelValue === 0 }" :style="leftBackgroundStyle"
        @tap="handleSwitch(0)">
        <text class="tab-text">探索发现</text>
      </view>

      <view class="tab-item is-right" :class="{ active: modelValue === 1 }" :style="rightBackgroundStyle"
        @tap="handleSwitch(1)">
        <text class="tab-text">AI伴游</text>
        <text v-if="showDot"
          :class="['status-dot', modelValue === 1 ? 'status-dot--active' : 'status-dot--inactive']" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import leftSelected from "./images/L_02.png";
import leftUnselected from "./images/L_01.png";
import rightSelected from "./images/R_02.png";
import rightUnselected from "./images/R_01.png";

const props = defineProps({
  modelValue: { type: Number, default: 0 },
  showDot: { type: Boolean, default: true },
});

const emit = defineEmits(["update:modelValue", "change"]);

const getBackgroundStyle = (selectedImage, unselectedImage, active) => {
  const image = active
    ? (selectedImage || unselectedImage)
    : (unselectedImage || selectedImage);

  return {
    backgroundImage: image ? `url(${image})` : "none",
  };
};

const leftBackgroundStyle = computed(() =>
  getBackgroundStyle(leftSelected, leftUnselected, props.modelValue === 0)
);

const rightBackgroundStyle = computed(() =>
  getBackgroundStyle(rightSelected, rightUnselected, props.modelValue === 1)
);

const handleSwitch = (index) => {
  emit("update:modelValue", index);
  emit("change", index);
};
</script>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
