<template>
	<div class="all" v-loading="loading">
		<div class="tabs">
			<div
				v-for="item in tabList"
				:key="item.value"
				class="tab_item"
				:class="{ active: item.value === activeTab }"
				@click="handleTabClick(item.value)"
			>
				{{ item.label }}
			</div>
		</div>
		<!--transform: scale(0.9); transform-origin: top left -->
		<!-- 全部 start -->
		<div class="content" v-if="!activeTab">
			<div class="card_view" style="display: flex; width: 100%; height: 486px">
				<div class="top_left">
					<div class="bg_view">
						<div style="margin-top: -20px">
							<text class="bg_view_title">已使用企业量</text>
							<el-tooltip content="历史上曾登录财报页面的用户。" effect="dark" placement="top">
								<img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" />
							</el-tooltip>
						</div>
						<text class="bg_view_num">{{ stTotal.companyNumsUsed || 0 }}/{{ stTotal.companyNumsAll || 0 }}</text>
					</div>

					<div class="top_left_item" style="margin-top: 20px">
						<div style="display: flex; align-items: center">
							<div class="line_point" style="background: #ffb100"></div>
							<text class="left_item_title">今日新增用户</text>
							<el-tooltip content="当天第一次登录财保的企业。" effect="dark" placement="top">
								<img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" style="margin-left: 5px" />
							</el-tooltip>
						</div>

						<div>
							<text class="left_item_num">{{ stTotal.todayNewCompanyNums ? stTotal.todayNewCompanyNums : 0 }}</text>
							<text class="left_item_unit">家</text>
						</div>
					</div>

					<div class="top_left_item">
						<div style="display: flex; align-items: center">
							<div class="line_point" style="background: #00be67"></div>
							<text class="left_item_title">尝试使用ESG企业数</text>
							<img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" style="margin-left: 5px" />
						</div>

						<div>
							<text class="left_item_num">{{ stTotal.esgNums ? stTotal.esgNums : 0 }}</text>
							<text class="left_item_unit">家</text>
						</div>
					</div>
				</div>

				<!-- 各运营中心使用分布 -->
				<div class="top_right" style="flex: 1; margin-left: 30px">
					<DashboardBar :data="stTotal.fenbu" v-if="Session.get('roleName') != 'operate'" />
				</div>
			</div>

			<div style="display: flex; gap: 20px; width: 100%; height: 438px; margin-top: 20px">
				<div class="card_view" style="width: 50%; height: 100%">
					<DashboardLine :data="stTotal.user"></DashboardLine>
				</div>
				<div class="card_view" style="width: 50%; height: 100%; display: flex; padding: 20px">
					<div class="nums" style="border-right: 1px solid #e5e5e5; padding-left: 30px">
						<NumView
							style="height: 33%"
							icon="icon_yuqing"
							title="已使用企业舆情"
							numType="0"
							tips="点击进入舆情页面。"
							:num="stTotal.yqNums"
						></NumView>
						<NumView
							style="height: 33%"
							icon="icon_dianziqian"
							title="已使用电子签"
							numType="1"
							tips="电子签功能激活。"
							:num="stTotal.esignNums"
						></NumView>
						<NumView
							style="height: 33%"
							icon="icon_jianjiao"
							title="已使用文件检校"
							numType="2"
							tips="2024年8月1日后上传文件。（2024年7月19日，批量上传过一各文件）"
							:num="stTotal.reportCheckNums"
						></NumView>
					</div>

					<div class="nums" style="padding-left: 60px">
						<NumView style="height: 33%" icon="icon_baogao" title="已使用报告生成" numType="3" tips="下载插件。" :num="stTotal.reportNums"></NumView>
						<NumView
							style="height: 33%"
							icon="icon_xuanfa"
							title="已使用报告宣发"
							numType="4"
							tips="点击分享或点击资讯链接。"
							:num="stTotal.infoNums"
						></NumView>
						<NumView
							style="height: 33%"
							icon="icon_duanxin"
							title="企业短信触达率"
							numType="5"
							tips="发送舆情/信披短信到企业。"
							:num="stTotal.smsNums"
						></NumView>
					</div>
				</div>
			</div>
		</div>
		<!-- 全部 end -->

		<!-- esg start  -->
		<div class="content" v-if="activeTab == 'esg'">
			<div class="card_view" style="display: flex; width: 100%; height: 486px; flex-direction: column; gap: 30px">
				<div style="width: 100%; gap: 30px; display: flex">
					<EsgItem
						label="尝试使用企业"
						:value="stEsg.tryUsedNums"
						:companyTotal="stTotal.companyNumsAll || 0"
						color="#DFECFD"
						tips="点击ESG进入。"
					></EsgItem>
					<EsgItem
						label="已使用企业"
						:value="stEsg.alreadyUsedNums"
						:companyTotal="stTotal.companyNumsAll || 0"
						color="#DFECFD"
						tips="完成初级问卷填写数量、标准问卷填写数量、诊断报告下载数量、ESG报告下载四项之一。"
					></EsgItem>
					<EsgItem
						label="初级问卷填写数量"
						:value="stEsg.chuNums"
						:companyTotal="stTotal.companyNumsAll || 0"
						color="#DFECFD"
						tips="开始填写初级问卷内容。"
					></EsgItem>
					<EsgItem
						label="初级问卷填写完成数量"
						:value="stEsg.chuFinishNums"
						:companyTotal="stTotal.companyNumsAll || 0"
						color="#DFECFD"
						tips="初级问卷内容填写完成。"
					></EsgItem>
				</div>

				<div style="width: 100%; gap: 30px; display: flex">
					<EsgItem
						label="标准问卷填写数量"
						:value="stEsg.biaoNums"
						:companyTotal="stTotal.companyNumsAll || 0"
						color="#FCF6E3"
						tips="开始填写标准问卷内容。"
					></EsgItem>
					<EsgItem
						label="标准问卷填写完成数量"
						:value="stEsg.biaoFinishNums"
						:companyTotal="stTotal.companyNumsAll || 0"
						color="#FCF6E3"
						tips="标准问卷填写完成。"
					></EsgItem>
					<EsgItem
						label="诊断报告导出数量"
						:value="stEsg.exportNums"
						:companyTotal="stTotal.companyNumsAll || 0"
						color="#FCF6E3"
						tips="下载诊断报告。"
					></EsgItem>
					<EsgItem
						label="ESG报告导出数量"
						:value="stEsg.esgExportNums"
						:companyTotal="stTotal.companyNumsAll || 0"
						color="#FCF6E3"
						tips="下载ESG报告。"
					></EsgItem>
				</div>
			</div>
		</div>
		<!-- esg end -->
		<!-- 舆情 start -->
		<div class="content" style="display: flex; gap: 30px" v-if="activeTab == 'yuqing'">
			<div class="yq_left" style="gap: 30px">
				<div class="card_view" style="display: flex; width: 400px; height: 208px; flex-direction: column; gap: 15px; justify-content: center">
					<div>
						<text class="yq_title">已使用企业数</text>
						<el-tooltip content="点击进入舆情页面。" effect="dark" placement="top">
							<img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" />
						</el-tooltip>
					</div>
					<text class="yq_content">{{ stYq.companyNumsUsed || 0 }}</text>
					<text class="yq_sub_content">企业总数：{{ stYq.companyNumsAll || 0 }}</text>
				</div>
				<div class="card_view" style="display: flex; width: 400px; height: 208px; flex-direction: column; gap: 15px; justify-content: center">
					<div>
						<text class="yq_title">重度使用用户数</text>
						<el-tooltip content="点击搜索或查看详情。" effect="dark" placement="top">
							<img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" />
						</el-tooltip>
					</div>
					<text class="yq_content">{{ stYq.companyNmusUsedZhong || 0 }}</text>
					<text class="yq_sub_content">企业总数：{{ stYq.companyNumsUsed || 0 }}</text>
				</div>
			</div>
			<div class="yq_right" style="flex: 1">
				<div class="card_view" style="width: 100%; height: 100%">
					<DashboardLine :data="stYq.user"></DashboardLine>
				</div>
			</div>
		</div>
		<!-- 舆情 end -->

		<!-- 检校 start -->
		<div style="min-height: 100vh; width: 80vw; margin-left: -12vw" v-if="activeTab == 'jianjiao'">
			<!-- :style="{ scale: isScaleDown ? '0.87' : '1', transformOrigin: 'top center' }" -->
			<div>
				<component :is="com[stroes.userInfos.roles[0]]" :key="stroes.userInfos.roles[0]" />
			</div>
		</div>
		<!-- 检校 end -->

		<!-- 其他 start -->
		<div class="content" style="display: flex; flex-direction: column; gap: 30px" v-if="activeTab == 'qita'">
			<div class="qita_row">
				<div class="card_view" style="display: flex; width: 50vw; height: 630px; flex-direction: column; gap: 15px">
					<CardViewTitle
						linePointColor="#0779ff"
						title="报告宣发（智能财讯）"
						subTitle="已使用企业"
						:subNum="stQita?.reportXuan?.nums"
						titleType="0"
					></CardViewTitle>
					<DashboardLine style="margin-top: 50px" :data="stQita?.reportXuan?.user" lineType="0"> </DashboardLine>
				</div>
				<div class="card_view" style="display: flex; width: 50vw; height: 630px; flex-direction: column; gap: 15px">
					<CardViewTitle
						linePointColor="#FFB100"
						title="智能信披库"
						subTitle="已使用企业数"
						:subNum="stQita?.smartInfo?.nums"
						subTitle2="重度使用企业数"
						:subNum2="stQita?.smartInfo?.numsZhong"
						titleType="1"
					></CardViewTitle>
					<DashboardLine style="margin-top: 50px" :data="stQita?.smartInfo?.user" lineType="1"> </DashboardLine>
				</div>
			</div>

			<div class="qita_row">
				<div class="card_view" style="display: flex; width: 50vw; height: 630px; flex-direction: column; gap: 15px">
					<CardViewTitle
						titleType="2"
						linePointColor="#01BE66"
						title="报告生成"
						subTitle="已使用企业数"
						:subNum="stQita?.report?.nums"
					></CardViewTitle>
					<DashboardLine style="margin-top: 50px" :data="stQita?.report?.user" lineType="2"></DashboardLine>
				</div>

				<div class="card_view" style="display: flex; width: 50vw; height: 630px; flex-direction: column; gap: 15px">
					<CardViewTitle
						titleType="3"
						linePointColor="#F64458"
						title="电子签"
						subTitle="已使用企业数"
						:subNum="stQita?.esign?.companyNmusUsed"
					></CardViewTitle>

					<div class="r_item">
						<div>
							<text class="qita_tiem_title">已使用企业数</text>
							<!-- <img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" /> -->
						</div>
						<text class="qita_tiem_content">{{ stQita?.esign?.companyNmusUsed || 0 }}</text>
						<text class="qita_tiem_sub_content">企业总数：{{ stQita?.esign?.companyNumsAll || 0 }}</text>
					</div>

					<div class="r_item">
						<div>
							<text class="qita_tiem_title">重度使用企业数</text>
							<!-- <img src="../../../assets/icon_qustion.png" alt="" class="icon_qustion" /> -->
						</div>
						<text class="qita_tiem_content">{{ stQita?.esign?.companyNmusUsedZhong || 0 }}</text>
						<text class="qita_tiem_sub_content">企业总数：{{ stQita?.esign?.companyNmusUsed || 0 }}</text>
					</div>
				</div>
			</div>
		</div>
		<!-- 其他 end -->
	</div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import DashboardBar from './charts/DashboardBar.vue';
