<template>
  <div class="app-container">
    <div class="main">
      <div class="title">{{ detailInfo.title }}</div>
      <div class="time">{{ detailInfo.day }}/{{ detailInfo.month }}/{{ detailInfo.year }}</div>
      <el-divider/>

      <div class="content" v-html="detailInfo.description"></div>
    </div>
  </div>
</template>

<script setup name="InformationDetail">
import { informationDetail } from '@/api/home.js'
import { useRoute } from 'vue-router'

const route = useRoute()

const detailInfo = ref({})

function getInformationDetail () {
  informationDetail({id: route.query.id}).then(res => {
    res.data.year = new Date(res.data.createTime).getFullYear()
    res.data.month = new Date(res.data.createTime).getMonth() + 1
    res.data.month = res.data.month < 10 ? '0' + res.data.month : res.data.month
    res.data.day = new Date(res.data.createTime).getDate()
    res.data.day = res.data.day < 10 ? '0' + res.data.day : res.data.day
    detailInfo.value = res.data
  })
}

getInformationDetail()
</script>

<style scoped lang="scss">
.app-container {
  background-color: #F7F8F9;
  padding: 0 0 90px;
  min-height: 100%;
}

.main {
  width: 1280px;
  margin: 90px auto 0 auto;
  padding: 40px 80px;
  background-color: #FFFFFF;
}

.title {
  font-weight: bold;
  font-size: 40px;
  color: #303233;
  margin-bottom: 15px;
}

.time {
  font-weight: 400;
  font-size: 14px;
  color: #C8CBCC;
}

.content {
  :deep(img) {
    height: auto;
    max-width: 100%;
  }
}
</style>
