<template>
    <AppLayout :title="title" :show-bg-image="false" >
		<view class="tab-list" >
			<view class="tab" :class="{active: activeType == 1}" @click="tabChange(1)">岗位推荐
			</view>
			<view class="tab" :class="{active: activeType == 2}"  @click="tabChange(2)">政策推荐
			</view>
			<view class="tab" :class="{active: activeType == 3}"  @click="tabChange(3)">培训推荐
			</view>
		</view>	
		<view class="page-container" >
			<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom" lower-threshold="50">
				<view class="main-list" :style="getBackgroundStyle('k.png')" v-if="activeType==1">
					<view class="list-top">
						<view class="list-title">
							<text>推荐岗位列表</text>
							<view class="title-line" style="left: 70rpx;"></view>
						</view>
						<view class="title-total">
							共<text class="total-num">{{totalNum}}</text>个
						</view>
					</view>
					<view class="list-box" v-if="dataList.length>0">
						<view class="con-box" v-for="(item,index) in dataList" :key="index">
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/person.png'" mode=""></image>
									<view class="item-label">
										岗位名称：
									</view>
								</view>
								<view class="item-right">
									{{item.jobTitle}}
								</view>
							</view>
							<view class="form-item">
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/help.png'" mode=""></image>
									<view class="item-label">
										公司名称：
									</view>
								</view>
								<view class="item-right">
									{{item.companyName}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/base.png'" mode=""></image>
									<view class="item-label">
										薪资待遇：
									</view>
								</view>
								<view class="item-right">
									{{item.minSalary}}-{{item.maxSalary}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/num.png'" mode=""></image>
									<view class="item-label">
										工作地点：
									</view>
								</view>
								<view class="item-right">
									{{item.jobLocation}}
								</view>
							</view>
						</view>
					</view>
				    <empty v-else pdTop="200"></empty>
				</view>
				<view class="main-list" :style="getBackgroundStyle('k.png')" v-if="activeType==2">
					<view class="list-top">
						<view class="list-title">
							<text>推荐政策列表</text>
							<view class="title-line" style="left: 70rpx;"></view>
						</view>
						<view class="title-total">
							共<text class="total-num">{{totalNum}}</text>项
						</view>
					</view>
					<view class="list-box" v-if="dataList.length>0">
						<view class="con-box" v-for="(item,index) in dataList" :key="index">
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/person.png'" mode=""></image>
									<view class="item-label">
										政策名称：
									</view>
								</view>
								<view class="item-right">
									{{item.zcmc}}
								</view>
							</view>
							<view class="form-item">
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/help.png'" mode=""></image>
									<view class="item-label">
										政策类型：
									</view>
								</view>
								<view class="item-right">
									{{ item.type === '3' ? '个人就业政策' : '单位就业政策' }}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/base.png'" mode=""></image>
									<view class="item-label">
										政策级别：
									</view>
								</view>
								<view class="item-right">
									{{ item.zcLevel }}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/num.png'" mode=""></image>
									<view class="item-label">
										发文单位：
									</view>
								</view>
								<view class="item-right">
									{{item.sourceUnit}}
								</view>
							</view>
							<view class="form-item">
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/date.png'" mode=""></image>
									<view class="item-label">
										发布时间：
									</view>
								</view>
								<view class="item-right">
									{{item.publishTime}}
								</view>
							</view>
						</view>
					</view>
				    <empty v-else pdTop="200"></empty>
				</view>
				<view class="main-list" :style="getBackgroundStyle('k.png')" v-if="activeType==3">
					<view class="list-top">
						<view class="list-title">
							<text>推荐培训列表</text>
							<view class="title-line" style="left: 70rpx;"></view>
						</view>
						<view class="title-total">
							共<text class="total-num">{{totalNum}}</text>门
						</view>
					</view>
					<view class="list-box" v-if="dataList.length>0">
						<view class="con-box" v-for="(item,index) in dataList" :key="index">
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/person.png'" mode=""></image>
									<view class="item-label">
										课程标题：
									</view>
								</view>
								<view class="item-right">
									{{item.videoTitle}}
								</view>
							</view>
							<view class="form-item">
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/help.png'" mode=""></image>
									<view class="item-label">
										课程分类：
									</view>
								</view>
								<view class="item-right">
									{{getabelByValue(item.category,classificationOptions)}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/base.png'" mode=""></image>
									<view class="item-label">
										讲师：
									</view>
								</view>
								<view class="item-right">
									{{item.teacherName}}
								</view>
							</view>
							<view class="form-item" >
								<view class="item-left">
									<image class="item-img" :src="baseUrl+'/dispatch/num.png'" mode=""></image>
									<view class="item-label">
										时长：
									</view>
								</view>
								<view class="item-right">
									{{formatDuration(item.hour)}}
								</view>
							</view>
						</view>
					</view>
				    <empty v-else pdTop="200"></empty>
				</view>
			</scroll-view>
		</view>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive, onMounted } from 'vue';
import { onLoad,onShow } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
import config from "@/config.js"

const title = ref('');
const activeType = ref(1)
const pageNum = ref(1)
const pageSize = ref(10)
const totalNum=ref(0)
const dataList=ref([])
const classificationOptions=ref([])
const goalPersonId=ref([])
const baseUrl = config.imgBaseUrl
const getBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});
function tabChange(val){
	activeType.value=val
	getDataList()
}
function formatDuration(duration) {
  // 如果已经是字符串格式，直接返回
    if (typeof duration === 'string') {
	  return duration
	}
	// 如果是数字（秒数），格式化为时间字符串
	if (typeof duration === 'number') {
		const hours = Math.floor(duration / 3600)
		const minutes = Math.floor((duration % 3600) / 60)
		const secs = duration % 60
		if (hours > 0) {
			return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
		} else {
			return `${minutes}:${secs.toString().padStart(2, '0')}`
		}
	}
	return duration
}
function getDictionary(){
	$api.myRequest('/system/public/dict/data/type/question_classification').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				classificationOptions.value.push(obj)
			})
		}
	});
}
function getabelByValue(value,arr) {
	if (!Array.isArray(arr)) {
	    return ''
	}
	const item = arr.find(item => item.value === String(value))
	return item ? item.text : '暂无'
}
function getDataList(){
	dataList.value=[]
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	if(activeType.value==1){
		let params={
			goalPersonId: goalPersonId.value,
			pageNum: 1,
			pageSize: 1
		}
		$api.myRequest('/dispatch/job/willingness/list',params,'get',9100,header).then((resData) => {
			if(resData.rows&&resData.rows.length>0){
				const education = resData.rows[0].education?resData.rows[0].education:''
				const jobType = resData.rows[0].jobType?resData.rows[0].jobType:''
				const type = resData.rows[0].type?resData.rows[0].type:''
				const jobParams = {
					education,
					jobType, 
					type
				};
				$api.myRequest('/ks/cms/job/recommend?education',jobParams,'get',9100,header,false,'jobRecommend').then((resData) => {
					dataList.value=resData.data
					if(dataList.value.length>10){
						dataList.value=dataList.value.slice(0,10)
					}
				})
			}else{
				$api.myRequest('/ks/cms/job/recommend?education',{},'get',9100,header,false,'jobRecommend').then((resData) => {
					dataList.value=resData.data
					if(dataList.value.length>10){
						dataList.value=dataList.value.slice(0,10)
					}
				})
			}
			
		});
	}else if(activeType.value==2){
		let policyParams={
			pageNum: 1,
			pageSize: 5
		}
		$api.myRequest('/portal/policyInfo/portalList',policyParams,'get',9100,header,false,'policyRecommend').then((resData) => {
			dataList.value=resData.rows
		})
	}else if(activeType.value==3){
		let willingParams = {
			goalPersonId: goalPersonId.value,
			pageNum: 1,
			pageSize: 1
		}
		$api.myRequest('/dispatch/train/willingness/list',willingParams,'get',9100,header).then((resData) => {
			if(resData.code==200){
				let train = {};
				if (resData.rows && resData.rows.length > 0) {
					train = resData.rows[0];
				}
				let trainParams = {
					category: train.courseType || '',
					pageNum: 1,
					pageSize: 5
				};
				$api.myRequest('/dispatch/train/trainVideo/table',trainParams,'get',9100,header).then((resData) => {
					dataList.value=resData.rows
				})
			}else{
			}
			
		});
	}
	
	
}
function scrollBottom(){
	// if(pageNum.value<totalNum.value/pageSize.value){
	// 	pageNum.value++
	// 	getDataList()
	// }
}
onLoad((options) => {
	goalPersonId.value=options.goalPersonId
});
const runAsyncTasks = async () => {
  await getDictionary()
  await getDataList()
}
onShow(()=>{
	dataList.value=[]
	pageNum.value=1
	runAsyncTasks()
})

