<template>
  <view class="income-curve-card">
    <text class="curve-title">七日收益曲线</text>
    <image
        class="chart-bg"
        src="/static/dashboard/ucharts-bj.png"
        mode="scaleToFill"
      />
    <!-- 错误态 -->
    <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"
          :in-scroll-view="true"
          :tooltipShow="true"
          :canvas2d="false"
          canvasId="incomeCurveCanvas"
          :canvasHeight="240"
          ontap
          @tap="onChartTap"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, watch } 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"]);

// 当前选中的数据点索引：默认指向最后一条，tap 时更新
const currentIndex = ref(0);
watch(
  () => props.points.length,
  (len) => {
    currentIndex.value = Math.max(0, len - 1);
  },
  { immediate: true },
);

const onChartTap = (e) => {
  const idx = e?.index;
  if (typeof idx === "number" && idx >= 0 && idx < props.points.length) {
    currentIndex.value = idx;
  }
};

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",
        // [自定义] u-charts.js 已 patch：series.linearColor 启用横向多色渐变
        // 对应 CSS: linear-gradient(90deg, #D1EFFFBC 0%, #E7E8A9D8 49.52%, #FF9CE5FA 100%)
        linearColor: [
          [0, "rgba(209, 239, 255, 0.735)"],
          [0.4952, "rgba(231, 232, 169, 0.846)"],
          [1, "rgba(255, 156, 229, 0.98)"],
        ],
        linearDirection: "horizontal", // 'horizontal'(默认) | 'vertical'
      },
    ],
  };
});

const PADDING = [16, -16, 8, -16]; // top, right, bottom, left

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: false,
      bgColor: "#000000",
      bgOpacity: 0.6,
      fontColor: "#FFFFFF",
      fontSize: 11,
      splitLine: true,
      horizentalLine: { type: "dash", width: 1, color: "#FFFFFF" },
      // 函数形式：uCharts 每次渲染 tooltip 时调用，index 为当前触点对应的数据点索引
      // 未触摸时 index < 0，返回空 tooltip 避免干扰
      tooltipCustom: (_opts, _categories, index) => {
        if (typeof index !== "number" || index < 0) {
          return { textList: [] };
        }
        const point = props.points[index];
        if (!point) return { textList: [] };
        return {
          textList: [
            { text: `+${point.income}`, color: "#1BAFEE" },
            { text: point.date.slice(5), color: "#999999" },
          ],
        };
      },
    },
    // area 类型曲线区域图，搭配 series.linearType=custom + linearColor 实现自定义多色渐变
    // addLine:false 不绘制曲线（曲线透明），仅保留渐变面积填充
    area: {
      type: "curve",
      opacity: 1,
      addLine: false,
      width: 2,
      gradient: true,
      activeType: "hollow",
    },
  },
};
</script>

<style lang="scss" scoped>
.income-curve-card {
  background: linear-gradient(
    107.96deg,
    rgba(255, 223, 119, 0.59) -28.33%,
    rgba(142, 149, 226, 0.59) 44.4%,
    rgba(244, 140, 255, 0.59) 117.77%
  );
  border-radius: 22rpx;
  padding: 24rpx;
  box-sizing: border-box; // padding 计入总高度，避免内部撑爆
  box-shadow: 0px 4px 4px 0px #BD323240;
  position: relative;
  height: 256rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden; // 裁掉超出圆角的部分（包括背景图）
}

.curve-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4rpx; // 卡片高度有限，缩小标题与图表间距
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2; // 标题在背景图和图表之上
}

.chart-wrap {
  position: relative;
  flex: 1; // 撑满标题下方的剩余空间
  min-height: 0; // flex 子项防止溢出的兜底
  border-radius: 17rpx;
  overflow: hidden;
  z-index: 1;
  // backdrop-filter: blur(10px);
}

.chart-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 224rpx;
  height: 100%;
  z-index: 0; // 在标题(z:2)和图表(z:1)之下
  pointer-events: none; // 不拦截 tap，事件穿透到 canvas
  opacity: 0.4;
}

.chart-canvas {
  position: relative;
  width: 100%;
  height: 100%; // 跟随 .chart-wrap 撑满
  // 阴影：drop-shadow 沿 canvas 内容 alpha 通道生效，跟随曲线形状
  // 对应 CSS: box-shadow: -1px -5px 4px 0px #CF232338  (#CF2323 + alpha 0x38 ≈ 0.22)
  filter: drop-shadow(-1px -5px 4px rgba(207, 35, 35, 0.22));
}

.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>
