<template>
	<view class="index-wrap">
		<view class="content">
			<view class="title">
				生涯罗盘
			</view>
			<view class="section">
				<view class="table" v-if="compassList.length > 0">
					<view class="tr">
						<view class="th">
						</view>
						<view class="th">
							职业名称
						</view>
						<view class="th">
							多元能力
						</view>
						<view class="th">
							兴趣测评
						</view>
						<view class="th">
							人格测评
						</view>
					</view>
					<view class="tr" v-for="(item,index) in compassList" @click="checkedJob(item)" :key="index">
						<view class="td">
							<view class="checked-btn" :class="checkedIndex==item.JobId?'on':''"></view>
						</view>
						<view class="td">
							{{item.Name}}
						</view>
						<view class="td">
							<view class="is-has" v-if="item.IsMulti"></view>
						</view>
						<view class="td">
							<view class="is-has" v-if="item.IsInterest"></view>
						</view>
						<view class="td">
							<view class="is-has" v-if="item.IsPersonal"></view>
						</view>
					</view>
				</view>
				<view class="empty" v-else>
					<view class="icon"></view>
					<view class="txt">暂无推荐职业，请先进行兴趣测评</view>
					<view class="nav-btn" @click="navTest">
						去测评
					</view>
				</view>
			</view>
			<view class="title">
				我的职业
			</view>
			<view class="section">
				<scroll-view
				  class="job-table"
				  scroll-y    
				   scroll-x   
				  @scrolltolower="loadMore" 
				  :scroll-with-animation="false"
				>
				  <view class="tr">
					<view class="th">
						职业规划方向
					</view>
					<view class="th">
						能力要求
					</view>
					<view class="th">
						推荐学习课程
					</view>
					<view class="th">
						推荐岗位
					</view>
				  </view>
				  <view 
					class="tr" 
					v-for="(item, index) in jobList" 
					:key="index"
				  >
				  <view class="td">
				  	{{item.JobName}}
				  </view>
					<view class="td">
						<text v-for="(ritem,rindex) in item.AbilityPlanList" :key="rindex">{{ritem}}</text>
					</view>
					<view class="td">
						<text v-for="(ritem,rindex) in item.CoursePlanList" :key="rindex">{{ritem.Name}}</text>
					</view>
					<view class="td">
						<text v-for="(ritem,rindex) in item.JobNameList" :key="rindex">{{ritem}}</text>
					</view>
				  </view>
				  <view class="loading" v-if="isLoading">
					加载中...
				  </view>
				  <view class="no-more" v-if="noMore">
					没有更多数据了
				  </view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/packageCa/apiCa/studentProfile.js"
	import apiuser from "@/packageCa/apiCa/user.js"
	export default {
		data() {
			return {
				compassList: [],//罗盘列表
				checkedIndex: null,
				jobList: [],//我的职业
				page: 1,
				isLoading: false,
				noMore: false,
			}
		},
		created() {
			this.getCareerCompassList();
			this.getGXCareerPlanList();
		},
		methods: {
			// 去测评
			navTest(){
				uni.navigateTo({
					url: `/packageCa/pagesTest/testList`
				})
			},
			// 添加日志
			postLog(operationType, remarks, beforeData = "", afterData = ""){
				try {
				  const data = {
				    OperationType: operationType,
				    Remarks: remarks,
				    BeforeOperationJson: beforeData,
				    AfterOperationJson: afterData
				  };
					console.log(data);
				  // return;
				  // 异步记录日志，不阻塞主流程
				  apiuser.saveUserOperationLog(data).then((res) => {
				    console.log('[Operation Log] 记录成功', res);
				  }).catch((err) => {
				    console.error('[Operation Log] 记录失败', err);
				  });
				} catch (e) {
				  console.error('[Operation Log] 记录异常', e);
				}
			},
			//选中职业添加
			async checkedJob(ITEM){
				uni.showLoading({
					title: "添加中..."
				}) 
				this.checkedIndex = ITEM.JobId;
				const res = await api.saveGXCareerPlan(ITEM.JobId);
				uni.hideLoading();
				if (res.Result == 1) {
					uni.showToast({
						title: "添加成功",
						icon: "none"
					})
					this.getGXCareerPlanList();
					this.postLog(304,`【新增】新增了${ITEM.Name}意向职业`,"",JSON.stringify(ITEM))
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},
			// 获取生涯罗盘
			async getCareerCompassList() {
				uni.showLoading({
					title: "加载中..."
				}) 
				const res = await api.getCareerCompassList();
				uni.hideLoading();
				if (res.Result == 1) {
					this.compassList = res.Data.list;
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},
			// 获取职业
			async getGXCareerPlanList(){
				this.noMore = false;
				this.page = 1;
				const res = await api.getGXCareerPlanList("",this.page,10);
				if (res.Result == 1) {
					this.jobList = res.Data.list;
					if(res.Data.list.length == 0){
						this.noMore = true;
					}
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},
			// 加载更多
			async loadMore(){
				if(this.noMore){
					return;
				}
				this.isLoading = true;
				const res = await api.getGXCareerPlanList("",++this.page,10);
				this.isLoading = false;
				if (res.Result == 1) {
					this.jobList = this.jobList.concat(res.Data.list);
					if(res.Data.list.length < 10){
						this.noMore = true;
					}
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	page {
		background: #EEF1F8 url("#{$image-oss-url}/17.png") no-repeat;
		background-size: contain;
	}
</style>
<style lang="scss" scoped>
	$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	.head-bar {
		position: relative;
	    text-align: center;
	    font-size: 36rpx;
	    font-weight: 600;
	    height: 60rpx;
	    line-height: 60rpx;
		.go-back {
		    position: absolute;
		    left: 10rpx;
		    top: 0;
		    width: 60rpx;
		    height: 60rpx;
		    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABUklEQVRoQ+3ZOwrCQBCA4UlyCVsrQauQdPYewcNYWXoHK1s9gYeYdIKlracYWYggkgiTnccuaB3D/+1sYEMKyPxXZN4Pf0DMBOu6XpZluQOANRGduq7bc+/nNoE+/gwAq3c0IrJ72H/grtDQ9UPxAPBAxDn3/uaAkfjQvUXES9IA6fiANZuARrwZQCveBKAZrw7QjlcFWMSrAaziVQCW8eIA63hRgEe8GMArXgTgGR8N8I6PAqQQPxmQSvxkQNM0VwDYfJ3dJ53nuef/7+vZx+l+9W8pxE+aQNu2CyK6ZwsI4VlvoQDI/iFOCcF+iD/3fgqTiAKkMIlogDdCBOCJEAN4IUQBHghxgDVCBWCJUANYIVQBFgh1gDbCBKCJMANoIUwBGghzwA/EExFn3HdkF8AYIpvPrO9VDu8TVVUdiKghomNWH7q5W2Xserct9Af0K/AChQ/cMY9OGScAAAAASUVORK5CYII=") center no-repeat;
		    background-size: 38rpx 38rpx;
		}
	}
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 60rpx;
		padding-bottom: 100rpx;
		.icon {
			width: 240rpx;
			height: 240rpx;
			background: url("#{$image-oss-url}/empty.png") no-repeat;
			background-size: 100%;
			margin-bottom: 20rpx;
		}
		.txt {
			font-size: 28rpx;
			color: #A4B3E5;
		}
		.nav-btn {
			width: 335rpx;
			height: 80rpx;
			margin: 40rpx auto 0;
			background-color: #1989fa;
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
		}
	}
	.index-wrap {
		 .content {
			 padding: 0 20rpx;
			 margin-top: 60rpx;
			 .title {
				font-size: 36rpx; 
				color: #010101;
				margin-bottom: 30rpx;
				font-weight: 600;
			 }
			 .section {
				width: 650rpx;
				padding: 30rpx 30rpx 50rpx;
				background-color: #ffffff;
				border-radius: 14rpx;
				margin-bottom: 50rpx; 
				.table {
					border-left: 2rpx solid #eef2fd;
					border-top: 2rpx solid #eef2fd;
					border-right: 2rpx solid #eef2fd;
					border-radius: 6rpx;
					overflow-x: auto;
					overflow-y: auto;
					max-height: 470rpx;
					.tr {
						display: -webkit-box;
						.th {
							width: 192rpx;
							height: 72rpx;
							line-height: 72rpx;
							text-align: center;
							background: #F6F9FE;
							font-size: 24rpx;
							color: #333333;
							border-bottom: 2rpx solid #eef2fd;
							&:nth-child(1){
								width: 60rpx;
							}
							&:nth-child(2){
								width: 250rpx;
							}
						}
						.td {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 192rpx;
							min-height: 72rpx;
							font-size: 24rpx;
							color: #333333;
							text-align: center;
							border-bottom: 2rpx solid #eef2fd;
							&:nth-child(1){
								width: 60rpx;
							}
							&:nth-child(2){
								width: 250rpx;
								word-break: break-all;
							}
							.checked-btn {
								width: 28rpx;
								height: 28rpx;
								background: #FFFFFF;
								border-radius: 50%;
								border: 2rpx solid #999999;
								&.on {
									position: relative;
									border-color: #1989fa;
									background: #1989fa;
									&:before {
										position: absolute;
										left: 50%;
										top: 50%;
										transform: translate(-50%,-50%);
										content: "";
										display: block;
										width: 12rpx;
										height: 12rpx;
										border-radius: 50%;
										background: #fff;
									}
								}
							}
							.is-has {
								width: 48rpx;
								height: 48rpx;
								background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAPXSURBVGiB7VlBbttIEKweLrXH5QKW4JuZH/gHa79g5RfEeoFpwBJ8o3Tz2gGkvCD6gZMXWE/QD8TcDDvA8hopntpDxlnZniFHJGMggOomcWbY1Wx2VzeBLbbY4peGNH3gzhkPRBCLYI9ABCISQUbiswjy5RKzfCJ5U/erTWD3nPHDAw5E8DeArs8eEjMSn759w7QumVoEds6YKIUTAHGV/SRyEUyWS7yvSqQSgXafxyJIqxr+HCRyEqMv72Sy6d6NCXQGTAEMN93nAxLT1QqnmzwNbwJRwihsIRUgqWyhH+ZK4ej2QjKfxcr31DDE+BWMB4B9rXETJYx8FnsR6AyYiuC4tmn+iFu/Y+yzsDSEOgN2AVw3YpbbiikAgC+cNLy7lFHRVp8n4OWJipgrhTd3/0gPhC1khrvnLMx0vxVdNBmnkVT5HAQm95dy+uM3cSCWeNBECqDnOscZQlHCKAyxELF6pha0xul6zo8Sxq0WFq71SuGNKys5QygM0X0N433woHHiulb0Dvy1kWV+GDqMLyxcUqCxrARMDvYSZr4gMHFlFFN5iwpX3O5z33bBSiAMETccPvPVEoXpEIJZ0WUSB7b/XSFkZVsFJHKlcFSmb5QUE1QKf1j/d9zUx/sfSUzJYs+JYOKja24vJCPgfLlJezq31gFR2HMckpMYPW9ETModW+TGvKySwjRFmkgtlXgd/gQcxs+CAD2bNw2ZXrvPWOT/WNUapy8OshiudXWdZQ8hjc+Wv/e1xtsilRgEaxVTMP3yTpzh1Rkw1RqLEq+vw7+QKfVysclKwzDEYueMVll9eyEZBFMS+fKr3fu754w7Ay6waVMk9lphJaC1u7CIIFIK43afH2xPQwlGIpjYsk67z32tcVNFXzmiwq6FooRRq4V/Pc717p7afR4DGFetL1rj0BaSTjHXGfDasxpnSuGwiIQZAnzYxOB1kMjvr+RP2zWnFiLxyfP8WGt3z2AkQL2e4rHhscBJIAgwK9En6+ia3uEJTDNyU1eWULud6SRgQsLJ3IKhiXPAvEda47q28cSsKB0XtpSmivo+BYggfWwBwxbSJjTVk9piQWlPTJaoyKeItca43edxEyMYolxHeQ22fuY0zgUSs/srOSxb5zUXuruUUZnqbBjZaoUjn4Xek7kgQO+VSGRK4dB3PrrxcLc94E8bMRYpXhcqjdd3zpiIIG247SydwtlQ+QOH0UsnJJJaRARTJRht4vWn22ti95yx1nhrJmvWxtuCjMDHQOF9VcMf0ehHPtNadkWwR36fbJj+Onv80Adgfn8l8ybvu8UWW/zC+A/xK5HWhynIGQAAAABJRU5ErkJggg==") center no-repeat;
								background-size: 90%;
							}
						}
					}
				}
				.job-table {
					border-left: 2rpx solid #eef2fd;
					border-top: 2rpx solid #eef2fd;
					border-right: 2rpx solid #eef2fd;
					border-radius: 6rpx;
					height: 400rpx;
					.tr {
						display: -webkit-box;
						.th {
							width: 250rpx;
							height: 72rpx;
							line-height: 72rpx;
							text-align: center;
							background: #F6F9FE;
							font-size: 24rpx;
							color: #333333;
							border-bottom: 2rpx solid #eef2fd;
						}
						.td {
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							align-items: center;
							width: 250rpx;
							padding: 10rpx 0;
							min-height: 52rpx;
							font-size: 24rpx;
							color: #333333;
							text-align: center;
							border-bottom: 2rpx solid #eef2fd;
							font-size: 24rpx;
							color: #333333;
							text {
								margin: 0 5rpx 5rpx;
							}
						}
					}
					.no-more,
					.loading {
						font-size: 26rpx;
						color: #999;
						padding: 30rpx 0;
						text-align: center;
					}
					
				}
			 }
		 }
	}
</style>