<template>
    <div class="ask-page">
        <div class="left">
            <div class="left-title">
                <img src="./assets/icon01.png" alt="">
                <div class="tit">新闻资讯</div>
                <div class="more" @click="handleToMoreNews">更多 +</div>
            </div>
            <div class="left-main">
                <div class="box3-item" v-for="(news, index) in leftList" :key="index">
                    <div class="left">
                        <img :src="news.newsImage" alt="" />
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <div class="title">{{ news.newsTitle }}</div>
                            <div class="time">{{ news.newsDate + '.' + news.newsOrg }}</div>
                        </div>
                        <div class="right-footer">{{ news.newsContent }}</div>
                    </div>
                </div>

            </div>
        </div>
        <div class="right-box">
            <div class="right-title">
                <img src="./assets/icon02.png" alt="">
                <div class="tit">社交媒体</div>

            </div>
            <div class="right-main">
                <div class="box4-main-item" v-for="(item, index) in rightList" :key="index">
                    <div class="left">
                        <img :src="item.personImage" alt="" />
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <div class="name">{{ item.personName }}</div>
                            <div class="time">{{ item.time + '.' + item.orgName }}</div>
                        </div>
                        <div class="content">{{ item.remarks }}</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
    getSocialMediaInfo, getNews
} from "@/api/scientificFunding/overview";
import router from "@/router"
import image01 from './assets/image01.png'
import image02 from './assets/image02.png'
import image03 from './assets/image03.png'
import image04 from './assets/image04.png'
import image05 from './assets/image05.png'

import title01 from './assets/title01.png'
import title02 from './assets/title02.png'
import title03 from './assets/title03.png'


const leftList = ref([
    {
        id: 1,
        title: '美国NSF寻求建立政企共同资助的研究生奖学金模式',
        content: '美国国家科学基金会（NSF）开始寻求建立与行业合作伙伴共同资助的新研究生奖学金计划...',
        time: '11-4 · 华盛顿邮报',
        image: image01
    },
    {
        id: 2,
        title: '美国NSF投资2.8亿美元支持人工智能项目开发',
        content: '自7月23日白宫发布《赢得人工智能竞赛：美国人工智能行动计划》以来，美国国家科学基...',
        time: '11-4 · 纽约时报',
        image: image02
    },
    {
        id: 3,
        title: '美国NASA资助地球观测和大型望远镜新技术',
        content: '美国国家航空航天局（NASA）先后资助两项任务，以促进地球观测和大型望远镜新技术的...',
        time: '11-3 · 洛杉矶时报',
        image: image03
    },
    {
        id: 4,
        title: '美国NSF、NIH和FDA支持数字医学孪生技术应用开发',
        content: '美国国家科学基金会（NSF）、美国国立卫生研究院（NIH）和美国食品药品监督管理局（F...',
        time: '11-3 · 今日美国',
        image: image04
    },
    {
        id: 5,
        title: '美国NIH拨款推进All of Us研究计划数据集应用',
        content: '美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据...',
        time: '11-2 ·  ​福克斯新闻网',
        image: image05
    }
])

//// 新闻资讯
const handleNews = async () => {
    try {
        const res = await getNews();
        console.log("获取新闻资讯", res);
        if (res.code === 200 && res.data) {
            leftList.value = res.data
        }
    } catch (error) {
        console.error("获取新闻资讯error", error);
    }
};

const rightList = ref([
    {
        id: 1,
        name: '唐纳德·特朗普',
        content: '埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。',
        time: '15:23 · 发布于真实社交',
        title: title01
    },
    {
        id: 2,
        name: '埃隆·马斯克',
        content: '如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。',
        time: '14:49 · 发布于X',
        title: title02
    },
    {
        id: 3,
        name: '塞巴斯蒂安·马拉比',
        content: '提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。',
        time: '11:05 · 发布于X',
        title: title03
    }
])