</script>

<style lang="stylus" scoped>
.tab-list
  display: flex
  margin: 16rpx 30rpx 0rpx
  text-align: center
  border-radius: 16rpx
  background: #fff
  align-items: center
  justify-content: space-between
  padding:20rpx 40rpx 0rpx
.tab
  padding-bottom: 10rpx
  font-size: 30rpx
.active
  color: #1A62CE
  border-bottom: 4rpx solid #1A62CE
  position: relative
  font-weight: bold
image
  height: 100%
  width: 100%
.page-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top)); /* 如果 AppLayout 有 header，需减去 */
  /* 或者简单用：height: 100vh; */
  padding-bottom: 140rpx
}
.nearby-scroll
    // 使用flex布局让scroll-view自适应高度，占据剩余空间
  flex: 1
  // overflow: hidden;
.task-box
  display: flex
  align-items: center
.task-label
  font-size: 30rpx
  color: #6E7E9B
.task-name
  font-weight: bold
  font-size: 30rpx
  color: #3D61AC
.main-list
  background-color: #ffffff
  padding: 20rpx 20rpx 28rpx 20rpx
  margin: 30rpx 30rpx
  box-shadow: 0px 3px 20px 0px rgba(0,105,234,0.1)
  border-radius: 12px
.list-top
  display: flex
  align-items: center
  justify-content: space-between
