<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.slice(0, 5)" :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>
        <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 { ref, onMounted } from "vue";
import router from '@/router'
import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction'
import CommonPrompt from "../../commonPrompt/index.vue";

import defaultNews from "../../assets/images/default-icon-news.png"
import defaultAvatar from "../../assets/images/default-icon1.png"
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'

// 合作限制-查询社交媒体接口
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} · 发布于${item.orgName}`;
				return {
					id: item.personId,
					name: item.personName,
					content: item.remarks,
					time: formattedTime,
					image: item.personImage
				}
			});
		}
	} catch (error) {
		console.error("获取合作限制社交媒体数据失败:", error);
	}
};


// 合作限制-查询新闻资讯接口
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
			}));
		}
	} catch (error) {
		console.error("获取合作限制新闻资讯数据失败:", error);
	}
};


const leftList = ref([])

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>