<template>
  <a-card :header-style="{ backgroundColor: ' #7786BC', borderRadius: '10px 10px 0 0' }">
    <template #title>
      <div class="title">详情信息</div>
    </template>
    <div class="content" v-html="format_content"></div>
    <a-empty v-if="!detail_content.length"></a-empty>
  </a-card>
</template>

<script setup>
import { computed } from 'vue';
import { formatContent } from '../../utils/format-content';
const props = defineProps({
  detail_content: {
    type: String,
    default: ''
  }
});
const format_content = computed(() => {
  return formatContent(props.detail_content);
});
</script>
<style scoped>
.arco-card {
  height: 350px;
  margin-bottom: 10px;
  border-radius: 10px 10px 0 0;
}
.arco-list-item:hover {
  background: #3d68e1;
  color: #fff;
}
.title {
  color: #fff;
}
:deep(.arco-card-body) {
  height: calc(100% - 85px);
  padding: 13px 20px;
  overflow-y: auto;
}
.content {
  line-height: 1.5;
}
</style>
