<template>
	<!-- 新鲜事页/话题分类 -->
	<view class="news-topic-cate">
		<u-navbar placeholder>
			<u-icon slot="left" @click="nav" name="arrow-left" color="#000000" size="22"></u-icon>
			<view slot="center" style="margin-right: 100rpx;">
				<u-search v-model="queryParams.asset_name" placeholder="搜索您想要的内容" @search='search'
					:showAction="false"></u-search>
			</view>
		</u-navbar>
		<!-- 标签 -->
		<u-sticky customNavHeight='88px' bgColor="#fff">
			<u-tabs class="wrap-card" ref="tabs" @change="changeTab" :list="groupList" :current="tabIndex"
				lineColor="#3c9cff" keyName='group_name' :activeStyle="{color:'#3c9cff'}"
				:inactiveStyle="{color:'#909399'}" lineWidth="30" :scrollable="false">
			</u-tabs>
		</u-sticky>
		<!-- 图文列表 -->
		<!-- 有内容 -->
		<view v-if="assetList.length > 0">
			<topic-list @click.native="goTopicDetail(item1)" :item="item1" v-for="(item1,index1) in assetList"
				:key="index1"></topic-list>
			<u-loadmore :status="status"></u-loadmore>
		</view>
		<!-- 无内容 -->
		<view v-else>
			<view class="default-img">
				<image style='width: 400rpx;height: 200rpx' src="../../static/img/demo/default-img.png" mode="">
				</image>
				<text class="desc">暂无内容，去其他的看看吧</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		topicList
	} from "@/utils/data/data.js"
	import TopicList from "@/pages/news/cpns/topic-lists.vue"
	import {
		groupList,
		assetList,
		assetInfo
	} from '@/api/train.js'
	export default {
		components: {
			TopicList
		},
		data() {
			return {
				// 标签栏
				tabIndex: 0,
				queryParams: {
					asset_name: "",
					org_id: getApp().globalData.org_id,
					type: '',
					group_id: '',
					page: 1,
					limit: 20,
				},
				groupParams: {
					type: "",
					org_id: getApp().globalData.org_id,
				},
				groupList: [],
				assetList: [],
				count: 0,
				status: 'loadmore',
			}
		},
		onReachBottom() {
			if (this.assetList.length >= this.count) {
				this.status = 'nomore';
				return
			}
			this.queryParams.page++ 
			this.status = 'loading';
			this.getLists()

		},
		onLoad(options) {
			this.queryParams.type = options.type
			this.groupParams.type = options.type
			this.getGroupList()
		},
		methods: {
			getGroupList() {
				var that = this
				groupList(that.groupParams).then(res => {
					that.groupList = res.data
					that.queryParams.group_id = res.data[0].group_id
					that.getLists()
				})
			},

			async getLists() {
				var that = this
				try {
					uni.showLoading({
						title: '加载中...'
					})
					var res = await assetList(that.queryParams)
					uni.hideLoading()
					if (res.code == 0) {
						if (res.data.length < that.queryParams.limit) {
							that.status = 'nomore'
						}
						that.assetList = that.assetList.concat(res.data)
						that.count = res.count
					}

				} catch (err) {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
					uni.hideLoading()
				}
			},
			getFileType(url) {
				// 从 URL 中提取文件名
				const fileName = url.split('/').pop();
				// 获取文件扩展名
				const fileExtension = fileName.split('.').pop().toLowerCase();

				// 定义文件类型映射
				const fileTypes = {
					'doc': 'doc',
					'xls': 'xls',
					'ppt': 'ppt',
					'pdf': 'pdf',
					'docx': 'docx',
					'xlsx': 'xlsx',
					'pptx': 'pptx'
				};
				// 返回对应的文件类型或 'unknown'
				return fileTypes[fileExtension] || 'unknown';
			},
			getPdfInfo(item) {
				var that = this
				uni.showLoading({
					title: '加载文档中..'
				})
				assetInfo({
					id: item.asset_id
				}).then(Response => {
					uni.downloadFile({
						url: Response.data.pdf_url,
						success: function(res) {
							uni.openDocument({
								filePath: res.tempFilePath,
								fileType: that.getFileType(Response.data.pdf_url),
								showMenu: true,
								success: function(res) {
									uni.hideLoading()
								},
								fail: function(err) {
									uni.hideLoading()
								}
							});
						},
						complete: function(r) {
							uni.hideLoading()
						}
					});
				})
			},

			goTopicDetail(item) {
				console.log(item, 'item');
				switch (item.type) {
					case 1:
						uni.navigateTo({
							url: '/pages/home/detail?assets_id=' + item.asset_id
						})
						break;
					case 2:
						// 职业
						this.getPdfInfo(item)
						break;
					case 4:
						// 创业
						this.getPdfInfo(item)
						break;
					case 3:
						// 课程
						uni.navigateTo({
							url: '/pages/news/course?assets_id=' + item.asset_id
						})
						break;
					default:
						break;
				}


			},

			// tab栏切换
			changeTab(item) {
				this.tabIndex = item.index
				this.swiperIndex = item.index
				this.queryParams.page = 1
				this.assetList = []
				this.queryParams.group_id = item.group_id
				this.getLists()
			},
			nav() {
				uni.navigateBack({
					delta: 1
				})
			},
			search() {
				this.queryParams.page = 1
				this.assetList = []
				this.getLists()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f8ff;
	}

	.news-topic-cate {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.default-img {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 350rpx;

		.desc {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #595959;
			margin-top: 30rpx;
		}
	}
</style>