<template>
	<div class="think-tank-person">
		<div class="header">
			<div class="avatar">
				<el-avatar :size="160" shape="circle" :src="characterInfo.imageUrl" />
			</div>
			<div class="info">
				<p class="name-cn">{{ characterInfo.name }}</p>
				<p class="name-en">{{ characterInfo.ename }}</p>
				<div class="introduction">
					<p>{{ characterInfo.description }}</p>
				</div>
				<div class="domain">
					<AreaTag v-for="item in characterInfo.industryList" :key="item.industryId"
						:tag-name="item.industryName" />
				</div>
			</div>
		</div>
		<div class="info-divide">
			<div v-for="item in info" :key="item" :class="{ active: item === infoActive }" @click="infoActive = item">
				{{ item }}
			</div>
		</div>
		<div class="info-content" v-show="infoActive === '人物详情'">
			<div class="left">
				<AnalysisBox title="核心观点" width="1064px" height="300px" :show-all-btn="false" class="left-top">
					<template #header-btn>
						<el-select v-model="numActive" class="tab-select" :teleported="true" @change="handleChangeYear">
							<el-option label="全部" value="全部" />
							<el-option v-for="item in num" :key="item" :label="item" :value="item" />
						</el-select>
					</template>
					<div class="echarts" > <WordCloudChart v-if="wordLoading" :data="characterView" /></div>
				</AnalysisBox>
				<AnalysisBox title="最新动态" width="1064px" height="1617px" :show-all-btn="false" class="left-bottom">
					<template #header-btn>
						<div class="input"><input type="checkbox" v-model="isChecked" @change="handleChange" />只看涉华动态
						</div>
					</template>
					<div class="main">
						<div v-for="item in CharacterLatestDynamic" :key="item" class="main-item">
							<div class="time">
								<div class="year">{{ item.time.split("-")[0] }}</div>
								<div class="date">{{ item.time.split("-")[1] + "月" + item.time.split("-")[2] + "日" }}
								</div>
							</div>
							<div class="image">
								<img src="./assets/type1.png" alt="" v-if="item.remarks === true" /><img
									src="./assets/type2.png" alt="" v-else />
							</div>
							<div class="content">
								<div
									:class="{ 'content-type1': item.remarks === true, 'content-type2': item.remarks === false }">
									<p v-if="item.remarks === true" class="content-title1">
										{{ item.content }}
									</p>
									<p v-else class="content-title2">
										{{ item.title }}
									</p>
									<p v-if="item.remarks === true" class="content-title-en">{{ item.econtent }}</p>
								</div>
								<p v-if="item.remarks === false" class="content-contentcontent">{{ item.content }}</p>
								<div class="content-tag">
									<div style="display: flex; flex-wrap: wrap; gap: 8px;">
										<AreaTag v-for="tag in item.industryList" :key="tag" :tag-name="tag.industryName"
											@click="handleClickTag(tag.industryName)" />
									</div>
									<div class="origin">来源：{{ item.orgName }}</div>
								</div>
							</div>
						</div>
						<div class="line-test"></div>
					</div>
					<div class="pagination">
						<div class="total">{{ `共 ${total} 项` }}</div>
						<el-pagination @current-change="handleCurrentChange" :page-size="pageSize"
							:current-page="currentPage" background layout="prev, pager, next" :total="total"
							class="custom-pagination" />
					</div>
				</AnalysisBox>
			</div>
			<div class="right" >
				<AnalysisBox title="基本信息" width="520px" :height="boxHeight" :show-all-btn="false" class="right-top" v-if="characterBasicInfo ">
					<div class="main-content">
						<div class="baseInfo">
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">出生日期：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.birthday }}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">现任职位：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.positionTitle }}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">兼任职位：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.sideJob }}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">政策倾向：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.political }}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">国籍：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.country }}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">教育背景：</div>
								<div class="baseInfo-item-content long"
									v-for="item in characterBasicInfo.educationList">
									{{ item.school + '--' + item.major }}<br>
								</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">研究领域：</div>
								<div class="baseInfo-item-content longlong">
									<span class="span"
										v-for="item in characterBasicInfo.industryList">{{ item.industryName }}</span>
								</div>
							</div>
						</div>
						<div class="company">
							<div class="company-title">社交媒体</div>
							<div class="company-content">
								<div v-for="item in characterBasicInfo.organizationList" :key="item"
									class="company-item">
									<img :src="item.imageUrl ? item.imageUrl : DefaultIcon2" alt="" />
									<div>
										<div class="company-cn">{{ item.name }}</div>
										<div class="company-name">{{ item.ename }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
				<ResumeCard title="政治履历" :list="CharacterResume" @download="handleDownload" @collect="handleCollect" />
			</div>
		</div>
		<HistoricalProposal v-if="infoActive === '成果报告'" />
		<CharacterRelationships v-if="infoActive === '人物关系'" />
		<RelevantSituation v-if="infoActive === '相关情况'" />
		<el-dialog v-model="dialogVisible" width="761px" class="viewpoint-dialog" :modal="false" :draggable="true"
			:lock-scroll="false">
			<template #header>
				<div class="viewpoint-header">
					<div class="viewpoint-title">领域观点</div>
				</div>
			</template>
			<div class="viewpoint-body">
				<div class="viewpoint-body-title">#人工智能</div>
				<div v-for="item in dialogData" :key="item.id" class="viewpoint-item">
					<img :src="item.img" alt="" />
					<div class="viewpoint-item-content">
						<div class="viewpoint-item-name">{{ item.name }}</div>
						<div class="viewpoint-item-desc">{{ item.content }}</div>
						<div class="viewpoint-item-job">{{ item.job }}</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, onMounted,computed } from "vue";
