<template>
  <view class="generate-confirm-panel">
    <view class="generate-points-summary">
      <view class="generate-point-card">
        <text class="generate-point-label">本次消耗</text>
        <text class="generate-point-value">{{ cost }}积分</text>
      </view>
      <view class="generate-point-card">
        <text class="generate-point-label">当前可用</text>
        <text class="generate-point-value">{{ balance }}积分</text>
      </view>
    </view>

    <view class="generate-freeze-note">
      <text class="generate-freeze-title">积分冻结规则</text>
      <text class="generate-freeze-desc">
        开始生成后将先冻结 {{ cost }} 积分，生成成功后扣除，失败会自动退回。
      </text>
    </view>

    <view class="generate-confirm-actions">
      <view
        class="generate-action is-primary"
        hover-class="is-pressed"
        @tap="emit('generate')"
      >
        开始生成
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  cost: {
    type: [Number, String],
    default: 100,
  },
  balance: {
    type: [Number, String],
    default: 300,
  },
});

const emit = defineEmits(["generate"]);
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
