<template>
	<div class="all" v-show="hadRole">
		<!-- :class="{ 'scale-down': isScaleDown }" -->
		<!-- height: isCommon ? '80vh' : '90vh' -->
		<div class="content" :style="{ top: isCommon ? '20vh' : '16vh' }">
			<div class="mb20" :class="{ 'scale-down': isScaleDown }">
				<el-breadcrumb separator="/" class="font16">
					<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>智能财讯</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="top" v-if="isCommon" :class="{ 'scale-down': isScaleDown }">
				<div class="top_left">
					<el-image :src="logo" mode="widthFix" class="logo" />
					<div class="sub_info">
						<text class="company_name">{{ info.company_name }}</text>
						<div class="sub_name">
							<text>证券代码：{{ info.code }}</text> |
							<text>行业分类：{{ info.cate }}</text>
						</div>
					</div>
				</div>
				<div class="top_right">
					<div class="line"></div>
					<div class="st_item">
						<text class="st_num">{{ stData.st1 }}</text>
						<text class="st_title">财讯篇数</text>
					</div>

					<div class="st_item">
						<text class="st_num">{{ stData.st2 }}</text>
						<text class="st_title">H5总数</text>
					</div>

					<div class="st_item">
						<text class="st_num">{{ stData.st3 }}</text>
						<text class="st_title">视频总数</text>
					</div>
				</div>
			</div>

			<!-- maxHeight: isCommon ? '70vh' : '90vh'  -->
			<div class="page_content" :class="{ 'scale-down': isScaleDown }" :style="{ marginTop: isScaleDown ? '0px' : '0px' }">
				<div class="left">
					<div class="r_list_big_title" v-if="!isCommon">
						<text class="list_big_title">智能财讯</text>
					</div>
					<div class="r_line" v-if="!isCommon">
						<div class="line"></div>
					</div>

					<el-input
						v-if="!isCommon"
						:style="{ marginTop: isCommon ? '0px' : '40px' }"
						:prefix-icon="Search"
						placeholder="请输入公司证券代码或公司简称搜索"
						class="input"
						v-model="leftForm.companyName"
						clearable
						@clear="sreachLeft"
						@blur="sreachLeft"
						@keyup.enter="sreachLeft"
					/>

					<div v-loading="loadingLeft" style="margin-top: 30px">
						<div class="r_list">
							<CaixunList
								v-if="caixunList.length > 0"
								:data="caixunList"
								:style="{ marginTop: isCommon ? '0px' : '0px' }"
								@openQrDialog="openQrDialog"
							>
							</CaixunList>
							<div v-else class="r_empty">
								<el-image :src="emptyImg" class="empty"></el-image>
								<text class="empty_text">无搜索结果</text>
							</div>
						</div>
					</div>

					<div class="pagination" v-if="caixunList.length > 0">
						<el-pagination
							style="width: 100%"
							background
							layout="slot, ->,prev, pager, next, jumper"
							:page-sizes="[10, 20, 50, 100]"
							v-model:page-size="leftForm.size"
							:total="leftForm.total"
							v-model:current-page="leftForm.page"
							@current-change="currentChangeLeft"
							@size-change="sizeChangeLeft"
						>
							<div style="font-size: 14px; color: rgba(0, 0, 0, 0.6)">共 {{ leftForm.total }} 项数据</div>
						</el-pagination>
					</div>
				</div>

				<div class="right">
					<div class="r_list_big_title">
						<text class="list_big_title">财报可视化</text>
					</div>
					<div class="r_line">
						<div class="line"></div>
					</div>

					<div class="right_tabs">
						<div :class="['tab_item', { active: tabIndex === 0 }]" @click="tabIndexChange(0)">H5</div>

						<div :class="['tab_item', { active: tabIndex === 1 }]" @click="tabIndexChange(1)">视频</div>
					</div>

					<el-input
						v-if="!isCommon"
						:style="{ marginTop: isCommon ? '0px' : '20px' }"
						:prefix-icon="Search"
						placeholder="请输入公司证券代码或公司简称搜索"
						class="input"
						v-model="rightForm.companyName"
						clearable
						@clear="sreachRight"
						@keyup.enter="sreachRight"
					/>

					<div v-loading="loadingRight">
						<div
							v-if="rightList.length > 0"
							style="gap: 10px; margin-top: 20px; display: flex; flex-direction: column; height: 53vh; overflow-y: auto; padding-right: 10px"
						>
							<div v-for="(item, index) in rightList" :key="index" class="right_item">
								<div style="display: flex">
									<img :src="emptyImg" class="right_icon" v-if="tabIndex === 0" />
									<img :src="videoImg" class="right_icon" v-if="tabIndex === 1" />
									<div style="display: flex; flex-direction: column">
										<text class="right_title" @click="goUrl(item)">{{ item.title }}</text>
										<text class="right_time">{{ item.publicDate }}</text>
									</div>
								</div>
								<img :src="wxImg" class="right_icon" @click="openQrDialog(item.url, item.id)" />
							</div>
						</div>
						<div v-else class="r_empty">
							<el-image :src="emptyImg" class="empty"></el-image>
							<text class="empty_text">请联系中证报经营老师生成企业的可视化财讯</text>
						</div>
					</div>

					<div class="pagination" style="height: 40px">
						<el-pagination
							v-if="rightForm.total > 10"
							style="width: 100%"
							background
							layout="slot, ->,prev, pager, next"
							small
							pager-count="3"
							v-model:page-size="rightForm.size"
							:total="rightForm.total"
							v-model:current-page="rightForm.page"
							@current-change="currentChangeRight"
							@size-change="sizeChangeRight"
						>
							<div style="font-size: 14px; color: rgba(0, 0, 0, 0.6)" v-if="rightForm.total < 10000">共 {{ rightForm.total }} 项数据</div>
						</el-pagination>
					</div>
				</div>
			</div>
		</div>

		<el-dialog v-model="dialogVisible" title="微信扫一扫分享" width="230">
			<div class="dialog">
				<!-- 用于展示二维码的容器 -->
				<div ref="qrcodeContainer" style="margin-top: 20px"></div>
				<text style="margin-top: 20px">微信里点“发现”</text>
				<text style="margin-bottom: 10px">扫一下二维码便可分享至朋友圈</text>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="dashboard">