import setChart from "@/utils/setChart";
import CharacterRelationships from "./components/characterRelationships/index.vue";
import RelevantSituation from "./components/relevantSituation/index.vue";
import HistoricalProposal from "./components/historicalProposal/components/NewsTracker.vue";
import getWordCloudChart from "../../utils/worldCloudChart";
import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
import {
	getCharacterGlobalInfo,
	getCharacterBasicInfo,
	getCharacterView,
	getCharacterLatestDynamic,
	getCharacterResume,
	getCharacterFieldView
} from "@/api/characterPage/characterPage.js";

import Musk from "./assets/Musk.png";
import cp1 from "./assets/cp1.png";
import cp2 from "./assets/cp2.png";
import ResumeCard from "./components/Resume.vue";
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import AreaTag from '@/components/base/AreaTag/index.vue';

import img1 from "./assets/img1.png";
import img2 from "./assets/img2.png";
import img3 from "./assets/img3.png";
import img4 from "./assets/img4.png";
import img5 from "./assets/img5.png";

import DefaultIcon1 from '@/assets/icons/default-icon1.png'
import DefaultIcon2 from '@/assets/icons/default-icon2.png'

import { useRoute } from 'vue-router';
const route = useRoute();
const personId = ref(route.query.personId || "Y000064");
const boxHeight = computed(() => { 
	if(characterBasicInfo.value.organizationList==undefined) return '625px'
	if(characterBasicInfo.value.organizationList.length==0) return '425px'
	if(characterBasicInfo.value.organizationList.length<=2) return '525px'
	return '625px'
})
const getProxyUrl = (url) => {
	if (!url) return "";
	const urlStr = String(url);
	if (!urlStr.startsWith('http') || urlStr.includes('images.weserv.nl') || urlStr.includes('localhost') || urlStr.includes('127.0.0.1')) {
		return url;
	}
	const cleanUrl = urlStr.replace(/^https?:\/\//i, '');
	return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};

const characterInfo = ref({});

const getCharacterGlobalInfoFn = async () => {
	const params = {
		personId: personId.value
	};
	try {
		const res = await getCharacterGlobalInfo(params);
		if (res.code === 200) {
			console.log("人物全局信息", res);
			if (res.data) {
				characterInfo.value = res.data;
			}
		}
	} catch (error) {

	}

};

const characterBasicInfo = ref({});
const getCharacterBasicInfoFn = async () => {
	const params = {
		personId: personId.value
	};
	try {
		const res = await getCharacterBasicInfo(params);
		if (res.code === 200) {
			console.log("人物基本信息", res);
			if (res.data) {
				characterBasicInfo.value = res.data;
			}
		}
	} catch (error) {
		console.error(error);
	}
};
const wordLoading=ref(false)
const characterView = ref({});
const getCharacterViewFn = async () => {
	const params = {
		personId: personId.value,
		
	};
	if(numActive.value!='全部'){
		params['year']=numActive.value 
	}
	wordLoading.value=false
	try {
		const res = await getCharacterView(params);
		if (res.code === 200) {
			console.log("人物观点", res);
			if (res.data) {
				characterView.value = res.data.map(item => {
					return {
						name: item.option,
						value: item.count
					};
				});
			}
			wordLoading.value=true
		}
	} catch (error) {

	}

};

const handleCharacterView = async () => {
	await getCharacterViewFn();
	// const wordCloudChart = getWordCloudChart(characterView.value);
	// setChart(wordCloudChart, "wordCloudChart");
};

const handleChangeYear = (value) => {
    numActive.value = value;
    characterView.value = [];
    handleCharacterView();
};

const CharacterFieldView = ref({});
const getCharacterFieldViewFn = async () => {
	const params = {
		areaId: window.sessionStorage.getItem("areaId") || "20",
	};
	try {
		const res = await getCharacterFieldView(params);
		if (res.code === 200) {
			console.log("领域观点", res);
			if (res.data) {
				CharacterFieldView.value = res.data;
			}
		}
	} catch (error) {

	}

};

const isChecked = ref(false);
const related = ref('N');

const handleChange = event => {
	if (isChecked.value) {
		related.value = 'Y';
	} else {
		related.value = 'N';
	}
	getCharacterLatestDynamicFn();
	console.log(related.value);
};

const currentPage = ref(1);
const handleCurrentChange = page => {
	currentPage.value = page;
	getCharacterLatestDynamicFn();
};

const CharacterLatestDynamic = ref({});
const total = ref(0);
const pageSize = ref(7);
const loading = ref(false);
const abortController = ref(null);
const getCharacterLatestDynamicFn = async () => {
	if (abortController.value) {
		abortController.value.abort();
	}
	abortController.value = new AbortController();

	loading.value = true;

	const params = {
		personId: personId.value,
		cRelated: related.value,
		currentPage: currentPage.value - 1,
		pageSize: pageSize.value
	};

	try {
		const res = await getCharacterLatestDynamic(params, abortController.value.signal);
		console.log("最新动态", res);
		if (res.code === 200) {
			if (res.data && res.data.content) {
				CharacterLatestDynamic.value = res.data.content.map(item => ({
					title: item.title,
					content: item.content,
					econtent: item.econtent,
					time: item.time,
					industryList: item.industryList || ["人工智能"],
					orgName: item.orgName,
					remarks: item.remarks
				}));
				total.value = res.data.totalElements;
			} else {
				CharacterLatestDynamic.value = [];
				total.value = 0;
			}
		} else {
			CharacterLatestDynamic.value = [];
			total.value = 0;
		}
		loading.value = false;
	} catch (error) {
		if (error.name !== "AbortError") {
			console.error(error);
			loading.value = false;
		}
	}

};

const CharacterResume = ref({});
const getCharacterResumeFn = async () => {
	const params = {
		personId: personId.value
	};
	try {
		const res = await getCharacterResume(params);
		if (res.code === 200) {
			console.log("人物职业履历", res);
			if (res.data) {
				CharacterResume.value = res.data;
			}
		}
	} catch (error) {

	}

};

const handleDownload = () => { };
const handleCollect = () => { };

onMounted(() => {
	getCharacterGlobalInfoFn();
	getCharacterBasicInfoFn();
	getCharacterLatestDynamicFn();
	getCharacterResumeFn();
	getCharacterFieldViewFn();
	handleCharacterView();
});

const info = ref(["人物详情", "成果报告", "人物关系" ]);
// const info = ref(["人物详情", "成果报告", "人物关系", "相关情况"]);
const infoActive = ref("人物详情");
const num = ref(["2026","2025", "2024", "2023", "2022", "2021" ]);
const numActive = ref("全部");



const dialogVisible = ref(false);
const dialogData = ref([]);
const handleClickTag = tag => {
	dialogVisible.value = true;
};

const companyList = ref([
	{
		id: 1,
		cn: "LinkedIn",
		name: "@BarryPavel",
		logo: cp1
	},
	{
		id: 2,
		cn: "Twitter/X",
		name: "@BarryPavel",
		logo: cp2
	}
]);
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
:deep(.wrapper-main){
	margin-top: 15px;
}
.think-tank-person {
	width: 1600px;
	margin: 0 auto;
	padding-bottom: 50px;

	.header {
		width: 1600px;
		height: 200px;
		margin: 16px auto;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
		padding: 20px;
		display: flex;
		align-items: center;

		.avatar {
			width: 160px;
			height: 160px;
			margin-right: 24px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.info {
			flex: 1;

			.name-cn {
				font-size: 32px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 42px;
				color: rgb(59, 65, 75);
				margin-bottom: 8px;
			}

			.name-en {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(59, 65, 75);
				margin-bottom: 6px;
			}

			.introduction {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(59, 65, 75);
				margin-bottom: 6px;
			}

			.domain {
				display: flex;
				flex-wrap: wrap;
				gap: 8px;
			}
		}
	}

	.info-divide {
		width: 1600px;
		height: 64px;
		margin: 16px auto;
		background-color: rgba(255, 255, 255, 0.65);
		border-radius: 10px;
		box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
		padding: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		div {
			width: 530px;
			height: 54px;
			text-align: center;
			font-size: 20px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 54px;
			color: rgb(59, 65, 75);
			border-radius: 10px;
			cursor: pointer;

			&:hover {
				background: rgba(231, 243, 255, 1);
			}
		}

		.active {
			font-size: 24px;
			font-weight: 700;
			font-family: "Microsoft YaHei";
			line-height: 54px;
			color: rgb(5, 95, 194);
			background-color: rgba(231, 243, 255, 1);
			border: 2px solid rgba(174, 214, 255, 1);
		}
	}

	.info-content {
		width: 1600px;
		height: 1933px;
		margin-bottom: 50px;
		margin: 16px auto;
		display: flex;

		.left {
			width: 1064px;
			height: 100%;
			margin-right: 16px;

			.left-top {
				margin-bottom: 16px;
			}

		 

			.echarts {
				width: 100%;
				height: 200px;
				box-sizing: border-box;
			}

			.input {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(132, 136, 142);

				input {
					margin-right: 8px;
				}
			}

			.main {
				width: 1064px;
				height: 1435px;
				box-sizing: border-box;
				padding: 0 50px 0 24px;
				position: relative;
				z-index: 110;

				.main-item {
					width: 100%;
					margin-bottom: 40px;
					display: flex;

					.time {
						width: 77px;
						box-sizing: border-box;
						margin-right: 20px;
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.year {
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							color: rgb(5, 95, 194);
							line-height: 24px;
						}

						.date {
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							color: rgb(5, 95, 194);
							line-height: 24px;
						}
					}

					.image {
						margin-right: 20px;

						img {
							width: 24px;
							height: 24px;
						}
					}

					.content {
						flex: 1;

						.content-type1 {
							background-color: rgba(246, 250, 255, 1);
							border-radius: 10px;
							border: 1px solid rgb(234, 236, 238);
							padding: 12px 14px 12px 15px;

							.content-title1 {
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								color: rgb(59, 65, 75);
								line-height: 24px;
								padding-bottom: 12px;
								border-bottom: 1px solid rgb(234, 236, 238);
								cursor: pointer;
							}

							.content-title-en {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								color: rgb(59, 65, 75);
								line-height: 24px;
								padding-top: 12px;
								cursor: pointer;
							}
						}

						.content-type2 {
							.content-title2 {
								font-size: 20px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								color: rgb(59, 65, 75);
								line-height: 26px;
								padding-bottom: 8px;
								cursor: pointer;
							}
						}

						.content-contentcontent {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							color: rgb(95, 101, 108);
							line-height: 24px;
							margin-bottom: 8px;
							cursor: pointer;
						}

						.content-tag {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.origin {
								font-size: 14px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 22px;
								color: rgb(132, 136, 142);
								cursor: pointer;
							}
						}
					}
				}

				.line-test {
					position: absolute;
					top: 10px;
					left: 109px;
					height: 1300px;
					border: 1px solid rgb(230, 231, 232);
					z-index: -1;
				}
			}

			.pagination {
				width: 100%;
				height: 76px;
				margin: 0 auto;
				display: flex;
				padding: 0 31px 0 36px;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid rgb(234, 236, 238);

				.total {
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					color: rgb(59, 65, 75);
				}

				:deep(.custom-pagination) {
					display: flex;
					align-items: center;
				}

				:deep(.custom-pagination.el-pagination.is-background .el-pager li) {
					min-width: 32px;
					height: 32px;
					line-height: 32px;
					border-radius: 6px;
					margin: 0 6px;
					border: 1px solid rgba(0, 0, 0, 0.15);
					background-color: #fff;
					color: rgb(95, 101, 108);
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
				}

				:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-active) {
					background-color: #fff;
					color: rgba(22, 119, 255, 1);
					border-color: rgba(22, 119, 255, 1);
				}

				:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-ellipsis) {
					border: none;
					background-color: transparent;
					color: rgb(95, 101, 108);
					min-width: 16px;
					margin: 0 6px;
				}

				:deep(.custom-pagination.el-pagination.is-background .btn-prev),
				:deep(.custom-pagination.el-pagination.is-background .btn-next) {
					min-width: 32px;
					height: 32px;
					border-radius: 6px;
					border: 1px solid rgba(0, 0, 0, 0.15);
					background-color: #fff;
					color: rgb(95, 101, 108);
					font-size: 16px;
					font-family: "Microsoft YaHei";
					margin: 0 6px;
				}

				:deep(.custom-pagination.el-pagination.is-background .btn-prev.is-disabled),
				:deep(.custom-pagination.el-pagination.is-background .btn-next.is-disabled) {
					color: rgba(95, 101, 108, 0.45);
					border-color: rgb(235, 238, 242);
					background-color: #fff;
				}
			}
		}

		.right {
			width: 520px;
			height: 100%;

			.right-top {
				margin-bottom: 16px;
			}

			.main-content {
				width: 520px;
				height: 540px;
				padding: 0 48px 50px 34px;

				.baseInfo {
					width: 438px;
					padding-bottom: 12px;
					border-bottom: 1px solid rgb(234, 236, 238);

					.baseInfo-item {
						display: flex;
						margin-bottom: 12px;

						.baseInfo-item-title {
							width: 88px;
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(59, 65, 75);
						}

						.address {
							width: 110px;
						}

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

						.long {
							width: 349px;
						}

						.longlong {
							width: 358px;
							display: flex;
							flex-wrap: wrap;
							gap: 4px;

							.span {
								padding: 2px 8px;
								border-radius: 4px;
								background-color: rgba(230, 244, 255, 1);
								border: 1px solid rgba(186, 224, 255, 1);
								color: rgba(22, 119, 255, 1);
								font-size: 14px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 20px;
							}
						}
					}
				}

				.company {
					width: 438px;
					padding-top: 19px;

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

					.company-content {
						width: 409px;
						max-height: 114px;
						display: flex;
						flex-wrap: wrap;
						overflow-y: auto;

						.company-item {
							width: 180px;
							height: 49px;
							margin-bottom: 16px;
							display: flex;
							align-items: center;
							cursor: pointer;

							img {
								width: 48px;
								height: 48px;
								margin-right: 8px;
							}

							.company-cn {
								width: 130px;
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(59, 65, 75);
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.company-name {
								width: 130px;
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(95, 101, 108);
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.company-item:nth-child(2n-1) {
							margin-right: 39px;
						}
					}
				}
			}
		}
	}
}

:deep(.el-table .highlight-row) {
	background: rgba(248, 249, 250, 1);
}

:deep(.viewpoint-dialog) {
	width: 761px !important;
	height: 669px;
	padding: 0;
	border-radius: 4px;

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog__header {
		padding: 0;
		margin: 0;
		position: relative;
		height: 48px;
	}

	.el-dialog__headerbtn {
		top: 50%;
		transform: translateY(-50%);
		right: 12px;
	}

	.viewpoint-header {
		width: 761px;
		height: 48px;
		background: linear-gradient(180deg, rgba(31, 140, 252, 0.2) 0%, rgba(36, 144, 255, 0) 100%);
		display: flex;
		align-items: center;
		padding: 0 24px;
		border-bottom: 1px solid rgb(234, 236, 238);
	}

	.viewpoint-title {
		font-size: 16px;
		font-weight: 700;
		font-family: "Microsoft YaHei";
		line-height: 24px;
		color: rgb(5, 95, 194);
	}

	.viewpoint-body {
		padding: 24px 24px 35px 24px;
		height: calc(669px - 48px);
		box-sizing: border-box;
		overflow: hidden;

		.viewpoint-body-title {
			font-size: 28px;
			font-weight: 700;
			font-family: "Microsoft YaHei";
			line-height: 37px;
			color: rgb(59, 65, 75);
			margin-bottom: 32px;
		}

		.viewpoint-item {
			width: 713px;
			min-height: 81px;
			display: block;
			margin-bottom: 12px;
			position: relative;
			padding-left: 48px;

			img {
				position: absolute;
				top: -20px;
				left: -20px;
			}

			.viewpoint-item-content {
				width: 665px;
				min-height: 81px;
				background-image: url("./assets/bg01.png");
				background-size: 100% 100%;
				position: relative;
				top: 0;
				left: 0;
				padding-left: 23px;
				padding-top: 12px;
				padding-bottom: 13px;
				box-sizing: border-box;

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

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

				.viewpoint-item-job {
					position: absolute;
					top: 8px;
					right: 22px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 30px;
					color: rgb(132, 136, 142);
				}
			}
		}
	}
}
.tab-select {
    width: 120px;
}
.viewpoint-dialog {
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}


.viewpoint-dialog.el-dialog {
	width: 761px !important;
	height: 669px !important;
	max-height: 669px !important;
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.viewpoint-dialog .el-dialog__header {
	padding: 0;
	margin: 0;
	height: 52px;
	flex-shrink: 0;
}

.viewpoint-dialog .el-dialog__body {
	padding: 0;
	flex: 1;
	overflow: hidden;
}

.viewpoint-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 52px;
	padding: 0 24px;
	border-bottom: 1px solid rgba(231, 243, 255, 1);
	box-sizing: border-box;
}

.viewpoint-title {
	display: flex;
	align-items: center;
}

.viewpoint-tag {
	font-size: 18px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 700;
	color: rgba(206, 79, 81, 1);
	line-height: 24px;
}

.viewpoint-label {
	font-size: 18px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
	line-height: 24px;
}

.viewpoint-close {
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.viewpoint-body {
	padding: 18px 24px 24px;
	height: calc(669px - 52px);
	max-height: calc(669px - 52px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
}

.viewpoint-item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.viewpoint-avatar {
	flex-shrink: 0;
	padding-top: 12px;
}

.viewpoint-content {
	flex: 1;
	display: flex;
	align-items: flex-start;
}

.viewpoint-arrow {
	width: 9px;
	height: 72px;
	flex-shrink: 0;
	background: url('./assets/arrow-icon.png') no-repeat center / 100%;
}

.viewpoint-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	background-color: rgba(246, 250, 255, 1);
	border: 1px solid rgba(231, 243, 255, 1);
	border-radius: 4px;
}

.viewpoint-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.viewpoint-name {
	font-size: 16px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
	line-height: 24px;
}

.viewpoint-job {
	font-size: 16px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 400;
	color: rgba(95, 101, 108, 1);
	line-height: 30px;
}

.viewpoint-desc {
	font-size: 16px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 400;
	color: rgba(59, 65, 75, 1);
	line-height: 24px;
	text-align: justify;
}

.viewpoint-empty {
	text-align: center;
	padding: 40px 0;
	color: rgba(170, 173, 177, 1);
	font-size: 14px;
}
</style>