import DashboardLine from './charts/DashboardLine.vue';
import NumView from './components/NumView.vue';
import CardViewTitle from './components/CardViewTitle.vue';
import { Session } from '/@/utils/storage';
import { defineAsyncComponent } from 'vue';
import { getStTotal, getStYq, getStOther, getStEsg } from '/@/api/api';
import { useUserInfo } from '/@/stores/userInfo';
import EsgItem from './components/EsgItem.vue';

// 定义需要缩小的分辨率阈值，例如小于1024px时缩小
const SCALE_THRESHOLD = 1480;
// 缩小比例，例如缩小到原来的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 com = {
	// 中证报监管
	Director: defineAsyncComponent(() => import('/@/views/pages/dashboard/components/index.vue')),
	// 分中心
	subCenter: defineAsyncComponent(() => import('/@/views/pages/dashboard/components/index.vue')),
	operate: defineAsyncComponent(() => import('/@/views/pages/dashboard/components/index.vue')),
	// 证监会
	CSRC: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
	// 全国监管
	QJJG: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
	// 全国监管子账号
	QJJGC: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
	// 地方监管主账号
	DFJG: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
	// 地方监管子账号
	DFJGC: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
	// 交易所主账号
	JYS: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
	// 交易所子账号
	JYSC: defineAsyncComponent(() => import('/@/views/pages/dashboard/jianguan/index.vue')),
};