import { ref, onMounted, nextTick, computed, onUnmounted, reactive } from 'vue';
import { Session } from '/@/utils/storage';
import { NextLoading } from '/@/utils/loading';
import topBg from '../../../assets/caixun/home_bg_qiye.png';
import topBgJg from '../../../assets/caixun/home_bg_jianguan.png';
import logo from '../../../assets/caixun/company_logo.png';
import { Search } from '@element-plus/icons-vue';
import CaixunList from './components/CaixunList.vue';
import emptyImg from '/@/assets/yuqingnew/nonews_icon.png';
import videoImg from '/@/assets/caixun/video_icon.png';
import wxImg from '/@/assets/caixun/icon_wx.png';
import { getSmartInfoPage, getSmartH5InfoPage, getSmartVideoInfoPage, getSmartVideoUrl } from '/@/api/api';
import QRCode from 'qrcodejs2-fixes';
import { doMaiDian } from '/@/api/api';
import { ElMessage, ElMessageBox } from 'element-plus';

const qrcodeContainer = ref(null);

const dialogVisible = ref(false);
// 定义需要缩小的分辨率阈值，例如小于1024px时缩小
const SCALE_THRESHOLD = 4000;
// 缩小比例，例如缩小到原来的0.8倍
const SCALE_RATIO = 0.8;

// 判断是否需要缩小
const isScaleDown = ref(window.innerWidth < SCALE_THRESHOLD);

const inWidth = ref(window.innerWidth);
// 处理窗口大小变化
const handleResize = () => {
	isScaleDown.value = window.innerWidth < SCALE_THRESHOLD;
};

const isCommon = ref(Session.get('roleName') == 'common' || Session.get('roleName') == 'subCommon');
const tabIndex = ref(0);
const info = ref({
	company_name: Session.get('userData')?.companySimpleName,
	code: Session.get('userData')?.secCode,
	cate: '股份制银行',
});

const stData = reactive({
	st1: 0,
	st2: 0,
	st3: 0,
});

const rightList = ref([]);

const caixunList = ref([]);

const leftForm = ref({
	page: 1,
	size: 15,
	total: 0,
});

const rightForm = ref({
	page: 1,
	size: 10,
	total: 0,
});

function sreachRight() {
	rightForm.value.page = 1;
	getRightList();
}

function sreachLeft() {
	leftForm.value.page = 1;
	getLeftList();
}

const loadingLeft = ref(false);
// 左边列表
async function getLeftList() {
	loadingLeft.value = true;
	let { code, data } = await getSmartInfoPage({ ...leftForm.value });
	loadingLeft.value = false;

	if (code == 200) {
		if (data?.list) {
			caixunList.value = data.list;
			leftForm.value.total = data.total;
			info.value.cate = data.swIndustryName;
		} else {
			caixunList.value = [];
			leftForm.value.total = 0;
			info.value.cate = '';
		}

		stData.st1 = data.total;
	}
}