.list-title
  font-weight: bold
  font-size: 36rpx
  color: #404040
  position: relative

.title-line
  position: absolute
  bottom: -10rpx
  left: 70rpx
  width: 70rpx
  height: 8rpx
  background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%)
  border-radius: 4rpx
.title-total
  font-size: 24rpx
  color: #999999
.total-num
  color: #3088FF
  margin-left: 4rpx
  margin-right: 4rpx
  font-weight: bold
  font-size: 26rpx

.list-box
  margin-top: 40rpx

:deep(.uni-forms-item__label)
  width: 194rpx !important
  font-size: 28rpx;
  color: #404040;
  
.search-container
  padding: 20rpx 0rpx 0rpx 0rpx
.title-total
  font-size: 24rpx
  color: #999999
.total-num
  color: #3088FF
  margin-left: 4rpx
  margin-right: 4rpx
  font-weight: bold
  font-size: 26rpx
.search-item
  display: flex
  align-items: center
  margin-bottom: 30rpx

.label
  width: 160rpx
  font-size: 28rpx
  color: #404040
  flex-shrink: 0

.input,
.picker
  background: #FFFFFF
  flex: 1
  min-width: 0
.search-box-btn
  border-radius: 32rpx !important
  background: #3088FF !important
  margin-right: 16rpx
.reset-box-btn
  border-radius: 32rpx !important
  background: #02B44D
  color: #fff
.con-box
  background: #fff
  padding: 20rpx
  box-shadow: 0px 0px 6rpx 0px rgba(0,71,200,0.16)
  border-radius: 24rpx
  border: 1rpx solid #EDF5FF
  margin-top: 30rpx
.form-title
  display: flex
  align-items: center

.form-name
  font-weight: bold
  font-size: 30rpx
  color: #595959
  margin-right:16rpx
.form-type
  border-radius: 8rpx;
  border: 2rpx solid #FF7D26;
  font-size: 24rpx
  color: #F1690E
  padding: 4rpx 10rpx
.form-item
  display: flex
  align-items: center
  justify-content: space-between
  margin-top: 30rpx
.item-left
  display: flex
  align-items: center
.item-img
  width: 26rpx
  height: 26rpx
  margin-right: 10rpx
.item-label
  font-size: 26rpx
  color: #B3B3B3
  width: 190rpx
.item-right
  font-size: 26rpx
  color: #737373
  // overflow: hidden
  // text-overflow: ellipsis
  // white-space: nowrap
  word-wrap: break-word
  overflow-wrap: break-word
  white-space: normal
.form-btns
  margin-top:30rpx
.form-box-btn
  border-radius: 50rpx !important
  margin-right: 24rpx
  padding: 0rpx 40rpx
.detail-btn
  background: #EDF5FF
  border: 1px solid #3088FF
  font-size: 28rpx
  color: #3088FF
.follow-btn
  background: #EEF9F3
  border: 1px solid #00933E
  font-size: 28rpx
  color: #00933E
.recommend-btn
  background: linear-gradient(92deg, #0DCCFF 0%, #4760FF 100%)
  font-size: 28rpx
  color: #FFFFFF
.button-group 
	position: fixed
	bottom: 0
	left: 0
	width: 100%
	height: 120rpx
	background: #fff
.btns
  height: 120rpx
  width: 100%
  line-height: 120px
  display: flex
  align-items: center
  justify-content: space-between
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1)

.btn {
  width: 45%;
  height: 80rpx;
  font-size: 30rpx;
  border-radius: 8rpx;
}

.reset-btn {
  background-color: #D8E9FF;
  color: #1176FF;
}

.submit-btn {
  background-color: #368BFF;
  color: white;
}
.float-btn{
	position: fixed;
	bottom: 100rpx;
	right: 50rpx;
	background: #368BFF;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	line-height: 100rpx;
	text-align: center;
	color: #fff;
}
</style>
