<template>
	<view class="index-wrap">
		<view class="content">
			<view class="banner-wrap"></view>
			<view class="desc">
				SMART法则是目标设定和任务管理的一种结构化方法， 用于设定和分析目标的可行性，其核心是通过五个关键原则实现目标的科学设定与执行:
			</view>
			<view class="smart-item s-code">
				<view class="code">
					S
				</view>
				<view class="info">
					<view class="title">
						目标具体性
					</view>
					<view class="txt">
						在大学四年内，掌握英语教学法、教育心理学等专业知识，具备独立设计和实施英语课程的教学能力。
					</view>
				</view>
			</view>
			<view class="smart-item m-code">
				<view class="code">
					M
				</view>
				<view class="info">
					<view class="title">
						目标可测量性
					</view>
					<view class="txt">
						通过参加英语教师资格认证考试，获得相关证书；每年至少发表一篇英语教学方面的论文或参加一次学术研讨会。
					</view>
				</view>
			</view>
			<view class="smart-item a-code">
				<view class="code">
					A
				</view>
				<view class="info">
					<view class="title">
						目标可实现性
					</view>
					<view class="txt">
						参加培训课程、阅读专业书籍、进行教学实践等。确保每周投入一定的时间进行学习和实践。
					</view>
				</view>
			</view>
			<view class="smart-item r-code">
				<view class="code">
					R
				</view>
				<view class="info">
					<view class="title">
						目标相关性
					</view>
					<view class="txt">
						考虑自己的英语水平和教学经验，目标符合个人能力和职业发展规划。同时，关注英语教育行业的动态和趋势，确保目标具有前瞻性。
					</view>
				</view>
			</view>
			<view class="smart-item t-code">
				<view class="code">
					T
				</view>
				<view class="info">
					<view class="title">
						目标时限性
					</view>
					<view class="txt">
						一年内完成英语教师资格认证考试的学习准备，两年内积累一定的教学经验，三年内发表第一篇教学论文等。
					</view>
				</view>
			</view>
			<view class="target-content">
				<view class="target-tabbar">
					<view class="item" :class="checkedTargetCode ==item.EncodeId?'on':''" v-for="(item,index) in targetList" :key="index" @click="changeTarget(item)">
						<text v-text="tabs[index]"></text>
						<view class="del-btn" @click="delTarget(item)"></view>
					</view>
					<view class="add-btn" :class="checkedTargetCode ==-1?'on':''" v-if="targetList.length < 5" @click="addTarget">
						+ 新增目标
					</view>
				</view>
				<view class="form-wrap" >
					<view class="form-item">
						<view class="label">
							目标描述
						</view>
						<view class="input-wrap">
							<textarea v-model="targetForm.TargetDesc"
								placeholder="如:在未来三年内成功考取国内知名大学计算机专业的硕士研究生，并在研究生期间发表至少一篇高水平学术论文"></textarea>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							目标类型
						</view>
						<view class="check-wrap">
							<view class="checked-item" @click="targetForm.TargetType = 1">
								<view class="icon" :class="targetForm.TargetType == 1?'on':''"></view>
								<text class="text">就业型</text>
							</view>
							<view class="checked-item"  @click="targetForm.TargetType = 2">
								<view class="icon" :class="targetForm.TargetType == 2?'on':''"></view>
								<text class="text">创业型</text>
							</view>
							<view class="checked-item"  @click="targetForm.TargetType = 3">
								<view class="icon" :class="targetForm.TargetType == 3?'on':''"></view>
								<text class="text">国内升学型</text>
							</view>
							<view class="checked-item"  @click="targetForm.TargetType = 4">
								<view class="icon" :class="targetForm.TargetType == 4?'on':''"></view>
								<text class="text">国外升学型</text>
							</view>
						
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							具体性
						</view>
						<view class="input-wrap">
							<textarea v-model="targetForm.Targetspecificity" placeholder="该目标足够具体明确吗?请说明"></textarea>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							可测量性
						</view>
						<view class="input-wrap">
							<textarea v-model="targetForm.Measurability" placeholder="该目标的结果如何评估，是否可量化?请说明"></textarea>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							可实现性
						</view>
						<view class="input-wrap">
							<textarea v-model="targetForm.Realizability" placeholder="该目标是否考虑自身的条件和外部环境，真的可以实现吗?请说明"></textarea>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							相关性
						</view>
						<view class="input-wrap">
							<textarea v-model="targetForm.Correlation" placeholder="该目标符合你自己的兴趣、价值观与未来的人生规划吗?请说明"></textarea>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							时限性
						</view>
						<view class="input-wrap">
							<textarea v-model="targetForm.Timeliness" placeholder="该目标是否有明确的时间规划?请说明"></textarea>
						</view>
					</view>
					<view class="tip">
						注：如果分析不下去，说明目标不可行，需要优化或
						重新设定目标
					</view>
					<view class="btn-wrap">
						<view class="commit-btn" @click="saveTarget">
							确认提交
						</view>
						<view @click="goPlan" class="nav-btn">
							前往制定学习计划
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/packageCa/apiCa/studentProfile.js"
	export default {
		data() {
			return {
				barHeight: wx.getWindowInfo().statusBarHeight,
				tabs:['目标一 ', '目标二 ', '目标三 ', '目标四 ', '目标五 '],
				targetList: [],////目标列表
				checkedTargetCode: "",//// 目标码
				videoUrlVisitor: "",
				newTargetParams: {
					Id: 0,
					TargetDesc: "",
					TargetType: "",
					Targetspecificity: "",
					Measurability: "",
					Realizability: "",
					Correlation: "",
					Timeliness: "",
				},//新增目标字段
				targetForm: {},//当前选中的目标
			}
		},
		created() {
			this.querySmartTargets();
		},
		methods: {
			goPlan(){
				if(this.targetList.length==0){
					uni.showToast({
						title: "请先新增目标",
						icon: "none"
					})
					return;
				}
				uni.navigateTo({
					url:"/packageCa/userCenter/learningPlan"
				})	
			},
			// 添加目标
			addTarget(){
				this.targetForm = {
					Id: 0,
					TargetDesc: "",
					TargetType: "",
					Targetspecificity: "",
					Measurability: "",
					Realizability: "",
					Correlation: "",
					Timeliness: "",
				};
				this.checkedTargetCode = -1;
			},
			// 保存目标
			async saveTarget(){
				const res = await api.saveSmartTarget(this.targetForm);
				if (res.Result == 1) {
					uni.showToast({
						title: "保存成功",
						icon: "success"
					})
					this.querySmartTargets();
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},
			// 切换目标标签
			changeTarget(ITEM){
				if(ITEM.EncodeId == this.checkedTargetCode){
					return;
				}
				this.checkedTargetCode = ITEM.EncodeId;
				this.targetForm = this.targetList.filter(item=>item.EncodeId == ITEM.EncodeId)[0];
			},
			// 删除目标
			async delTarget(ITEM){
				await new Promise((resolve,reject)=>{
					uni.showModal({
						title: '提示',
						content: '是否确认删除该目标',
						confirmText: '确定',
						cancelText: '取消',
						confirmColor: '#1677ff', 
						cancelColor: '#999999',							
						success: (res)=> {
							if (res.confirm) {
								resolve();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				})
				const res = await api.deleteSmartTarg(ITEM.EncodeId);
				if (res.Result == 1) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					  });
					  this.checkedTargetCode="";
					this.targetForm={
						Id: 0,
						TargetDesc: "",
						TargetType: "",
						Targetspecificity: "",
						Measurability: "",
						Realizability: "",
						Correlation: "",
						Timeliness: "",
					};				  
					this.querySmartTargets();
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},
			// 获取
			async querySmartTargets() {
				const res = await api.querySmartTargets();
				if (res.Result == 1) {
					this.targetList = res.Data;
					if(res.Data.length > 0){
						if(this.checkedTargetCode == ""){
							this.checkedTargetCode = res.Data[0].EncodeId;
							this.targetForm = res.Data[0];
						}else if(this.checkedTargetCode == -1){
							this.checkedTargetCode = res.Data[res.Data.length-1].EncodeId;
							this.targetForm = res.Data[res.Data.length-1];
						}else {
							this.targetForm = this.targetList.filter(item=>item.EncodeId == this.checkedTargetCode)[0];
						}
					}
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},
			//确认表单
			async commitForm() {
				if (!this.isCommit) {
					return;
				}
				uni.showLoading({
					title: "保存中..."
				})
				let mobileCode = this.code;
				const data = {
					SchoolName: this.schoolName,
					EduLevel: this.eduLevel,
					SpecialtyName: this.specialtyName,
					Phone: this.mobile,
					StartYear: this.startYear
				}
				const res = await api1.saveUserBasisInfo(mobileCode, data);
				uni.hideLoading();
				if (res.Result == 1) {
					uni.navigateBack()
				} 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: #fff url("#{$image-oss-url}/17.png") no-repeat;
		background-size: contain;
		overflow-y: scroll;
	}
</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;
		}
	}
	.video-content {
		padding: 0;
		width: 710rpx;
		background: #000;
		.video {
			width: 100%;
			// height: 400rpx;
		}
	}

	.index-wrap {
		.content {
			padding-bottom: 60rpx;

			.banner-wrap {
				width: 750rpx;
				height: 423rpx;
				background: url("#{$image-oss-url}/gaoxiao/academicEvaluation/smart-banner.png");
				background-size: 100%;
				margin-bottom: 50rpx;
			}

			.desc {
				margin-bottom: 40rpx;
				font-size: 28rpx;
				line-height: 48rpx;
				color: #666666;
				padding: 0 30rpx;
			}

			.smart-item {
				padding: 0 30rpx 0 55rpx;
				position: relative;
				margin-bottom: 25rpx;

				.code {
					position: absolute;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 86rpx;
					height: 110rpx;
					padding-right: 20rpx;
					text-align: center;
					line-height: 110rpx;
					font-size: 50rpx;
					color: #fff;
				}

				.info {
					width: 530rpx;
					padding: 30rpx 30rpx 30rpx 106rpx;
					background-color: #ffedef;
					border-radius: 10rpx;

					.title {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						margin-bottom: 20rpx;
					}

					.txt {
						font-size: 28rpx;
						line-height: 40rpx;
						color: #999999;
					}
				}

				&.s-code {
					.code {
						background: url("#{$image-oss-url}/gaoxiao/academicEvaluation/smart-s.png") no-repeat;
						background-size: 100%;
					}

					.info {
						background: #ffedef;
					}
				}

				&.m-code {
					.code {
						background: url("#{$image-oss-url}/gaoxiao/academicEvaluation/smart-m.png") no-repeat;
						background-size: 100%;
					}

					.info {
						background: #fff4e5;
					}
				}

				&.a-code {
					.code {
						background: url("#{$image-oss-url}/gaoxiao/academicEvaluation/smart-a.png") no-repeat;
						background-size: 100%;
					}

					.info {
						background: #e9f8e0;
					}
				}

				&.r-code {
					.code {
						background: url("#{$image-oss-url}/gaoxiao/academicEvaluation/smart-r.png") no-repeat;
						background-size: 100%;
					}

					.info {
						background: #edf3ff;
					}
				}

				&.t-code {
					.code {
						background: url("#{$image-oss-url}/gaoxiao/academicEvaluation/smart-t.png") no-repeat;
						background-size: 100%;
					}

					.info {
						background: #fcedff;
					}
				}

			}

			.target-content {
				padding: 0 30rpx;

				.target-tabbar {
					border-top: 2rpx solid #eee;
					padding-top: 50rpx;
					margin-bottom: 50rpx;
					display: flex;
					flex-wrap: wrap;

					.item {
						position: relative;
						width: 205rpx;
						height: 64rpx;
						line-height: 64rpx;
						text-align: center;
						border-radius: 34rpx;
						border: solid 2rpx #eeeeee;
						font-size: 28rpx;
						color: #999999;
						margin-right: 15rpx;
						margin-bottom: 15rpx;

						&.on {
							color: #1676FF;
							border-color: #1676FF;
						}

						.del-btn {
							position: absolute;
							right: 10rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 48rpx;
							height: 48rpx;
							z-index: 8;
							background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAolJREFUaEPtWG1SwjAQTYI4HkIc+KXcgp5EehLxJOBJ4BboLzvgIRyQRFNaplPS7NukjMNM+xOym/f242UTKa78k1eOX3QE/juDXQa6DERGoCuhyABGm0MZ+Hi4fTFCTO1uRut0/PWzit6ZcLAe3g3H2XdG7UMSWA/6UynlvOroz2imlXpDNqAA1P9f399MpFJ2v6EQInva7EY+HySB90F/KaScOJxkUojF42b3ygXpWm8jLg+HeX0vo9TIFyiSQO5Y689GkMasTK+XhmajCXhersak4+1+EZUBa1yQWBZpdfkLykbRWzOXQwS8tSMzUDq3JJTWz0YI54bFuswolVDZ8EUdjXyJCyZQGviiVpLw9QZlb7ROOCrHJpCXlEOZXE1elVwq6lZxQiQ6iADYF3ZZ3ht5WfhKz5jV03afhKhZMAEGCS+uotzSEPCsJm7aAGxupzmqNNEyikSHas6aj6B6d+GIKqG6Q5QEdboiAQuWUZ/zYo6xBx71QecF5aSVHjgddMchDAFfmrRCopUSYkS+HtRoEtEEAPB2prejcdMXRSKKADmp2tNVqcQ1Jp+pEjBDtapCCPjyMgJMs/mpjQyCdRJBGeCAPzU5da84LmSTYBMAwNt7s3OihIdARjmxCMSALzMBHnZwJmACgNrY29GMuiMDYzXrnIAIIOAFYyQGmxrqCZJA2+CZTZ2T8D2teAlA4AOUgz1+eLLrJYA0HPcOW9dxSpmoCw9dQkf9dj6pIE2LTJRNgUL8kwQsAKdyMJqWIuG41cEXHohASaLyLkS+WVKgz0qpeHeyv1NSXLWFCVTVg3q44oKPWc8mELPZJWw7ApeIKsdnlwFOtC6xtsvAJaLK8Xn1GfgFGlSeQAhcb/UAAAAASUVORK5CYII=") center no-repeat;
							background-size: 60%;
						}
					}

					.add-btn {
						width: 155rpx;
						height: 64rpx;
						text-align: center;
						line-height: 64rpx;
						font-size: 28rpx;
						color: #1676FF;
						border-radius: 34rpx;
						border: solid 2rpx #fff;
						&.on {
							border-color: #1676FF;
						}
					}
				}

				.form-wrap {
					.form-item {
						.label {
							font-size: 28rpx;
							color: #333333;
							margin-bottom: 30rpx;
						}
						.check-wrap {
							display: flex;
							flex-wrap: wrap;
							.checked-item {
								width: 50%;
								display: flex;
								align-items: center;
								margin-bottom: 30rpx;
								.icon {
									width: 20rpx;
									height: 20rpx;
									border-radius: 6rpx;
									margin-right: 10rpx;
									border: solid 2rpx #787a7c;
									&.on {
										width: 24rpx;
										height: 24rpx;
										border: none;
										background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAtFBMVEUZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifoZifqezf3S6P5Tp/ur1P3///+o0/2m0f3j8f43mPuhz/3p9P8tk/pJovvd7f652/2gzv3v9/+Fwfy62/3r9f81l/spkfrX6/6y2P2Wyf3w9/8di/qx1/2VyP30+f8lj/rg7/6Qxv18vPz3+/89nPtEn/vt9v/+//8wlfvf7v5GoPsAAABXZ1/lAAAAEHRSTlMABm7H8xvP0Adt+fjRb8v03bb1CgAAAAFiS0dEOzkO9GwAAAAHdElNRQfpChsLJB43hRvxAAAAw0lEQVQoz3WS13LCMBRErxu2aV4Slh5IwDih9/r/HxbBUASW90EzOkczmltExLIdF1pcx7ZExcshlZyn3hs44AcSwphQHLNwJG8WBUmzysenOtOiStZMok42mgbRItsd3MRXt3fn3+TPlV9Fnxzc/iXjIR4i+SX/LpcROW7iKTDpklNgRs6H0AUWS3K1JjdbvAokDapsdngXSPbkQePPOo6n+KwXlNVEN7vtGYOyJfBNvBiYl8H3LmtilcqRTqNySa3PP/+nJn7xFbPrAAAAAElFTkSuQmCC") no-repeat;
										background-size: 100%;
									}
								}
								.text {
									font-size: 28rpx;
									color: #787a7c;
								}
							}
						}

						.input-wrap {
							margin-bottom: 40rpx;

							textarea {
								width: 650rpx;
								height: 120rpx;
								padding: 20rpx;
								background-color: #ffffff;
								border-radius: 6rpx;
								border: solid 2rpx #eeeeee;
								resize: none;
								font-size: 28rpx;
								line-height: 40rpx;

								&::-webkit-input-placeholder {
									color: #999999;
									font-size: 28rpx;
								}
							}
						}
					}

					.tip {
						font-size: 28rpx;
						line-height: 40rpx;
						color: #1676FF;
						margin-bottom: 50rpx;
					}

					.btn-wrap {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-bottom: 50rpx;

						.commit-btn {
							width: 335rpx;
							height: 80rpx;
							background-color: #1676FF;
							border-radius: 40rpx;
							font-size: 28rpx;
							color: #fff;
							text-align: center;
							line-height: 80rpx;
						}

						.nav-btn {
							width: 331rpx;
							height: 76rpx;
							font-size: 28rpx;
							text-align: center;
							line-height: 76rpx;
							background-color: #fff;
							border-radius: 40rpx;
							color: #1676FF;
							border: solid 2rpx #1676FF;
						}
					}
				}
			}
		}
	}
</style>