<script lang="ts" setup>
/**
 * 药价变更定制视图
 */
import { computed } from 'vue';

import { usePreferences } from '@vben/preferences';
import { MdPreview } from 'md-editor-v3';

import 'md-editor-v3/lib/style.css';

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

const { isDark } = usePreferences();
const isMarkdown = computed(() => Number(props.notice?.edit_type) === 1);
const mdTheme = computed(() => (isDark.value ? 'dark' : 'light'));
const contentHtml = computed(() =>
  String(props.notice?.content || '').replaceAll('\n', '<br>'),
);
</script>

<template>
  <div class="price-view">
    <div class="hero">
      <div class="kicker">药价变更</div>
      <h3 class="title">{{ notice.title || '药价变更通知' }}</h3>
      <p class="desc">{{ notice.detail || '配送仓药品价格已调整' }}</p>
    </div>
    <div class="body">
      <MdPreview
        v-if="isMarkdown"
        :model-value="String(notice.content || '')"
        :theme="mdTheme"
      />
      <div
        v-else
        class="prose prose-sm dark:prose-invert max-w-none"
        v-html="contentHtml"
      ></div>
    </div>
  </div>
</template>

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

.hero {
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 14px;
  background:
    radial-gradient(
      70% 120% at 100% 0%,
      hsl(84 70% 40% / 0.18),
      transparent 55%
    ),
    hsl(var(--muted) / 0.35);
}

.kicker {
  font-size: 12px;
  font-weight: 650;
  color: hsl(84 55% 38%);
}

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

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

.body {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card, var(--background)));
}
</style>