const loadingRight = ref(false);
// 右边列表
async function getRightList() {
	console.log('🚀 ~ getRightList ~ rightForm.value:', rightForm.value);

	loadingRight.value = true;
	let { code, data } = tabIndex.value == 0 ? await getSmartH5InfoPage({ ...rightForm.value }) : await getSmartVideoInfoPage({ ...rightForm.value });
	loadingRight.value = false;

	if (code == 200) {
		if (data?.list) {
			rightList.value = data.list;
			rightForm.value.total = data.total;
		} else {
			rightList.value = [];
			rightForm.value.total = 0;
		}

		if (tabIndex.value == 0) {
			stData.st2 = data.total;
		} else {
			stData.st3 = data.total;
		}
	}
}

async function getRightTotal() {
	if (tabIndex.value == 0) {
		let { code, data } = await getSmartVideoInfoPage({ ...leftForm.value });
		if (code == 200) {
			rightForm.value.total = data.total;

			stData.st3 = data.total;
		}
	}
}

function tabIndexChange(index: number) {
	tabIndex.value = index;
	getRightList();
}

function currentChangeLeft(page) {
	leftForm.value.page = page;
	getLeftList();
}
function sizeChangeLeft(size: number) {
	leftForm.value.size = size;
	getLeftList();
}

function currentChangeRight(page: number) {
	rightForm.value.page = page;
	getRightList();
}
function sizeChangeRight(size: number) {
	rightForm.value.size = size;
	getRightList();
}

const qrCode = ref(null);

async function openQrDialog(url, id) {
	console.log('🚀 ~ openQrDialog ~ url:', url);
	// 埋点
	doMaiDian({ type: 2 });
	if (tabIndex.value == 0) {
		dialogVisible.value = true;
		nextTick(() => {
			if (qrCode.value) {
				qrcodeContainer.value.innerHTML = '';
			}

			qrCode.value = new QRCode(qrcodeContainer.value, {
				text: url,
				width: 180, // 二维码宽度
				height: 180, // 二维码高度
				colorDark: '#000000', // 二维码前景色
				colorLight: '#ffffff', // 二维码背景色
				correctLevel: QRCode.CorrectLevel.H, // 容错级别（L、M、Q、H）
			});
		});
	} else {
		let { code, data } = await getSmartVideoUrl({
			infoId: id,
		});
		dialogVisible.value = true;
		nextTick(() => {
			if (qrCode.value) {
				qrcodeContainer.value.innerHTML = '';
			}

			qrCode.value = new QRCode(qrcodeContainer.value, {
				text: data,
				width: 180, // 二维码宽度
				height: 180, // 二维码高度
				colorDark: '#000000', // 二维码前景色
				colorLight: '#ffffff', // 二维码背景色
				correctLevel: QRCode.CorrectLevel.H, // 容错级别（L、M、Q、H）
			});
		});
	}
}

// 跳转详情页
async function goUrl(item) {
	// 埋点
	doMaiDian({ type: 1 });
	if (tabIndex.value == 0) {
		// H5直接跳转
		window.open(item.url);
	} else {
		// 视频跳转,要再次获取下链接
		let { code, data } = await getSmartVideoUrl({
			infoId: item.id,
		});
		if (code == 200) {
			window.open(data);
		}
	}
}

const hadRole = ref(true);
onMounted(() => {
	NextLoading.done();
	window.addEventListener('resize', handleResize);

	getLeftList();
	getRightList();
	getRightTotal();
	if (
		(Session.get('roleName') == 'common' || Session.get('roleName') == 'subCommon') &&
		(!Session.get('userData').smartInfoSwitch || (Session.get('userData').smartInfoSwitch && Session.get('userData').smartInfoSwitch == 0))
	) {
		ElMessage.error('暂未向您开放智能财讯功能，请联系中证报经营人员');
		hadRole.value = false;
	}
});

onUnmounted(() => {
	window.removeEventListener('resize', handleResize);
});
</script>

<style scoped lang="scss">
$maxWidth: 2000px;

/* 缩小状态 */
.scale-down {
	/* 缩放内容 */
	transform: scale(var(--scale-ratio, 0.9));
	/* 计算缩放后的偏移量，使内容居中 */
	transform-origin: top center;
	/* 调整容器宽度，避免边缘被截断 */
	width: calc(1 / var(--scale-ratio, 0.9) * 100%);
	margin: 0 auto;
}

