<script lang='ts' setup>
import type { TradableData } from "@/api/types";

const props = defineProps<{
  data: TradableData | null;
}>();

const { t } = useI18n();
const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");

useTradingView(tradingViewInst, {
  type: "Area",
  data: computed(() => [
    {
      time: "2024-01-01",
      value: 1000,
    },
    {
      time: "2024-02-01",
      value: 1200,
    },
    {
      time: "2024-03-01",
      value: 900,
    },
    {
      time: "2024-04-01",
      value: 1400,
    },
    {
      time: "2024-05-01",
      value: 1300,
    },
  ]),
  weightChartOptions: {
    height: 150,
    rightPriceScale: {
      visible: false,
    },
    leftPriceScale: {
      visible: false,
    },
  },
});
</script>

<template>
  <div class="mt-2">
    <div ref="tradingViewInst" />

    <div class="mt-5">
      <div class="font-semibold">
        代币信息
      </div>

      <div class="item">
        <div class="label">
          代币符号
        </div>
        <div class="value">
          {{ data?.assetCode }}
        </div>
      </div>
      <div class="item">
        <div class="label">
          关联资产
        </div>
        <div class="value">
          {{ data?.product?.name }}
        </div>
      </div>
      <div class="item">
        <div class="label">
          总供应量
        </div>
        <div class="value">
          {{ data?.totalSupply }}
        </div>
      </div>
      <div class="item">
        <div class="label">
          市值
        </div>
        <div class="value">
          ${{ data?.product?.estimatedValue }}
        </div>
      </div>
      <div class="item">
        <div class="label">
          24小时成交量
        </div>
        <div class="value">
          $500000
        </div>
      </div>
      <div class="item">
        <div class="label">
          创建时间
        </div>
        <div class="value">
          {{ useDateFormat(data?.createdAt, 'YYYY/MM/DD') }}
        </div>
      </div>
    </div>

    <div class="mt-5 space-y-4">
      <div class="font-semibold">
        市场数据
      </div>
      <div class="flex items-center gap-2">
        <Icon icon="hugeicons:trade-up" class="text-success" />
        <div class="text-sm">
          价格变动
        </div>
      </div>

      <div class="item">
        <div class="label">
          24小时
        </div>
        <div class="value">
          +1.66%
        </div>
      </div>
      <div class="item">
        <div class="label">
          7天
        </div>
        <div class="value">
          -5.98%
        </div>
      </div>
      <div class="item">
        <div class="label">
          30天
        </div>
        <div class="value">
          -10.24%
        </div>
      </div>
    </div>

    <div class="mt-5">
      <div class="font-semibold">
        资产状态
      </div>
      <div class="text-xs mt-2">
        {{ data?.status }}
      </div>
    </div>
  </div>
</template>

<style lang='css' scoped>
@reference "tailwindcss";

.label {
  @apply text-(--ion-text-color-step-300) mb-1 text-sm;
}
.item {
  @apply flex justify-between items-center mt-3;
}
.value {
  @apply text-sm font-semibold;
}
</style>
