<template>
	<view>
		<u-sticky>
			<view style="position: relative;">
				<u-swiper :list="swiperList" keyName="src" interval='10000' circular height="470rpx"
					bgColor="#ffffff"></u-swiper>
				<view class="search-input">
					<view style="width: 90%;margin: 0 auto;">
						<u-search @search='search' searchIconColor='#e6e6e6' placeholderColor='#e6e6e6' color='#FFFFFF'
							placeholder="搜索招聘/课程/技能" v-model="queryParams.asset_name" :showAction="false"></u-search>
					</view>
				</view>
				<view class="tabs-list">
					<view class="list">
						<view class="left">
							<view class="item" @click="btntabs(item)" v-for="(item,index) in tabsList" :key="index">
								<image class="images" :src="queryParams.type==item.type?item.imgSelect:item.img"
									mode=""></image>
								<text :style="{color:queryParams.type==item.type?'#006EEF':'#707070'}"
									class="text1">{{item.title}}</text>
							</view>
						</view>
						<view @click="btnMore" class="right">
							<image class="images1" src="../../static/img/demo/gengduo.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view v-if="assetList.length>0" class="last-update">
			<topic-list @click.native="goTopicDetail(item)" :item="item" v-for="(item,index) in assetList"
				:key="index"></topic-list>
		</view>
		<u-loadmore v-if="assetList.length>0" :status="status" />
		<view v-if="assetList.length==0" class="default-img">
			<image style='width: 400rpx;height: 200rpx' src="../../static/img/demo/default-img.png" mode=""></image>
			<text class="desc">暂无内容，去其他的看看吧</text>
		</view>
	</view>
</template>

<script>
	import TopicList from "@/pages/news/cpns/topic-list.vue"
	import {
		trainHas,
		assetList,
		assetInfo,
		bannerList
	} from '@/api/train.js'
	import {
		userInfo
	} from '@/api/login.js'
	export default {
		components: {
			TopicList
		},
		data() {
			return {
				queryParams: {
					asset_name: "",
					org_id: getApp().globalData.org_id,
					type: 3,
					page: 1,
					limit: 20,
				},
				swiperList: [],
				assetList: [],

				tabsList: [{
						img: '/static/img/demo/kecheng.png',
						imgSelect: '/static/img/demo/kecheng-select.png',
						title: '适应',
						type: 3
					}, {
						img: '/static/img/demo/chuangye.png', 
						imgSelect: '/static/img/demo/chuangye-select.png', 
						title: '职业',
						type: 2
					},
					{
						img: '/static/img/demo/jineng.png',
						imgSelect: '/static/img/demo/jineng-select.png', 
						title: '创业',
						type: 4
					},
					{
						img: '/static/img/demo/zhaopin.png',
						imgSelect: '/static/img/demo/zhaopin-select.png',
						title: '招聘',
						type: 1
					}
				],
				userInfo: {},
				status: 'loadmore',
				count: 0
			}
		},
		onReachBottom() {
			if (this.assetList.length >= this.count) {
				this.status = 'nomore';
				return
			}
			this.queryParams.page++
			this.status = 'loading';
			this.getList()

		},
		onLoad() {
			this.getUserInfo()
			this.getList()
			this.getBannerList()
		},
		onShow() {
			//查看是否填写意向调查表
			this.getTrainHas()
		},
		methods: {
			async getList() {
				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()
				}
			},
			getBannerList() {
				bannerList({
					position: 'home',
					org_id: getApp().globalData.org_id
				}).then(res => {
					this.swiperList = res.data
				})
			},
			search() {
				this.queryParams.page=1
				this.assetList = []
				this.getList()
			},
			getUserInfo() {
				userInfo().then(res => {
					this.userInfo = res.data
					uni.setStorageSync('userInfo', res.data)
				})
			},
			getTrainHas() {
				trainHas().then(res => {
					if (!res.data.train) {
						uni.showModal({
							title: '提示',
							content: '请选择技能培训意向',
							success: function(res) {
								uni.navigateTo({
									url: '/pages/home/train'
								})
							}
						});

					}
				})
			},
			// swiper滑动
			changeSwiper(e) {
				this.tabIndex = e.detail.current
			},
			btntabs(item) {
				this.queryParams.type = item.type
				this.queryParams.page = 1
				this.assetList = []
				this.getList()
			},
			// 更多
			btnMore() {
				uni.navigateTo({
					url: '/pages/news/news-topic-cate?type=' + this.queryParams.type
				})
			},

			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) {
				switch (this.queryParams.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;
				}


			}
		}
	}
</script>

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

	.search-input {
		width: 100%;
		// position: relative;
		// bottom: 270rpx;
		position: absolute;
		bottom: 200rpx;
	}

	.tabs-list {
		// border: solid 1px red;
		width: 100%;
		position: absolute;
		bottom: -70rpx;

		.list {
			width: 95%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			// position: relative;
			// bottom: 200rpx;
			height: 180rpx;

			.left {
				width: 82%;
				display: flex;
				align-items: center;
				// border: solid 1px red;

				.item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.images {
						width: 60rpx;
						height: 60rpx;
					}

					.text1 {
						font-size: 26rpx;
						color: #000000;
						margin-top: 10rpx;
					}
				}
			}

			.right {
				width: 18%;
				display: flex;
				justify-content: center;

				.images1 {
					width: 55rpx;
					height: 55rpx;
					padding-right: 10rpx;
				}
			}
		}

	}

	.last-update {
		// border: solid 1px red;
		// position: relative;
		// bottom: 200rpx;
		width: 95%;
		margin: 0 auto;
		padding: 70rpx 0 20rpx;

	}

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

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

	/deep/.u-search__content {
		background-color: rgba(255, 255, 255, 0.4) !important;
	}

	/deep/.u-search__content__input {
		background-color: rgba(255, 255, 255, 0) !important;
	}
</style>