<template>
<div class="app-container home">
    <div class="page-content" >
        <div class="title-bar" @click="back" >
            <svg-icon icon-class="back" style="width: 30px;height: 30px;margin-right: 20px;" />
            <span style="font-size: 32px;font-weight: 700;color: rgba(51, 51, 51, 1);" >{{ t('common.back') }}</span>
        </div>
        <div v-if="detail" style="display: flex;flex-direction: column;align-items: center;padding: 0 30px;">
            <divc class="news-title">{{ detail.summarize }}</divc>
            <div class="news-content" v-html="detail.content" ></div>
        </div>
    </div>
</div>
</template>

<script setup name="ToolsDetail">
import { useLocale } from 'element-plus'
import { useRoute } from 'vue-router';
import { queryNewsDetail } from '@/api/news'

let { proxy } = getCurrentInstance();
const { t } = useLocale()
const route = useRoute();
const detail = ref(null)

const id = route.params.id;

queryNewsDetail({
    id: id
}).then(resp => {
    if (resp.data.content) {
        resp.data.content = handleImages(resp.data.content)
    }
    detail.value = resp.data
})

function handleImages(htmlContent) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(htmlContent, 'text/html');
    var images = doc.getElementsByTagName('img');
    Array.from(images).forEach(function(img) {
    var width = img.getAttribute("width");
    if (!isNaN(parseFloat(width)) && parseFloat(width) > 200) {
        img.setAttribute('width', '100%');
        img.setAttribute('height', 'auto');
    }
    });
    return doc.documentElement.innerHTML;
}

function back() {
  if (proxy.$route.query.noGoBack) {
    proxy.$router.push({ path: "/" });
  } else {
    proxy.$router.go(-1);
  }
}
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.title-bar {
    display: flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 20px;
    cursor: pointer;
}

.news-title {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0px;
    color: rgba(51, 51, 51, 1);
}

.news-content {
    width: 100%;
}
</style>