<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">
          <text class="tab-text">探索发现</text>
        </view>
      </view>

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

<script setup>
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 scoped>
.ai-tab-wrapper {
  width: 100%;
  background-color: #61D68B;
}

.tab-container {
  position: relative;
  width: 100%;
  height: 48px;
  display: flex;
  overflow: hidden;
  /* 基础容器不做裁切，交给内部 Item */
}

.tab-item {
  position: relative;
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 选中态提升层级，压住对方的交汇线 */
.tab-item.active {
  z-index: 10;
}

.tab-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 未选中样式：半透明渐变 */
  background: rgba(0, 0, 0, 0.05);
  transition: background 0.3s;
}

.tab-item.active .tab-content {
  /* 选中样式：纯白 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F0F8F3 75.52%);
}

.tab-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
  z-index: 20;
}

.tab-item.active .tab-text {
  color: #2E312F;
  font-weight: bold;
}

/* ------------------- 核心：异形路径优化 ------------------- */

/* 路径逻辑：
  1. H 指令缩短，让出更多空间给交汇处。
  2. C 指令（贝塞尔曲线）的终点设在高度 48 的位置，确保底部平齐不留空隙。
  3. 通过 margin-right/left 让两个形状在中心高度（24px）处重叠。
*/

.is-left {
  margin-right: -14px;
  /* 减小重叠宽度，使形状更精巧 */
}

.is-left .tab-content {
  /* 路径：左侧顶满 -> 顶部直线 -> 在中间开始向下弯曲 -> 底部平齐拉回 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H140 C155,0 160,12 165,24 C170,36 175,48 185,48 H0 V0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H140 C155,0 160,12 165,24 C170,36 175,48 185,48 H0 V0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
}

.is-right {
  margin-left: -14px;
}

.is-right .tab-content {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M180,0 H40 C25,0 20,12 15,24 C10,36 5,48 -5,48 H180 V0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M180,0 H40 C25,0 20,12 15,24 C10,36 5,48 -5,48 H180 V0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
}

/* ------------------- 选中态的渐变边框 ------------------- */

.tab-item.active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  /* 360deg 渐变 */
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.is-left.active::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M0.5,47.5 V0.5 H140 C155,0.5 160,12.5 165,24.5 C170,36.5 175,47.5 184.5,47.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
}

.is-right.active::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M179.5,47.5 V0.5 H40 C25,0.5 20,12.5 15,24.5 C10,36.5 5,47.5 -4.5,47.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
}

.status-dot {
  width: 7px;
  height: 7px;
  background-color: #26D46C;
  border-radius: 50%;
  margin-left: 5px;
  transform: translateY(-8px);
}
</style>