//// 社交媒体
const handleSocialMediaInfo = async () => {
    try {
        const res = await getSocialMediaInfo();
        console.log("获取社交媒体", res);
        if (res.code === 200 && res.data) {
            rightList.value = res.data
        }
    } catch (error) {
        console.error("获取社交媒体error", error);
    }
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
    const route = router.resolve("/newsBrief");
    window.open(route.href, "_blank");
};
onMounted(async () => {
    handleNews()
    handleSocialMediaInfo()
});
</script>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.ask-page {
    width: 1600px;
    height: 450px;
    display: flex;
    justify-content: space-between;

    .left {
        width: 792px;
        height: 450px;
        margin-right: 16px;
        border-radius: 10px;
        border: 1px solid rgb(234, 236, 238);
        box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        background-color: #fff;

        .left-title {
            width: 792px;
            height: 48px;
            border-bottom: 1px solid rgb(234, 236, 238);
            position: relative;

            img {
                width: 19px;
                height: 19px;
                position: absolute;
                top: 16px;
                left: 21px;
            }

            .tit {
                margin-left: 60px;
                width: 90px;
                height: 48px;
                padding: 11px 0;
                font-size: 20px;
                font-weight: 700;
                font-family: 'Microsoft YaHei';
                line-height: 26px;
                color: rgb(5, 95, 194);
            }

            .more {
                width: 49px;
                height: 24px;
                font-size: 16px;
                font-weight: 400;
                font-family: 'Microsoft YaHei';
                line-height: 24px;
                color: rgb(5, 95, 194);
                position: absolute;
                top: 12px;
                right: 27px;
                cursor: pointer;
            }
        }

        .left-main {
            height: 402px;
            overflow-y: auto;

            padding-top: 6px;

            .box3-item {
                display: flex;
                height: 77px;
                width: 749px;
                margin-left: 21px;
                border-bottom: 1px solid rgba(240, 242, 244, 1);

                .left {
                    width: 72px;
                    height: 48px;
                    margin-top: 15px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .right {
                    width: 657px;
                    margin-left: 20px;

                    .right-top {
                        width: 657px;
                        display: flex;
                        justify-content: space-between;

                        .title {
                            margin-top: 13px;
                            width: 520px;
                            height: 24px;
                            color: rgba(59, 65, 75, 1);
                            font-family: Microsoft YaHei;
                            font-size: 16px;
                            font-weight: 700;
                            line-height: 24px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .time {
                            flex: 1;
                            text-align: right;
                            height: 22px;
                            margin-top: 19px;
                            color: rgba(95, 101, 108, 1);
                            font-family: Microsoft YaHei;
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 22px;
                        }
                    }

                    .right-footer {
                        width: 657px;
                        height: 24px;
                        color: rgba(59, 65, 75, 1);
                        font-family: Microsoft YaHei;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 24px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }

    .right-box {
        width: 792px;
        height: 450px;
        border-radius: 10px;
        border: 1px solid rgb(234, 236, 238);
        box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        background-color: #fff;

        .right-title {
            width: 792px;
            height: 48px;
            border-bottom: 1px solid rgb(234, 236, 238);
            position: relative;

            img {
                width: 19px;
                height: 19px;
                position: absolute;
                top: 16px;
                left: 21px;
            }

            .tit {
                margin-left: 60px;
                width: 90px;
                height: 48px;
                padding: 11px 0;
                font-size: 20px;
                font-weight: 700;
                font-family: 'Microsoft YaHei';
                line-height: 26px;
                color: rgb(5, 95, 194);
            }

            .more {
                width: 49px;
                height: 24px;
                font-size: 16px;
                font-weight: 400;
                font-family: 'Microsoft YaHei';
                line-height: 24px;
                color: rgb(5, 95, 194);
                position: absolute;
                top: 12px;
                right: 27px;
                cursor: pointer;
            }
        }

        .right-main {
            height: 402px;
            overflow-y: auto;
            box-sizing: border-box;
            padding-top: 8px;


            .box4-main-item {
                margin-top: 16px;
                display: flex;
                margin-left: 21px;

                .left {
                    margin-top: 5px;
                    width: 36px;
                    height: 36px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .right {
                    margin-left: 10px;
                    width: 690px;
                    box-sizing: border-box;
                    border: 1px solid rgba(231, 243, 255, 1);
                    background: rgba(246, 250, 255, 1);
                    padding: 10px 15px;

                    .right-top {
                        display: flex;
                        justify-content: space-between;

                        .name {
                            height: 24px;
                            color: rgba(59, 65, 75, 1);
                            font-family: Microsoft YaHei;
                            font-size: 16px;
                            font-weight: 700;
                            line-height: 24px;
                        }

                        .time {
                            height: 30px;
                            color: rgba(95, 101, 108, 1);
                            font-family: Microsoft YaHei;
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 30px;
                        }
                    }

                    .content {
                        color: rgba(59, 65, 75, 1);
                        font-family: Microsoft YaHei;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 24px;
                    }
                }
            }
        }
    }
}
</style>