<template>
  <el-scrollbar class="analysis_detail">
    <div class="title" v-text="raw.title || ''"></div>
    <div class="subtitle">
      <el-icon :size="14"><Clock /></el-icon>
      {{ raw.publishTime }}
      <span style="vertical-align: middle">来源:</span>
      <span
        style="color: #22ac38; vertical-align: middle"
        v-text="raw.sourceWebsite"
      >
      </span>
    </div>
    <div style="width: 80%;margin: 0 auto;" v-html="raw.content"></div>
  </el-scrollbar>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { getDetail } from '@/api/index';
import { ref } from 'vue';

const route = useRoute();

const raw = ref({});
getDetail({
  data: {
    offset: route.query.offset,
  },
}).then(r => {
  raw.value = r || {};
  document.title = raw.value.title;
});
</script>

<style>
.analysis_detail {
  padding: 2em 50px;
  font-size: 16px;
}
.analysis_detail * {
  line-height: 1.5em;
  text-indent: 2em;
}
.analysis_detail img {
  width: 80%;
  display: block;
  margin: 3px auto;
}
.analysis_detail .title {
  font-size: 16px;
  font-weight: 600;
  height: 60px;
  line-height: 60px;
  padding-left: 8px;
  text-align: center;
}

.analysis_detail .subtitle {
  border-bottom: 1px solid #f5f5f5;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  margin-bottom: 2em;
  text-align: center;
}
</style>
