<!-- 文章 -->

<template>
    <div class="box">
        <h2 class="newstitle">媒体中心</h2>
        <div class="box-content">
            <div class="box-content-One news" v-for="item in g_appDataList" :key="item.id" @click="handleClick(item)">
                <el-container>
                    <el-aside width="200px" class="image-container">
                        <img :src="(item.cover?.indexOf('http') == 0 ? '' : 'http://106.55.102.172:10/prod-api') + item.cover"
                            alt="图片" style="width: 100%;height:100%">
                    </el-aside>
                    <el-container style="text-align: left;">
                        <el-header>
                            <h3>{{ item.title }}</h3>
                        </el-header>
                        <el-main>
                            <el-text line-clamp="1">
                                <span v-html="item.content"></span>
                            </el-text>
                        </el-main>
                        <el-footer style="text-align: right;">{{ item.createTime }}</el-footer>
                    </el-container>
                </el-container>
            </div>
        </div>
        <div class="mb-4">
            <el-button round @click="act_loadMore">更多资讯 > ></el-button>
        </div>
    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getArticleList } from '@/http/api/pages/Article'


/************************************************
 * 全局变量
 * 
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 路由
const g_route = useRoute();
const g_router = useRouter();

// 列表数据
const g_appDataList = ref([])



/************************************************
 * 生命周期函数
 ************************************************/
// 挂载完成
onMounted(() => {
    get_articleList();
})




/************************************************
* 事件处理
* 
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/

const get_articleList = async () => {
    const res = await getArticleList();
    g_appDataList.value = res.data;
}

// 封装到路由
const handleClick = (item) => {
    const queryData = {
        id: item.id,
        path: "/ArticleColumn",
        title: "文章栏目"
    }
    g_router.push({ path: '/ArticleDetails', query: queryData });
};

// 更多资讯
const act_loadMore = () => {
    console.log("更多资讯")
}

/************************************************
 * 获取数据
 * 
 * 格式: get_ + 事件名     例如: get_AppDataList
 ************************************************/



</script>

<style scoped>
.mb-4 {
    margin: 16px;
    text-align: right;
    padding-right: 26px;
}

img {
    width: 100px;
    height: 80px;
    border-radius: 16px;
}

.contentMap {
    margin: 10px;
}

.news {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.text {
    flex: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.newstitle {
    padding-left: 26px;
}

.title {
    max-width: 500px;
    font-weight: bold;
    font-size: 15px;
    text-align: left;
    color: #000;
}

.box {
    text-align: center;
}

.box-content {
    width: 1200px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.box-content-One {
    border: 1px solid #ddd;
    border-radius: 16px;
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.2s;
    /* padding-top: 30px; */
    width: 90%;
}

.box-content-One:hover {
    transform: scale(1.05);
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
</style>