<template>
  <div class="zodiac-text">
    <div class="zodiac-title">{{ info.icon }} {{ state.userZodiac }}运势</div>
    <div class="zodiac-date">{{ info.date }}</div>
    <template v-if="data">
      <div class="zodiac-bar" v-for="bar in bars" :key="bar.label">
        <span class="zodiac-bar-label">{{ bar.label }}</span>
        <div class="zodiac-bar-track">
          <div class="zodiac-bar-fill" :style="{ width: bar.val + '%', background: bar.color }"></div>
        </div>
        <span class="zodiac-bar-val">{{ bar.val }}%</span>
      </div>
      <div class="zodiac-tags" v-if="hasTags">
        <span class="zodiac-tag" v-if="data.luckyColor">🎨 {{ data.luckyColor }}</span>
        <span class="zodiac-tag" v-if="data.luckyNum">🔢 {{ data.luckyNum }}</span>
        <span class="zodiac-tag" v-if="data.noble">⭐ {{ data.noble }}</span>
      </div>
      <div class="zodiac-summary" v-if="data.summary">{{ data.summary }}</div>
    </template>
    <div v-else style="opacity:0.4;font-size:12px;margin-top:8px">运势加载中...</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { state } from '../composables/useOverlayState'
import { useHoroscope, zodiacMap, barColors } from '../composables/useHoroscope'

const { zodiacInfo: info, data } = useHoroscope()

const bars = computed(() => {
  if (!data.value) return []
  return [
    { label: '综合', val: parseInt(data.value.all) || 0, color: barColors.all },
    { label: '爱情', val: parseInt(data.value.love) || 0, color: barColors.love },
    { label: '工作', val: parseInt(data.value.work) || 0, color: barColors.work },
    { label: '财运', val: parseInt(data.value.money) || 0, color: barColors.money },
    { label: '健康', val: parseInt(data.value.health) || 0, color: barColors.health },
  ]
})

const hasTags = computed(() => data.value?.luckyColor || data.value?.luckyNum || data.value?.noble)
</script>

<style scoped>
.zodiac-text {
  font-size: 14px; color: var(--text-main);
  line-height: 1.6; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.zodiac-title { font-size: 16px; font-weight: 650; margin-bottom: 3px; }
.zodiac-date { font-size: 11px; color: var(--text-faint); margin-bottom: 12px; }
.zodiac-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 7px; font-size: 12px;
}
.zodiac-bar-label { width: 28px; color: var(--text-soft); flex-shrink: 0; }
.zodiac-bar-track {
  flex: 1; height: 5px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px; overflow: hidden;
}
.zodiac-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.6s ease;
}
.zodiac-bar-val {
  width: 30px; text-align: right; font-size: 11px;
  color: var(--text-soft); flex-shrink: 0;
}
.zodiac-tags { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 9px; }
.zodiac-tag {
  font-size: 10px; background: rgba(255,255,255,0.08);
  padding: 4px 8px; border-radius: 6px;
  color: var(--text-soft); border: 1px solid rgba(255,255,255,0.05);
}
.zodiac-summary {
  font-size: 12px; color: var(--text-soft); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
</style>
