<script lang='ts' setup>
import { toastController } from "@ionic/vue";
import { client, safeClient } from "@/api";

const props = defineProps<{ id: string }>();
const emit = defineEmits<{
  close: [];
}>();

const { data } = safeClient(client.api.rwa.tokenization.lock_options.get({ query: { productId: props.id } }));

const selectedOption = ref<{ months: number; rewardRate: string } | null>(null);

async function handleSubmit() {
  await safeClient(client.api.rwa.tokenization.locked.post({
    lockMonths: selectedOption.value!.months,
    productId: props.id,
  }));
  emit("close");
  const toast = await toastController.create({
    message: "锁仓成功",
    duration: 2000,
    position: "bottom",
    color: "success",
  });
  await toast.present();
}
</script>

<template>
  <div class="ion-padding">
    <div class="mb-4">
      <h3 class="text-lg font-semibold mb-2">
        选择锁仓期限
      </h3>
      <p class="text-sm text-text-500">
        选择锁仓月数，锁仓期间可获得相应奖励
      </p>
    </div>

    <div v-if="data?.lockOptions">
      <ion-list lines="none">
        <ion-radio-group v-model="selectedOption">
          <ion-item
            v-for="option in data.lockOptions"
            :key="option.months"
            class="bg-faint rounded-md mb-3"
          >
            <ion-radio :value="option" justify="space-between" color="primary">
              <div>{{ option.months }} 个月 - {{ (Number(option.rewardRate) * 100).toFixed(2) }}% 收益</div>
            </ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>
    </div>

    <ui-empty v-else-if="!data || data.lockOptions.length === 0" description="暂无锁仓选项" />

    <ion-button
      expand="block"
      color="primary"
      :disabled="!selectedOption"
      shape="round"
      class="mt-6 h-12"
      @click="handleSubmit"
    >
      确定
    </ion-button>
  </div>
</template>

<style lang='css' scoped>
ion-item {
  --background: transparent;
}
</style>
