<script lang="ts" setup>
import {computed} from "vue";
import {useImageStyles} from '~/composables/useImageStyles';

// 组件属性
interface Props {
  articleData: {
    title: string
    publishDate: string
    category: string
    content: string
    prevArticle: {
      title: string
      url: string
    }
    nextArticle: {
      title: string
      url: string
    }
  }
  loading: boolean
  error: string
}

const props = withDefaults(defineProps<Props>(), {
  articleData: () => ({
    title: '',
    publishDate: '',
    category: '',
    content: '',
    prevArticle: {
      title: '',
      url: '#'
    },
    nextArticle: {
      title: '',
      url: '#'
    }
  }),
  loading: true,
  error: ''
})

// 使用传入的数据
const articleData = computed(() => props.articleData)
const loading = computed(() => props.loading)
const error = computed(() => props.error)

// 热门标签
const hotTags = ref([
  '景区单车', '政务平台', '共享经济', '共享汽车APP开发', '共享类',
  '共享汽车软件开发', '共享雨伞APP开发', '共享雨伞软件开发', '共享货车开发'
])

// 重新加载页面方法
const reloadPage = () => {
  if (typeof window !== 'undefined') {
    window.location.reload()
  }
}

// 使用图片样式处理 composable
const {initImageStyles} = useImageStyles(
    () => props.articleData?.content || '',
    '.article-content',
    {
      maxWidth: '100%',
      margin: '15px 0',
      display: 'block',
      boxSizing: 'border-box'
    }
)

// 使用 Nuxt 的 useHead 来管理页面资源
useHead({
  title: computed(() => articleData.value?.title ? `${articleData.value.title} - 创特科技` : '文章详情 - 创特科技'),
  meta: [
    {
      name: 'description',
      content: computed(() => articleData.value?.content ? articleData.value.content.substring(0, 160) + '...' : '创特科技专业文章')
    },
    {name: 'keywords', content: '创特科技,技术文章,共享单车,软件开发,解决方案'}
  ],
  link: [
    {rel: 'stylesheet', href: '/news/bootstrap.min.css'},
    {rel: 'stylesheet', href: '/news/main22.css'},
    {rel: 'stylesheet', href: '/news/new_index.css'},
    {rel: 'stylesheet', href: '/news/float.css'},
    {rel: 'stylesheet', href: '/news/animate.min.css'}
  ],
  script: [

    {src: '/news/float.js', defer: true}
  ]
})

onMounted(() => {
  // 初始化图片样式处理
  initImageStyles()
})
</script>

<template>
  <view>
    <!-- 顶部 -->
    
    <!-- 文章正文 -->
    <section class="container" style="margin-top: 88px;">
      <div class="row">
        <!-- 左边部分 -->
        <div class="col-md-8 wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
          <!-- 加载状态 -->
          <div v-if="loading" class="loading-container" style="text-align: center; padding: 50px;">
            <div
                class="loading-spinner"
                style="border: 4px solid #f3f3f3; border-top: 4px solid #ff8200; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;"/>
            <p style="margin-top: 20px; color: #666;">正在加载文章...</p>
          </div>

          <!-- 错误提示 -->
          <div v-else-if="error" class="error-container" style="text-align: center; padding: 50px; color: #ff6b6b;">
            <p>{{ error }}</p>
            <button
                style="margin-top: 20px; padding: 10px 20px; background: #ff8200; color: white; border: none; border-radius: 4px; cursor: pointer;"
                @click="reloadPage">
              重新加载
            </button>
          </div>

          <!-- 文章内容 -->
          <div v-else class="row">
            <div class="col-xs-12">
              <h2>{{ articleData?.title || '暂无标题' }}</h2>
              <p id="label" style="border-bottom: 1px solid #ddd; margin-top: 20px;">
                <span>{{ articleData?.publishDate || '暂无日期' }}</span>
                <span class="pull-right">分类：{{ articleData?.category || '暂无分类' }}</span>
              </p>
              <div class="article-content" v-html="articleData?.content || '暂无内容'"/>
            </div>
          </div>

          <!-- 上一篇/下一篇 -->
          <div class="nextorpre" style="margin-top: 38px; border-top: 1px solid #ddd; padding-top: 8px;">
            <li class="pull-left">上一篇：
              <a :href="articleData?.prevArticle?.url || '#'">{{ articleData?.prevArticle?.title || '暂无上一篇' }}</a>
            </li>
            <li class="pull-right">下一篇：
              <a :href="articleData?.nextArticle?.url || '#'">{{ articleData?.nextArticle?.title || '暂无下一篇' }}</a>
            </li>
          </div>
          <br><br><br><br>
        </div><!--左边部分-->

        <!-- 右边部分 -->
        <aside class="col-md-4" style="border-left: 1px solid #eee; background: #fefefe;">
          <!-- 热门标签 -->
          <div
              class="widget tags wow fadeInRight animated"
              style="margin-bottom: 30px !important; visibility: visible; animation-name: fadeInRight;">
            <h4>热门标签</h4>
            <ul class="tag-cloud">
              <li v-for="tag in hotTags" :key="tag">
                <a class="btn btn-xs" href="#" @click.prevent>{{ tag }}</a>
              </li>
            </ul>
          </div><!-- 热门标签 -->

          <!-- 推荐文章 -->
          <div
              class="sy_news animated" data-wow-delay="200ms"
              style="visibility: visible; animation-delay: 200ms; animation-name: fadeInDown;">
            <RecommendedArticles
                :articles-per-type="3"
                :show-title="false"
                :show-types="['solution', 'developKnowledge', 'industryTrend']"
            />
          </div>
        </aside><!-- 右边部分 -->

      </div><!--/.row-->
    </section><!--/#blog-->
  </view>
</template>

<style scoped>
/* 文章内容样式 */
.article-content {
  margin-top: 20px;
  line-height: 1.8;
  font-size: 14px;
  color: #333;
  overflow: hidden; /* 防止内容溢出 */
  word-wrap: break-word; /* 长单词换行 */
}

.article-content p {
  margin-bottom: 15px;
}


/* 响应式调整 */
@media (max-width: 1024px) {
  .col-md-8, .col-md-4 {
    width: 100%;
    margin-bottom: 20px;
  }


}


/* 标签云样式 */
.tag-cloud li {
  display: inline-block;
  margin: 2px;
}

.tag-cloud a {
  display: inline-block;
  padding: 4px 8px;
  background-color: #f5f5f5;
  color: #666;
  text-decoration: none;
  border-radius: 3px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.tag-cloud a:hover {
  background-color: #ff8200;
  color: #fff;
}

/* 推荐文章样式 */
.sy_news ul li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.sy_news ul li:last-child {
  border-bottom: none;
}

.sy_news ul li a {
  color: #333;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  display: block;
  transition: color 0.3s ease;
}

.sy_news ul li a:hover {
  color: #ff8200;
}

.sy_news ul li a span {
  color: #999;
  font-size: 12px;
}

/* 上一篇下一篇样式 */
.nextorpre {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nextorpre li {
  list-style: none;
  margin: 0;
}

.nextorpre a {
  color: #ff8200;
  text-decoration: none;
}

.nextorpre a:hover {
  text-decoration: underline;
}

/* 加载动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 加载状态样式 */
.loading-container {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 错误状态样式 */
.error-container {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

