<template>
  <view class="ai-tab-wrapper">
    <view class="tab-container">
      <view
        class="tab-item is-left"
        :class="{ active: modelValue === 0 }"
        @tap="handleSwitch(0)"
      >
        <view class="tab-content">
          <image
            v-if="leftSelected || leftUnselected"
            :src="modelValue === 0 ? (leftSelected || leftUnselected) : (leftUnselected || leftSelected)"
            class="tab-image"
            mode="scaleToFill"
          />
          <view class="tab-label">
            <text class="tab-text">探索发现</text>
          </view>
        </view>
      </view>

      <view
        class="tab-item is-right"
        :class="{ active: modelValue === 1 }"
        @tap="handleSwitch(1)"
      >
        <view class="tab-content">
          <image
            v-if="rightSelected || rightUnselected"
            :src="modelValue === 1 ? (rightSelected || rightUnselected) : (rightUnselected || rightSelected)"
            class="tab-image"
            mode="scaleToFill"
          />
          <view class="tab-label">
            <text class="tab-text">AI伴游</text>
            <view
              v-if="showDot"
              :class="['status-dot', modelValue === 1 ? 'status-dot--active' : 'status-dot--inactive']"
            ></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>

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 handleSwitch = (i) => {
  emit("update:modelValue", i);
  emit("change", i);
};
</script>

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