<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 v-for="item in leftList" :key="item.id" class="main-item" @click="handleToNewsDetail(item)">
                    <img :src="item.image || defaultNews" alt="" @error="e => e.target.src = defaultNews">
                    <div class="item-content">
                        <div class="title">
                            <CommonPrompt :content="item.title">
                                {{ item.title }}
                            </CommonPrompt>
                        </div>
                        <div class="content">
                            <CommonPrompt :content="item.content">
                                {{ item.content }}
                            </CommonPrompt>
                        </div>
                        <div class="time">{{ item.time }}</div>
                    </div>
                </div>
            </div>
        </div> -->
        <NewsList :newsList="leftList" @item-click="item => gotoNewsDetail(item.id)" @more-click="handleToMoreNews"
            img="image" title="title" content="content" from="from" />
        <MessageBubble :messageList="rightList" imageUrl="personImage" @more-click="handleToSocialDetail"
            @person-click="handleToSocialDetail" name="name" content="content" source="orgName" image-url="image" />
        <!-- <div class="right">
            <div class="right-title">
                <img src="./assets/icon02.png" alt="">
                <div class="tit">社交媒体</div>
            </div>
            <div class="right-main">
                <div v-for="(item, index) in rightList.slice(0, 3)" :key="item.id" class="social-item"
                    @click="handleToSocialDetail(item)">
                    <img :src="item.image || defaultAvatar" alt="" @error="e => e.target.src = defaultAvatar">
                    <div class="social-item-main" :style="{ backgroundImage: `url(${socialConfig[index].bg})` }">
                        <div class="cl1">{{ item.name }}</div>
                        <div class="cl2">{{ item.content }}</div>
                        <div class="cl3">{{ item.time }}</div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script setup>
import NewsList from "@/components/base/newsList/index.vue";
import { ref, onMounted } from "vue";
import router from '@/router'
import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction'
import title01 from './assets/title01.png'
import title02 from './assets/title02.png'
import title03 from './assets/title03.png'
import title01bg from './assets/title01bg.png'
import title02bg from './assets/title02bg.png'
import title03bg from './assets/title03bg.png'
import { useGotoNewsDetail } from '@/router/modules/news';
const gotoNewsDetail = useGotoNewsDetail()

// 合作限制-查询社交媒体接口
const getCoopRestrictionSocialData = async () => {
    try {
        const res = await getCoopRestrictionSocial({ moduleId: "0106" });
        if (res && res.code === 200) {
            rightList.value = (res.data || []).map(item => {
                const date = new Date(item.time);
                const y = date.getFullYear();
                const m = (date.getMonth() + 1).toString().padStart(2, '0');
                const d = date.getDate().toString().padStart(2, '0');
                const hh = date.getHours().toString().padStart(2, '0');
                const mm = date.getMinutes().toString().padStart(2, '0');
                const formattedTime = `${y}-${m}-${d} ${hh}:${mm} `;
                return {
                    id: item.personId,
                    name: item.personName,
                    content: item.remarks,
                    time: formattedTime,
                    orgName: item.orgName,
                    image: item.personImage
                }
            });
        }
    } catch (error) {
        console.error("获取合作限制社交媒体数据失败:", error);
    }
};
const leftList = ref([])

// 合作限制-查询新闻资讯接口
const getCoopRestrictionNewsData = async () => {
    try {
        const res = await getCoopRestrictionNews({ moduleId: "0106" });
        if (res && res.code === 200) {
            leftList.value = (res.data || []).map(item => ({
                id: item.newsId,
                title: item.newsTitle,
                content: item.newsContent,
                time: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`,
                image: item.newsImage,
                from: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`,
            }));
        }
    } catch (error) {
        console.error("获取合作限制新闻资讯数据失败:", error);
    }
};




const rightList = ref([])

const socialConfig = [
    { icon: title01, bg: title01bg },
    { icon: title02, bg: title02bg },
    { icon: title03, bg: title03bg }
]

// 查看更多新闻资讯
const handleToMoreNews = () => {
    const route = router.resolve("/newsBrief");
    window.open(route.href, "_blank");
};
// 查看新闻资讯详情
const handleToNewsDetail = (item) => {
    // const route = router.resolve({
    //     path: "/newsAnalysis",
    //     query: {
    //         newsId: item.id
    //     }
    // });
    // window.open(route.href, "_blank");
}
// 查看社交媒体详情
const handleToSocialDetail = (item) => {
    const route = router.resolve({
        path: "/characterPage",
        query: {
            personId: item.id
        }
    });
    window.open(route.href, "_blank");
}
onMounted(() => {
    // 合作限制-查询新闻资讯数据
    getCoopRestrictionNewsData()
    // 合作限制-查询社交媒体数据
    getCoopRestrictionSocialData()
})

</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: 80px;
                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 {
            width: 792px;
            height: 402px;
            padding: 20px 22px 21px 21px;

            .main-item {
                width: 749px;
                height: 64px;
                display: flex;
                border-bottom: 1px solid rgba(240, 242, 244, 1);
                margin-bottom: 14px;

                &:hover {
                    background-color: #f9f9f9;
                }

                img {
                    width: 72px;
                    height: 48px;
                    margin-right: 20px;
                    cursor: pointer;
                }

                .item-content {
                    width: 657px;
                    height: 50px;
                    position: relative;

                    .title {
                        width: 480px;
                        font-size: 16px;
                        font-weight: 700;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                        cursor: pointer;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    .content {
                        width: 100%;
                        font-size: 16px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                        cursor: pointer;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    .time {
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        font-size: 14px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 22px;
                        color: rgb(95, 101, 108);
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .right {
        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: 80px;
                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 {
            width: 792px;
            height: 402px;
            padding: 23px 30px 25px 21px;
            overflow: auto;

            .social-item {
                width: 740px;
                margin-bottom: 16px;
                display: flex;
                cursor: pointer;

                img {
                    width: 36px;
                    height: 36px;
                    margin-right: 8.5px;
                    border-radius: 50%;
                }

                .social-item-main {
                    width: 695.6px;
                    padding: 11px 14px 12px 22.5px;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    position: relative;

                    .cl1 {
                        font-size: 16px;
                        font-weight: 700;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                        margin-bottom: 5px;
                    }

                    .cl2 {
                        font-size: 16px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 24px;
                        color: rgb(59, 65, 75);
                    }

                    .cl3 {
                        position: absolute;
                        top: 11px;
                        right: 14px;
                        font-size: 16px;
                        font-weight: 400;
                        font-family: 'Microsoft YaHei';
                        line-height: 30px;
                        color: rgb(95, 101, 108);
                    }
                }
            }
        }
    }
}
</style>