<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const isInvalid = computed(() => route.query.reason === 'invalid');
const title = computed(() => (isInvalid.value ? '链接无效' : '链接已过期'));
const description = computed(() =>
  isInvalid.value
    ? '请确认链接完整无误，或联系分享人重新生成。'
    : '请联系分享人重新生成可用链接。',
);
</script>

<template>
  <div class="share-expired">
    <div class="share-expired__card">
      <div class="share-expired__title">{{ title }}</div>
      <div class="share-expired__desc">{{ description }}</div>
    </div>
  </div>
</template>

<style scoped>
.share-expired {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(
      circle at top left,
      rgb(255 240 240 / 88%),
      transparent 28%
    ),
    linear-gradient(180deg, #faf7f6 0%, #f3efed 100%);
}

.share-expired__card {
  width: min(460px, 100%);
  padding: 36px 28px;
  text-align: center;
  background: rgb(255 255 255 / 92%);
  border: 1px solid rgb(220 227 235 / 72%);
  border-radius: 24px;
}

.share-expired__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.share-expired__desc {
  margin-top: 12px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
</style>