// 获取账号信息
const stroes = useUserInfo();

const activeTab = ref(null);

const tabList = ref([
	{
		label: '总体',
		value: null,
	},
	{
		label: 'ESG',
		value: 'esg',
	},
	{
		label: '舆情',
		value: 'yuqing',
	},
	{
		label: '检校',
		value: 'jianjiao',
	},
	{
		label: '其他',
		value: 'qita',
	},
]);

const stTotal = ref({
	companyNumsAll: 0, // 总企业数
	companyNmusUsed: 0, // 已使用企业数
	todayNewCompanyNums: 0, // 今日新增数
	// 各运营中心使用分布
	fenbu: {
		// name: ['string1', 'string2', 'string3', 'string4', 'string5'],
		// usedNums: ['100', '300', '500', '600', '700'],
		// usedRate: ['80', '90', '30', '20', '50'],
	},
	// 近三月用户趋势
	user: {
		// time: ['80', '90', '30', '20', '50'],
		// data: ['100', '300', '500', '600', '700'],
	},
	yqNums: 0, // 已使用企业舆情
	reportNums: 0, // 已使用报告生成
	esignNums: 0, // 已使用电子签
	infoNums: 0, // 已使用报告宣发
	reportCheckNums: 0, // 已使用文件检校
	smsNums: 0, // 短信触达
});

