<template>
  <view class="income-curve-card">
    <text class="curve-title">七日收益曲线</text>

    <!-- 错误态 -->
    <view v-if="error" class="error-box" @tap="$emit('retry')">
      <text class="error-text">加载失败，点击重试</text>
    </view>

    <!-- 骨架态 -->
    <view v-else-if="loading || !points || points.length === 0" class="skeleton-chart"></view>

    <!-- 图表 -->
    <view v-else class="chart-wrap">
      <view class="chart-canvas">
        <qiun-data-charts
          type="area"
          :opts="chartOpts"
          :chartData="chartData"
          :ontouch="true"
          :onmovetip="true"
          canvas2d
          ontap
          @complete="handleChartComplete"
        />
        <!-- 默认指向最后一天的指示器（位置来自 uCharts calPoints，跟图表完全对齐） -->
        <view
          v-if="latestPoint && latestCalPoint"
          class="latest-indicator"
          :style="{
            left: latestCalPoint.x / pixel + 'px',
            top: latestCalPoint.y / pixel + 'px',
          }"
        >
          <view class="latest-line"></view>
          <view class="latest-dot"></view>
          <view class="latest-tooltip">
            <text class="latest-value">+{{ latestPoint.income }}</text>
            <text class="latest-date">{{ latestPoint.date.slice(5) }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
// 显式 import 兜底，避免 easycom 漏注册
import QiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'

const props = defineProps({
  points: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  error: { type: String, default: null },
})
defineEmits(['retry'])

// canvas2d 模式 opts.pix=1，非 canvas2d 模式 opts.pix=systemInfo.pixelRatio
// 用 emit 回来的 opts 拿真实值，兜底 1
const pixel = ref(1)
const chartOptsRef = ref(null)
const calPoints = ref([])

// 监听 @complete：uCharts 渲染完成后会 emit 一次，opts.chartData.calPoints 是每个点的真实 canvas 坐标
function handleChartComplete(e) {
  const opts = e?.opts
  if (!opts) return
  chartOptsRef.value = opts
  pixel.value = opts.pix || 1
  calPoints.value = opts.chartData?.calPoints || []
}

// 跟 chartOpts.padding / chart-canvas 高度保持一致，单位 rpx
const CHART_HEIGHT = 240
const PADDING = [16, 16, 8, 16] // top, right, bottom, left

const peak = computed(() => props.points.find((p) => p.is_peak) || null)
const latestPoint = computed(() =>
  props.points.length > 0 ? props.points[props.points.length - 1] : null
)

// 最后一点的真实 canvas 坐标（来自 uCharts @complete 事件的 calPoints）
// calPoints 结构：calPoints[seriesIndex][dataIndex] = { x, y }，y 是 canvas 像素
const latestCalPoint = computed(() => {
  if (!latestPoint.value || calPoints.value.length === 0) return null
  const seriesPoints = calPoints.value[0]
  if (!seriesPoints || seriesPoints.length === 0) return null
  return seriesPoints[seriesPoints.length - 1] || null
})

const chartData = computed(() => {
  const categories = props.points.map((p) => p.date.slice(5))
  const lineData = props.points.map((p) => p.income)
  return {
    categories,
    series: [
      { name: '收益', type: 'area', data: lineData, color: '#1BAFEE' },
    ],
  }
})

const chartOpts = {
  color: ['#1BAFEE'],
  padding: PADDING,
  dataLabel: false,
  legend: { show: false },
  // 关闭曲线上每个数据点的小圆圈
  dataPointShape: false,
  xAxis: { disabled: true, disableGrid: true, axisLine: false, fontColor: '#FFFFFF', fontSize: 9 },
  yAxis: {
    disabled: true,
    showTitle: false,
    data: [{ min: 0, disabled: true, axisLine: false }],
    disableGrid: true,
    fontColor: '#FFFFFF',
    fontSize: 9,
  },
  extra: {
    tooltip: {
      showBox: true,
      showArrow: true,
      showCategory: true,
      bgColor: '#000000',
      bgOpacity: 0.6,
      fontColor: '#FFFFFF',
      fontSize: 11,
      splitLine: true,
      horizentalLine: { type: 'dash', width: 1, color: '#FFFFFF' },
    },
    // area 类型曲线区域图，gradient: true 启用从线色到透明的渐变填充
    area: { type: 'curve', opacity: 0.3, addLine: true, width: 2, gradient: true, activeType: 'hollow' },
  },
}
</script>

<style lang="scss" scoped>
.income-curve-card {
  background: linear-gradient(135deg, #FFDF77 0%, #8E95E2 40%, #F48CFF 100%);
  border-radius: 22rpx;
  padding: 24rpx;
  margin: 24rpx 0;
  box-shadow: 0px 4px 4px rgba(189, 50, 50, 0.25);
  min-height: 360rpx;
}

.curve-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16rpx;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.chart-wrap {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 17rpx;
  padding: 16rpx;
  backdrop-filter: blur(10px);
}

.chart-canvas {
  position: relative;
  width: 100%;
  height: 240rpx;
}

.latest-indicator {
  position: absolute;
  z-index: 2;
  // left/top 是数据点的中心，translate(-50%, -100%) 让 tooltip 在点的正上方、点对齐 indicator 中心
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.latest-line {
  width: 1rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.7);
  margin-bottom: -2rpx;
  align-self: center;
}

.latest-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #1BAFEE;
  border: 2rpx solid #ffffff;
  align-self: center;
  margin-bottom: 6rpx;
}

.latest-tooltip {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8rpx;
  padding: 6rpx 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4rpx;
}

.latest-value {
  font-size: 24rpx;
  font-weight: 700;
  color: #FFFABD;
  line-height: 1.2;
}

.latest-date {
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.2;
  margin-top: 2rpx;
}

.skeleton-chart {
  height: 360rpx;
  border-radius: 17rpx;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.error-box {
  height: 360rpx;
  border-radius: 17rpx;
  background: rgba(255, 100, 100, 0.15);
  border: 2rpx solid rgba(255, 100, 100, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-text {
  color: #ff8080;
  font-size: 28rpx;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>
