<template>
	<view class="ownership-container" >
		<!-- 自定义导航栏 -->
		<CustomNavbar
			title="我的产权"
			type="center"
			bgColor="#94f2f1"
			isLeft="true"
			@handleLeft="handleLeft"
		/>
		<!-- 背景视图 -->
		<view class="bg"></view>
		<!-- 内容区域 -->
		<view class="content" :style="{'margin-top':systemBarHeight + 'px'}">
			<!-- 顶部导航 -->
			<view class="flex-r-b challenge-top" @click="handleMenuSelect">
				<!-- 软著和专利的选项 -->
				<view class="flex-r-c" :class="{ 'challenge-active': currentIndex }"
					>软著</view
				>
				<view class="flex-r-c" :class="{ 'challenge-active': !currentIndex }"
					>专利</view
				>
				<!-- 底部指示条 -->
				<view
					class="challenge-top-bg"
					:style="{ left: currentIndex ? '19%' : '68%' }"
				></view>
			</view>

			<!-- 列表区域 -->
			<view class="list">
				<!-- 软著数据模板 -->
				<template v-if="currentIndex">
					<view class="item" v-for="(item, index) in dataList" :key="index"  >
						<!-- 标题和详细信息 -->
						<view>
							<text class="title">{{item.name}}</text>
						</view>
						<view>
							<text class="name">版本号</text>
							<text class="info">{{item.softwareVersion}}</text>
						</view>
						<view>
							<text class="name">登记日期</text>
							<text class="info">{{item.registerDate}}</text>
						</view>
						<view>
							<text class="name">著作分类</text>
							<text class="info">{{item.type}}</text>
						</view>
						<view>
							<text class="name">作业分类</text>
							<text class="info">{{item.type}}</text>
						</view>
						<view>
							<text class="name">著作人公司</text>
							<text class="info">{{item.industryCategory}}</text>
						</view>
						<view>
							<text class="name">著作人姓名</text>
							<text class="info">{{item.doctorName}}</text>
						</view>
						<view>
							<text class="name">登记号</text>
							<text class="info">{{item.registerNumber}}</text>
						</view>
						<!-- 查看详情按钮 -->
						<view class="view-detail" @click="toWebView(item.url)">查看详情</view>
					</view>
				</template>
				<!-- 专利数据模板 -->
				<template v-else>
					<view class="item" v-for="(item, index) in dataList" :key="index" >
						<view class="spec">
							AI大模型提示信息生成方法，装置，设备及存储介质
						</view>
						<text class="flag_01">{{item.category}}</text>
						<view>
							<text class="name">公布号</text>
							<text class="info">{{item.registerNumber}}</text>
						</view>
						<view>
							<text class="name">公告日</text>
							<text class="info">{{item.registerDate}}</text>
						</view>
						<view>
							<text class="name">专利权人</text>
							<text class="info">{{item.holder}}</text>
						</view>
						<view>
							<text class="name">发明人</text>
							<text class="info">{{item.inventor}}</text>
						</view>
						<view>
							<text class="name">摘要</text>
							<text class="info">{{item.digest}}</text>
						</view>
						<!-- 查看详情按钮 -->
						<view class="view-detail" @click="toWebView(item.url)"> 查看详情</view>
					</view>
				</template>
			</view>
			<!-- 自定义加载更多组件 -->
			<CustomLoadMore :status="loadStatus" />
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, inject, onMounted } from "vue";
import baseApi from "@/api/base";
import { onReachBottom } from "@dcloudio/uni-app";

// 注入的 showToast 方法，用于显示提示
const $showToast: any = inject("$showToast");

// 当前选中的索引，用于切换软著和专利
const currentIndex = ref(true);
// 更多
const loadStatus = ref("nomore");

// 数据列表（模拟数据）
const dataList = ref<any>([]);

// 请求参数
const paramsData = ref({
	type: 0,
	pageNum: 1,
	pageSize: 10,
});

// 数据总数
const pageTotal = ref(0);

/**
 * 处理顶部导航菜单的选择
 */
const handleMenuSelect = () => {
	currentIndex.value = !currentIndex.value; // 切换选中的索引
	dataList.value = []; //重置数据
	getData(); // 获取数据
};

/**
 * 跳转到详情页面
 */
const toPage = () => {
	uni.navigateTo({ url: "/subpackages/my/ownershipDetail/index" });
};

/**
 * 处理返回按钮事件
 */
const handleLeft = () => {
	uni.navigateBack({ delta: 1 });
};
const toWebView = (url:string) => {
	uni.navigateTo({url:'/subpackages/webview/index?url='+url})

}
/**
 * 获取数据
 */
const getData = async () => {
	loadStatus.value = 'loading'
	paramsData.value.type = currentIndex.value ? 1 : 2; // 根据当前索引设置请求类型
	const {
		data: { records, total },
	} = await baseApi.queryCopyrightList(paramsData.value);
	dataList.value.push(...records); // 设置数据列表
	pageTotal.value = total; // 设置数据总数

	if (dataList.value.length < total) {
		loadStatus.value = "loadmore";
	} else {
		loadStatus.value = "nomore";
	}
};
onReachBottom(() => {
	loadStatus.value = 'loading'
	if (dataList.value.length < pageTotal.value) {
		++paramsData.value.pageNum;
		getData();
	} else {
		loadStatus.value = "nomore";
	}
});
const systemBarHeight = ref(0);
// 获取系统栏高度
const getSysteminfo = () => {
	uni.getSystemInfo({
		success: (res) => {
			console.log(res.statusBarHeight);
			systemBarHeight.value = (res.statusBarHeight || 0) + 44
		},
	});
};
// 组件挂载时获取数据
onMounted(() => {
	getData();
	getSysteminfo();
});
</script>

<style lang="scss">
@import "./index.scss";
</style>