// 运营账号看板-总体
async function getStTotalFn() {
	loading.value = true;
	let { code, data } = await getStTotal({});
	if (code == 200) {
		stTotal.value = data;
		console.log('🚀 ~ getStTotalFn ~ stTotal.value:', stTotal.value);
	}
	loading.value = false;
}

const stYq = ref({
	companyNumsAll: 0, // 总企业数
	companyNmusUsed: 0, // 已使用企业数
	companyNmusUsedZhong: 0, // 重度使用数
	user: {
		// time: ['80', '90', '30', '20', '50'],
		// data: ['100', '300', '500', '600', '700'],
	},
});
// 运营账号看板-舆情
async function getStYqFn() {
	loading.value = true;
	let { code, data } = await getStYq({});
	if (code == 200) {
		stYq.value = data;
	}
	loading.value = false;
}

const stQita = ref({
	reportXuan: {
		nums: 0, // 已使用报告宣发总数
		user: {
			// time: ['80', '90', '30', '20', '50'],
			// data: ['100', '300', '500', '600', '700'],
		},
	},
	smartInfo: {
		nums: 0, // 已使用智能信披库总数
		numsZhong: 0, // 重度使用数
		user: {
			// time: ['80', '90', '30', '20', '50'],
			// data: ['100', '300', '500', '600', '700'],
		},
	},
	report: {
		nums: 0, // 已使用报告生成总数
		user: {
			// time: ['80', '90', '30', '20', '50'],
			// data: ['100', '300', '500', '600', '700'],
		},
	},
	esign: {
		companyNumsAll: 0, // 总企业数
		companyNmusUsed: 0, // 使用企业数
		companyNmusUsedZhong: 0, // 重度使用企业数
	},
});

