<script lang="ts" setup>
/**
 * 开票待办定制视图：摘要 + 跳转开票中心
 */
import { computed } from 'vue';
import { useRouter } from 'vue-router';

import { Button } from 'ant-design-vue';
import { FileText } from 'lucide-vue-next';

const props = defineProps<{
  notice: Record<string, any>;
}>();

const router = useRouter();
const payload = computed(() => props.notice?.action_payload || {});

function goInvoice() {
  const route = String(payload.value.route || '/finance/invoice-center');
  router.push(route);
}
</script>

<template>
  <div class="invoice-view">
    <div class="hero">
      <div class="ico">
        <FileText class="size-7" />
      </div>
      <div>
        <div class="kicker">开票待办</div>
        <h3 class="title">{{ notice.title || '开票申请待处理' }}</h3>
        <p class="desc">{{ notice.detail || '有新的开票申请需要处理' }}</p>
      </div>
    </div>
    <dl class="facts">
      <div class="fact">
        <dt>开票单 ID</dt>
        <dd>#{{ payload.biz_id || '—' }}</dd>
      </div>
      <div class="fact">
        <dt>时间</dt>
        <dd>{{ notice.created_at || '—' }}</dd>
      </div>
    </dl>
    <div class="actions">
      <Button type="primary" size="large" @click="goInvoice">
        打开开票中心
      </Button>
    </div>
  </div>
</template>

<style scoped>
.invoice-view {
  padding: 2px 0;
}

.hero {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 14px;
  background:
    radial-gradient(
      70% 120% at 0% 0%,
      hsl(250 70% 55% / 0.16),
      transparent 55%
    ),
    hsl(var(--muted) / 0.35);
}

.ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: hsl(250 60% 48%);
  background: hsl(250 70% 55% / 0.12);
}

.kicker {
  font-size: 12px;
  font-weight: 650;
  color: hsl(250 60% 48%);
}

.title {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 720;
  color: hsl(var(--foreground));
}

.desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.facts {
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
}

.fact {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card, var(--background)));
}

.fact dt {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.fact dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
</style>
