<template>
  <div class="news-list-bg">
    <div class="news-list" :style="screenWidth > 980 ? 'width: 1180px' : ''">
      <div class="breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item>
            <a @click="openUrl(`/`)"><HomeOutlined /> Home</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <a :href="`/article/${form.categoryId}`">{{ form.categoryName }}</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <span>{{ form.title }}</span>
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <a-card :title="form.title">
        <div v-html="form.content"></div>
      </a-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import {toDateString} from "ele-admin-pro";
import {ref, unref, watch} from "vue";
import {Article} from "@/api/cms/article/model";
import {pageArticle,getArticle} from "@/api/cms/article";
import {useThemeStore} from "@/store/modules/theme";
import {storeToRefs} from "pinia";
import {getAd} from "@/api/cms/ad";
import { RightOutlined } from '@ant-design/icons-vue';
import {useRouter} from "vue-router";
import useFormData from "@/utils/use-form-data";
import {getArticleCategory, listArticleCategory} from "@/api/cms/category";
import {ArticleCategory} from "@/api/cms/category/model";
import { HomeOutlined, UserOutlined } from '@ant-design/icons-vue';
import {openUrl} from "@/utils/common";

const { currentRoute } = useRouter();
const themeStore = useThemeStore();
const { screenWidth, styleResponsive } = storeToRefs(themeStore);
const list = ref<Article[]>([]);
const activeKey = ref('1');
const newsBg3 = ref('');
const articleId = ref<number>(0);
const currentPage = ref(1);
const total = ref();

// 表单数据
const { form,assignFields } = useFormData<Article>({
  categoryId: undefined,
  categoryName: '',
  title: '',
  image: '',
  content: '',
  parentId: undefined,
  parentName: '',
  source: '',
  virtualViews: undefined,
  actualViews: undefined
});

// getAd(253).then(data => {
//   const { images } = data;
//   if(images){
//     newsBg3.value = JSON.parse(images)[0].url;
//   }
// })

const reload = () => {
  // getArticleCategory(categoryId.value).then(data => {
  //   assignFields(data);
  // })
  getArticle(articleId.value).then(data => {
    assignFields(data)
  })
}

watch(
    currentRoute,
    (route) => {
      const { params } = unref(route);
      const { id } = params;
      if (id) {
        articleId.value = Number(id);
      }
      reload();
    },
    { immediate: true }
);
</script>

<style scoped lang="less">
.news-list-bg{
  padding-bottom: 70px;
  .news-list{
    .breadcrumb{
      padding-bottom: 20px;
      padding-left: 5px;
    }
    margin: 0 auto;
    padding: 20px 0;
    .title{
      margin-top: 10px;
      padding-bottom: 20px;
      display: flex;
      align-items: center;
      h4{
        color: #ffffff;
        font-weight: 500;
        font-size: 26px;
      }
      .title-bar{
        width: 6px;
        height: 28px;
        margin-right: 14px;
        background: linear-gradient(to bottom, #b7a381, #e5cc8c);
      }
    }
    .img-list{
      display: flex;
      justify-content: space-between;
      padding-bottom: 30px;
    }
  }
  .title-box{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 120px;
    .title-text {
      font-weight: bold; font-size: 16px;
      color: #333333;
    }
    .title-text:hover{
      color: #ff0000;
    }
    .desc{
      font-size: 14px;
    }
    .actions{
      font-size: 12px;
    }
  }
}
.pagination{
  text-align: center;
  padding: 20px;
}
</style>