.all {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0;
	background-size: 100% auto;
	// padding-bottom: 24px;
	// padding: 20px 32px 32px;
}

.topbg {
	width: 100%;
	height: auto;
}

.content {
	display: flex;
	flex-direction: column;
	position: fixed;
	left: 50%;
	transform: translate(-50%, 0);
}

.top {
	width: 80vw;
	min-width: 1200px;
	max-width: $maxWidth;
	height: 117px;
	background: linear-gradient(180deg, #e7effa 0%, #fafbfb 100%);
	box-shadow: 0px 2px 12px 0px rgba(186, 193, 205, 0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.top_left {
		display: flex;
		height: 100%;
		position: relative;
	}

	.logo {
		width: 118px;
		height: 118px;
		background: #e46713;
		margin-left: 30px;
		margin-top: -20px;
	}

	.sub_info {
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		height: 100%;
		justify-content: center;
		gap: 10px;
		margin-top: -5px;
	}

	.company_name {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 22px;
		color: #1a1a1a;
		line-height: 30px;
		text-align: left;
		font-style: normal;
	}

	.sub_name {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 16px;
		color: #919191;
		line-height: 22px;
		text-align: left;
		font-style: normal;
	}
}

.top_right {
	display: flex;
	width: 22vw;
	height: 100%;
	align-items: center;
}

.line {
	width: 1px;
	height: 60%;
	background-color: #e0e5ea;
}

.st_item {
	display: flex;
	flex-direction: column;
	width: 30%;
	text-align: center;
	justify-content: center;
	align-items: center;

	.st_num {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 24px;
		color: #1a1a1a;
		line-height: 33px;
		text-align: left;
		font-style: normal;
	}

	.st_title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #5f6063;
		line-height: 20px;
		text-align: left;
		font-style: normal;
	}
}

.r_page_content {
	display: flex;
	flex-direction: column;
}

.page_content {
	width: 80vw;
	max-width: $maxWidth;
	min-width: 1200px;
	display: flex;
	gap: 15px;
	margin-top: 15px;

	.left {
		width: 70%;
		border-radius: 10px;
		padding: 30px 30px;
		padding-bottom: 0;
		background-color: white;
	}

	.input {
		width: 100%;
	}

	:deep(input::placeholder) {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #cccccc;
		line-height: 16px;
		text-align: left;
		font-style: normal;
	}

	.r_list {
		// height: 57vh;
		// overflow: auto;
		max-height: 55vh;
		overflow-y: scroll;
	}

	.pagination {
		margin-top: 12px;
		width: 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
	}
}

.right {
	width: 30%;
	background-color: white;
	border-radius: 10px;
	flex: 1;
}

.r_line {
	width: 100%;
	height: 4px;
	background: #f0f0f0;

	.line {
		width: 80px;
		height: 4px;
		background: #007aff;
	}
}

.right {
	padding: 30px 20px;
}

.r_list_big_title {
	height: 50px;
}

.list_big_title {
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	font-size: 20px;
	color: #1a1a1a;
	text-align: left;
	font-style: normal;
}

.right_tabs {
	display: flex;
	margin-top: 20px;
	gap: 20px;

	.tab_item {
		width: 54px;
		height: 28px;
		background: #f5f7fd;
		border-radius: 4px;
		color: #5f6063;
		font-family: PingFangSC, PingFang SC;
		font-weight: bold;
		font-size: 16px;

		line-height: 22px;
		text-align: left;
		font-style: normal;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.active {
		color: #0779ff;
		background: #f0f4ff;
	}
}

.right_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f8f9fc;
	border-radius: 8px;
	padding: 20px 10px;
}

.right_icon {
	width: 36px;
	height: 36px;
	margin-right: 10px;
	cursor: pointer;
}

.right_title {
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	font-size: 14px;
	color: #1a1a1a;
	line-height: 20px;
	text-align: left;
	font-style: normal;
	cursor: pointer;
}

.right_title:hover {
	color: #0779ff;
}

.right_time {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 12px;
	color: #919191;
	line-height: 17px;
	text-align: left;
	font-style: normal;
}

.dialog {
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 16px;
}

.r_empty {
	height: 500px;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: white;

	.empty {
		width: 120px;
		height: 100px;
	}

	.empty_text {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #919191;
		letter-spacing: 0;
		text-align: center;
		font-weight: 400;
		margin-top: 10px;
	}
}

:deep(.el-overlay .el-overlay-dialog .el-dialog) {
	right: 0;
}
</style>
