<script lang='ts' setup>
import type { RefresherCustomEvent } from "@ionic/vue";

const { t } = useI18n();
const { vibrate } = useHaptics();

const loading = ref(true);
const selectedType = ref("all");
const searchQuery = ref("");

// 收益类型选项
const typeOptions = [
  { value: "all", label: "全部" },
  { value: "dividend", label: "分红收益" },
  { value: "appreciation", label: "资产增值" },
  { value: "trade", label: "交易收益" },
];

// 收益记录数据
const allRecords = ref([
  {
    id: "1",
    type: "dividend",
    typeName: "分红收益",
    assetName: "纽约曼哈顿中心公寓",
    assetCode: "NYC-001",
    amount: 520.50,
    date: "2025-12-27 10:30",
    status: "completed",
  },
  {
    id: "2",
    type: "appreciation",
    typeName: "资产增值",
    assetName: "旧金山商业地产",
    assetCode: "SF-002",
    amount: 320.80,
    date: "2025-12-27 09:15",
    status: "completed",
  },
  {
    id: "3",
    type: "trade",
    typeName: "交易收益",
    assetName: "洛杉矶住宅楼",
    assetCode: "LA-003",
    amount: 215.50,
    date: "2025-12-26 16:45",
    status: "completed",
  },
  {
    id: "4",
    type: "dividend",
    typeName: "分红收益",
    assetName: "迈阿密海景别墅",
    assetCode: "MIA-004",
    amount: 680.20,
    date: "2025-12-26 14:20",
    status: "completed",
  },
  {
    id: "5",
    type: "appreciation",
    typeName: "资产增值",
    assetName: "芝加哥写字楼",
    assetCode: "CHI-005",
    amount: 450.60,
    date: "2025-12-25 11:30",
    status: "completed",
  },
  {
    id: "6",
    type: "trade",
    typeName: "交易收益",
    assetName: "波士顿商业中心",
    assetCode: "BOS-006",
    amount: 890.30,
    date: "2025-12-24 15:20",
    status: "completed",
  },
  {
    id: "7",
    type: "dividend",
    typeName: "分红收益",
    assetName: "西雅图科技园区",
    assetCode: "SEA-007",
    amount: 720.40,
    date: "2025-12-23 13:10",
    status: "completed",
  },
  {
    id: "8",
    type: "appreciation",
    typeName: "资产增值",
    assetName: "达拉斯住宅区",
    assetCode: "DAL-008",
    amount: 380.90,
    date: "2025-12-22 10:50",
    status: "completed",
  },
  {
    id: "9",
    type: "trade",
    typeName: "交易收益",
    assetName: "奥斯汀高端公寓",
    assetCode: "AUS-009",
    amount: 1250.20,
    date: "2025-12-21 16:30",
    status: "completed",
  },
  {
    id: "10",
    type: "dividend",
    typeName: "分红收益",
    assetName: "休斯顿商业综合体",
    assetCode: "HOU-010",
    amount: 580.70,
    date: "2025-12-20 14:15",
    status: "completed",
  },
]);

// 筛选后的记录
const filteredRecords = computed(() => {
  let records = allRecords.value;

  // 按类型筛选
  if (selectedType.value !== "all") {
    records = records.filter(item => item.type === selectedType.value);
  }

  // 按搜索关键词筛选
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase();
    records = records.filter(item =>
      item.assetName.toLowerCase().includes(query)
      || item.assetCode.toLowerCase().includes(query)
      || item.typeName.toLowerCase().includes(query),
    );
  }

  return records;
});

async function loadData() {
  loading.value = true;
  useTimeoutFn(() => {
    loading.value = false;
  }, 800);
}

async function handleRefresh(event: RefresherCustomEvent) {
  vibrate();
  useTimeoutFn(() => {
    event.target.complete();
  }, 800);
}

function getTypeColor(type: string) {
  const colors: Record<string, string> = {
    dividend: "success",
    appreciation: "primary",
    trade: "warning",
  };
  return colors[type] || "medium";
}

onMounted(() => {
  loadData();
});
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
        <ion-title>{{ t("asset.revenue.revenueDetails") }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-searchbar v-model="searchQuery" :placeholder="t('myIssues.search')" />

      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
        <ion-refresher-content />
      </ion-refresher>

      <div>
        <ui-tabs size="small" class="ion-padding-horizontal">
          <ui-tab-pane
            v-for="option in typeOptions"
            :key="option.value"
            :name="option.value"
            :title="option.label"
          />
        </ui-tabs>

        <ion-list>
          <ion-item
            v-for="item in filteredRecords"
            :key="item.id"
            lines="full"
          >
            <div class="w-full py-3">
              <div class="flex justify-between items-start">
                <div class="flex-1">
                  <div class="flex items-center gap-2 mb-2">
                    <ion-badge
                      :color="getTypeColor(item.type)"
                      class="text-xs px-2 py-0.5"
                    >
                      {{ item.typeName }}
                    </ion-badge>
                    <ion-badge color="success" class="text-xs px-2 py-0.5">
                      已完成
                    </ion-badge>
                  </div>
                  <div class="text-base font-semibold mb-1">
                    {{ item.assetName }}
                  </div>
                  <div class="text-xs text-text-400 mb-2">
                    {{ item.assetCode }}
                  </div>
                  <div class="flex items-center gap-1.5 text-xs text-text-400">
                    <i-ic-outline-access-time class="text-sm" />
                    <span>{{ item.date }}</span>
                  </div>
                </div>
                <div class="text-right ml-4">
                  <div class="text-lg font-bold text-success">
                    +{{ formatAmountWithSplit(item.amount) }}
                  </div>
                </div>
              </div>
            </div>
          </ion-item>
        </ion-list>
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped></style>
