<template>
  <div v-bind="$attrs" class="article-detail">
    <div class="article-back" @click="emit('back')">
      <div class="el-icon-arrow-left"></div>
      <div class="text">返回</div>
    </div>
    <div class="article-time">{{ formatDate(data.start_time) }}</div>
    <h1 class="article-title">{{ data.title }}</h1>
    <div class="article-content" v-html="data.content"></div>
  </div>
</template>

<script setup>
import httpRequest from '@/utils/httpRequest'

const route = useRoute()
const emit = defineEmits(['back', 'loaded'])

const data = ref({})

const formatDate = (value) => {
  const date = new Date(value * 1000)
  return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}

// Fetch article detail
onMounted(async () => {
  try {
    const res = await httpRequest.get(`/api/cms/api/v1/article/${route.params.id}/detail`)
    data.value = res.data
    emit('loaded', data.value)
  } catch (error) {
    console.error('Failed to fetch article detail:', error)
  }
})
</script>

<style lang="scss">
.is-pc {
  .article-detail {
    width: 1300px;
    margin: 30px auto;
  }
  .article-back {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #999;
    cursor: pointer;
  }
  .article-time {
    font-size: 16px;
    line-height: 100%;
    margin: 35px 0 16px;
    color: #999999;
  }
  .article-title {
    font-size: 32px;
    font-weight: bold;
    color: #141414;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 10px;
  }
  .article-content {
    padding-top: 25px;
    font-size: 14px;
    line-height: 28px;
    color: #333;
    img {
      max-width: 100%;
    }
  }
}
.is-h5 {
  .article-back {
    display: flex;
    align-items: center;
    font-size: 0.1rem;
    cursor: pointer;
  }
  .article-time {
    margin-top: 0.15rem;
    font-size: 0.1rem;
    color: #9b9b9b;
  }
  .article-title {
    margin: 0.1rem 0;
    padding: 0 0 0.1rem;
    font-size: 0.14rem;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #e6e6e6;
  }
  .article-content {
    font-size: 0.12rem;
    line-height: 0.24rem;
    img {
      max-width: 100%;
    }
  }
}
</style>
