<template>
  <ie-page>
    <ie-navbar title="资讯详情" />
    <view class="p-20">
      <view class="text-xl mb-20">{{ detail.title }}</view>
      <view class="flex items-center justify-between">
        <view>
          <uv-text size="14" prefix-icon="clock-fill" :icon-style="{ color: 'var(--primary-color)' }"
            :text="detail.sendDate" />
        </view>
        <uv-tags v-if="detail.type" size="mini" type="primary" plain plain-fill :text="detail.type" />
      </view>
      <view class="html mt-30">
        <uv-parse :content="detail.content" :tagStyle="style" />
      </view>
    </view>
  </ie-page>
</template>
<script lang="ts" setup>
import { getNewsDetail } from '@/api/modules/news';
import { NewsItem } from '@/types/news';
import { onLoad } from '@dcloudio/uni-app';
import { useTransferPage } from '@/hooks/useTransferPage';
const { prevData } = useTransferPage();
const detail = ref<NewsItem>({} as NewsItem);
const style = {
  img: 'width: 100% !important; max-width: 100% !important; height: auto !important;',
  p: 'line-height: 26px;font-size: 13px;',
  h1: 'line-height: 40px;font-size: 13px;',
  h2: 'line-height: 40px;font-size: 13px;',
  h3: 'line-height: 40px;font-size: 13px;',
  h4: 'line-height: 40px;font-size: 13px;',
  h5: 'line-height: 40px;font-size: 13px;',
  h6: 'line-height: 40px;font-size: 13px;',
  span: 'font-size: 13px;',
  div: 'font-size: 13px;',
  table: 'width: 100% !important; max-width: 100% !important; height: auto !important;',
}
const loadData = async () => {
  try {
    uni.$ie.showLoading();
    const { data } = await getNewsDetail(prevData.value.id);
    detail.value = data;
  } catch (error) {
    console.error(error);
  } finally {
    uni.$ie.hideLoading();
  }
}
onLoad(() => {
  loadData();
});
</script>
<style lang="scss">
.html {
  font-size: 13px;
}
</style>