const stEsg = ref({
	tryUsedNums: 0, // 尝试使用esg企业数
	alreadyUsedNums: 0, // 已使用esg企业数
	chuNums: 0, // 初级问卷填写数量
	chuFinishNums: 0, // 初级问卷填写完成数量
	biaoNums: 0, // 标准问卷填写数量
	biaoFinishNums: 0, // 标准问卷填写完成数量
	exportNums: 0, // 诊断报告导出数量
	esgExportNums: 0, // esg报告导出数量
});

const loading = ref(false);
// 运营账号看板-其他
async function getStOtherFn() {
	loading.value = true;
	let { code, data } = await getStOther({});
	if (code == 200) {
		stQita.value = data;
	}
	loading.value = false;
}

// 处理tab点击事件
const handleTabClick = (tabValue) => {
	activeTab.value = tabValue;

	if (tabValue === null) {
		getStTotalFn();
	} else if (tabValue === 'yuqing') {
		getStYqFn();
	} else if (tabValue === 'qita') {
		getStOtherFn();
	} else if (tabValue === 'esg') {
		getStEsgFn();
	}
};

async function getStEsgFn() {
	loading.value = true;

	let { code, data } = await getStEsg({});
	loading.value = false;

	if (code == 200) {
		stEsg.value = data;
	}
}

onMounted(() => {
	// 运营账号看板-总体
	getStTotalFn();
	// // 运营账号看板-舆情
	// getStYqFn();
	// // 运营账号看板-其他
	// getStOtherFn();

	window.addEventListener('resize', handleResize);
});

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

<style scoped lang="scss">
$minWidth: 68.75rem;
$contentWidth: 85vw;

.all {
	background-color: #f5f7fd;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
	width: 100vw;
	align-items: center;
	overflow: auto;
}

.tabs {
	width: $contentWidth;
	min-width: $minWidth;
	display: flex;
	justify-content: flex-start;
	gap: 20px;

	.tab_item {
		padding: 10px 20px;
		cursor: pointer;

		width: 98px;
		height: 32px;
		background: #ffffff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 4px;

		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

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

.content {
	width: $contentWidth;
	min-width: $minWidth;
}

.card_view {
	background: #ffffff;
	box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	padding: 30px;
}

.bg_view {
	width: 397px;
	height: 186px;
	box-shadow: 0px 2px 12px 0px rgba(128, 131, 134, 0.2);
	border-radius: 8px;
	background: url('../../../assets/dashboard/bg_pic.png') no-repeat;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.875rem;
	gap: 1.25rem;
}

.bg_view_title {
	width: 140px;
	height: 28px;
	font-family: PingFangSC, PingFang SC;
	font-weight: normal;
	font-size: 20px;
	color: #5f6063;
	line-height: 28px;
	text-align: left;
	font-style: normal;
}

.bg_view_num {
	width: 236px;
	height: 56px;
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	font-size: 40px;
	color: #1a1a1a;
	line-height: 56px;
	text-align: left;
	font-style: normal;
}

.icon_qustion {
	width: 12px;
	height: 12px;
	margin-left: 8px;
}

.top_left {
	width: 397px;
	display: flex;
	flex-direction: column;

	.line_point {
		width: 10px;
		height: 36px;
	}

	.top_left_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80px;
	}

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

	.left_item_num {
		width: 84px;
		height: 40px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28px;
		color: #1a1a1a;
		line-height: 40px;
		text-align: left;
		font-style: normal;
	}
}

.top_right {
	width: 50%;
	height: 100%;
}

.nums {
	display: flex;
	flex-direction: column;
	justify-content: center;
	// align-items: center;

	width: 50%;
	height: 100%;
}

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

.yq_title {
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	font-size: 20px;
	color: #222222;
	line-height: 28px;
	text-align: left;
	font-style: normal;
}

.yq_content {
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	font-size: 32px;
	color: #1a1a1a;
	line-height: 45px;
	text-align: left;
	font-style: normal;
}

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

.qita_row {
	display: flex;
	gap: 30px;
}

.r_item {
	// width: 605px;
	height: 208px;
	background: #dfecfd;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
	padding: 30px;
}

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

.qita_tiem_content {
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	font-size: 32px;
	color: #1a1a1a;
	line-height: 45px;
	text-align: left;
	font-style: normal;
}

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

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