<script setup name="entryTableGuide">
import { debounce } from 'lodash-es'
const tabsInfo = ref({
	activeName: "confirm",
	tabs: [
		{ label: "会计确认", name: 'confirm' },
		{ label: "入表后变化", name: "change" },
		{ label: "会计列报披露", name: "show" },
	]
});
const tabsClick = (tab, event) => {
	tabsInfo.value.activeName = tab.paneName;
	handleLeft(tab.paneName)
};
const handleLeft = (name) => {
	let dom = document.getElementById(name);
	dom && dom.scrollIntoView({
		behavior: "smooth", // 平滑过渡
		block: "start", // 上边框与视窗顶部平齐。默认值
	});
}
const contentRef = ref();
onMounted(() => {
	//添加scroll事件监听, 体验有缺陷。
	contentRef.value.addEventListener("scroll", debounce(() => {
		let tabs = tabsInfo.value.tabs;
		let len = tabs.length;
		let tabH = contentRef.value.offsetHeight;
		for (let i = len - 1; i >= 0; i--) {
			let name = tabs[i].name;
			let dom = document.getElementById(name);
			let top = dom && dom.getBoundingClientRect().top;
			if (dom.parentElement.scrollHeight - (dom.parentElement.scrollTop + dom.parentElement.clientHeight) < 1) {
				tabsInfo.value.activeName = name;
				return;
			}
			if (top && top > 0 && top <= 300) {
				tabsInfo.value.activeName = name;
				return;
			}
		}
	}, 100));
})
const confirmDesc = ref('为提供服务或者内部使用而持有的数据资产，适用《企业会计准则第6号——无形资产》\n无形资产是指企业拥有或者控制的没有实物形态的可辨认非货币性资产，具体特征为：由企业拥有或者控制并能为其带来未来经济利益的资源；不具有实物形态；属于非货币性资产；具有可辨认性。\n具有可辨认性，至少应符合下列条件之一：\n①能够从企业中分离或者划分出来，并能单独用于出售、转让等，而不需要同时处置在同一获利活动中的其他资产，说明无形资产可以辨认。\n②产生于合同性权利或其他法定权利，无论这些权利是否可以从企业或其他权利和义务中转移或者分离。企业应当根据数据资源的业务模式分类为外购无形资产、自行开发无形资产、其他方式取得无形资产等类别。');
const saveDesc = ref('持有、最终目的用于出售的数据资源，适用《企业会计准则第1号--存货》\n存货是指企业在日常活动中持有以备出售的产成品或商品、处在生产过程中的在产品、在生产过程或提供劳务过程中耗用的材料或物料等，包括各类材料、在产品、半成品、产成品或库存商品以及包装物、低值易耗品、委托加工物资等。对数据资源而言，持有目的是用于“出售”的数据资产，包括出售了产权的场景下，认定为存货。');
</script>
<template>
	<div class="main-detail">
		<div class="table_tool_wrap">
			<div class="left-tabs">
				<Tabs :tab-position="'right'" :tabsInfo="tabsInfo" @tabClick="tabsClick" />
			</div>
			<div class="main-wrap" ref="contentRef">
				<div :id="tabsInfo.tabs[0].name">
					<div class="tab-title">{{ '·' + tabsInfo.tabs[0].label }}</div>
					<div class="tab-content">
						<div class=title-2>无形资产</div>
						<div class="border"></div>
						<div class="desc" style="margin-bottom: 30px;">
							{{ confirmDesc }}
						</div>
					</div>
					<div class="tab-content" style="margin-top: 24px;">
						<div class=title-2>存货</div>
						<div class="border"></div>
						<div class="desc">
							{{ saveDesc }}
						</div>
						<div class="img-main" style="margin-bottom: 30px;">
							<img style="width: calc(50% - 8px);height: 431px;max-width: 520px;margin-right: 14px"
								src="../../assets/images/stock-init.png" alt="" />
							<img style="width: calc(50% - 8px);height: 246px;max-width: 520px"
								src="../../assets/images/stock-account.png" alt="" />
						</div>
					</div>
				</div>
				<div :id="tabsInfo.tabs[1].name" style="margin-top: 32px;">
					<div class="tab-title">{{ '·' + tabsInfo.tabs[1].label }}</div>
					<div class="tab-content">
						<div class=title-2>无形资产</div>
						<div class="border"></div>
						<div class="desc">例如：一笔无形资产初始购置成本为200,000元，摊销5年，每年摊销额为40,000元，无形资产发生了减值，可回收金额降至150,000元，三大报表变化如下：</div>
						<div class="img-main">
							<img style="width: calc(50% - 8px);height: 480px;max-width: 520px;margin-right: 14px"
								src="../../assets/images/invisible-asset1.png" alt="" />
							<img style="width: calc(50% - 8px);height: 430px;max-width: 520px;"
								src="../../assets/images/invisible-asset2.png" alt="" />
						</div>
						<div class="img-main" style="margin-top: 14px;margin-bottom: 24px;">
							<img style="width: calc(50% - 8px);height: 320px;max-width: 520px;margin-right: 14px"
								src="../../assets/images/invisible-asset3.png" alt="" />
							<img style="width: calc(50% - 8px);height: 210px;max-width: 520px;"
								src="../../assets/images/invisible-asset4.png" alt="" />
						</div>
					</div>
					<div class="tab-content" style="margin-top: 24px;">
						<div class=title-2>存货</div>
						<div class="border"></div>
						<div class="desc">例如：存货的可变现净值为190,000元，而账面价值为200,000元，则需要计提10,000的跌价准备，三大报表变化如下：</div>
						<div class="img-main">
							<img style="width: calc(50% - 8px);height: 370px;max-width: 520px;margin-right: 14px"
								src="../../assets/images/stock1.png" alt="" />
							<img style="width: calc(50% - 8px);height: 306px;max-width: 520px;" src="../../assets/images/stock2.png"
								alt="" />
						</div>
						<div class="img-main" style="margin-top: 14px;margin-bottom: 24px;">
							<img style="width: calc(50% - 8px);height: 210px;max-width: 520px;" src="../../assets/images/stock3.png"
								alt="" />
						</div>
					</div>
				</div>
				<div :id="tabsInfo.tabs[2].name" style="margin-top: 32px;">
					<div class="tab-title">{{ '·' + tabsInfo.tabs[2].label }}</div>
					<div class="tab-content">
						<div class=title-2>会计列报及披露</div>
						<div class="border"></div>
						<div class="desc">根据确认的资产情况，分别在“存货”、“无形资产”、“开发支出”项目下增设“数据资源”项目，披露格式如下：</div>
						<img style="width: 560px;height: 165px;margin-top: 12px;" src="../../assets/images/account-show.png"
							alt="" />
						<div class="title-3">必要的数据资源披露要求</div>
						<div class="desc">
							企业对数据资源进行评估且评估结果对企业财务报表具有重要影响的，应当披露评估依据的信息来源，评估结论成立的假设前提和限制条件，评估方法的选择，各重要参数的来源、分析、比较与测算过程等信息。</div>
						<div class="title-3">自愿的数据资源披露要求</div>
						<div class="desc" style="margin-bottom: 24px;">
							企业可根据实际情况自愿披露数据资源（含未作为无形资产或存货确认的数据资源）的相关信息，包括形成相关数据资源的原始数据的类型、规模、来源、权属等信息，以及数据资源的应用情况、应用场景和对企业创造价值的影响方式等不同维度的信息。
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.main-detail {
	width: 100%;
	height: 100%;
}

.table_tool_wrap {
	width: 100%;
	display: flex;
	height: 100%;
}

.left-tabs {
	width: 132px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px 0px 0 6px
}

.main-wrap {
	flex-grow: 1;
	padding: 16px 16px 16px 0px;
	overflow: auto;

	.tab-title {
		font-size: 18px;
		color: #212121;
		line-height: 27px;
		font-weight: 600;
		margin-bottom: 8px;
	}

	.tab-content {
		height: auto;
		border: 1px solid #d9d9d9;
		min-height: 40px;
		padding: 0 20px;

		.title-2 {
			font-size: 20px;
			color: #1161BF;
			line-height: 30px;
			font-weight: 600;
			margin-top: 25px;
		}

		.title-3 {
			font-size: 14px;
			color: #212121;
			line-height: 21px;
			font-weight: 600;
			margin-bottom: 4px;
		}

		.border {
			height: 1px;
			background: #A4BFEC;
			margin-top: 12px;
			margin-bottom: 25px;
		}

		.desc {
			font-size: 14px;
			color: #666666;
			letter-spacing: 0;
			line-height: 21px;
			font-weight: 400;
			white-space: pre-line;
			margin-bottom: 12px;
		}

		.img-main {
			display: flex;
		}
	}
}
</style>