<template>
	<view class="page" :style="vuex_theme">
		<view class="item">
			<view style="display: flex; align-items: baseline;">
				<view class="t1">
					{{detailObj.form.studentName}}
				</view>
				<view class="t3">
					学号：{{detailObj.form.studentIDNumber}}
				</view>
			</view>
			<view class="t2 t2top14">
				实习项目: {{detailObj.form.projectName?detailObj.form.projectName:'--'}}
			</view>
			<view class="t2">
				指导老师: {{detailObj.form.teacherName?detailObj.form.teacherName:'--'}}
			</view>
			<view class="t2">
				申请时间: {{timeFormat(detailObj.createdTime)}}
			</view>
			<view v-if="detailObj.status == 'wait'" class="status" style="color: #F49A23;">
				待鉴定
			</view>
			<view v-else class="status" style="color: var(--primary-color);">
				已鉴定
			</view>
		</view>
		<view style="background-color: #fff; margin-top: 20rpx; padding-left: 10px;">
			<u-tabs :list="menu_list" lineWidth="30rpx" lineHeight="4rpx" lineColor="var(--primary-color)"
				:inactiveStyle="{fontSize:'32rpx', color:'#4A4A53'}"
				:activeStyle="{fontSize:'32rpx', color:'var(--primary-color)'}" @click="click">
			</u-tabs>
		</view>
		<view v-if="current==0">
			<view class="current1">
				<view class="content">
					<view class="cj_left">
						<view class="cj">
							<view class="cj_t">
								{{detailObj.totalScore}}
							</view>
							<view class="cj_d">
								分
							</view>
						</view>
						<view class="all">
							总成绩
						</view>
					</view>
					<view class="line"></view>
					<view class="list_right">
						<view class="list_right_item">
							实践课程：{{detailObj.form.courseName}}
						</view>
						<view class="list_right_item" style="margin: 10px 0;">
							实习计划：{{detailObj.form.planName}}
						</view>
						<view class="list_right_item">
							实习项目：{{detailObj.form.projectName}}
						</view>
					</view>
				</view>
				<view class="inter-end">
					实习结束日期：{{detailObj.form.endTime}}
				</view>
				<view class="box">
					<view class="t">
						<view class="green"></view>
						<view class="title">
							实习报告
						</view>
					</view>
					<view class="list">
						<text class="item1">评分：</text>
						<text class="item2">{{detailObj.reportAverageScore?`${detailObj.reportAverageScore}分`:'-'}}</text>
					</view>
				</view>
				
				<view class="box">
					<view class="t">
						<view class="green"></view>
						<view class="title">
							自我评价
						</view>
					</view>
					<view class="list">
						<text class="item1">评分：</text>
						<text class="item2">{{detailObj.studentScore}}分</text>
					</view>
					<view class="list list_item_top">
						<text class="item1">评语：</text>
						<text class="item2">{{detailObj.studentComment}}</text>
						<!-- <text class="item2">12321312390128390218309809sda890asd809s0a9d8a90sd8a90asd809asd89asd890as8d9</text> -->
					</view>
					<view class="listflex list_item_top">
						<text class="item1">附件：</text>
						<view class="list_flex_right">
							<view class="pdffj" v-for="(item,index) in stuattachmentsFile " @click="openLink(item)">
								<!-- <image class="img" src="/static/img/common/link.png"></image> -->
								<text class="look">{{item.filename}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="box">
					<view class="t">
						<view class="green"></view>
						<view class="title">
							企业评价
						</view>
					</view>
					<view class="list">
						<text class="item1">企业联系人：</text>
						<text class="item2">{{detailObj.companyContactName?`${detailObj.companyContactName}`:'-'}}</text>
					</view>
					<view class="list list_item_top">
						<text class="item1">联系方式：</text>
						<text class="item2">{{detailObj.companyContactPhone?`${detailObj.companyContactPhone}`:'-'}}</text>
					</view>
					<view class="list list_item_top">
						<text class="item1">评分：</text>
						<text class="item2">{{detailObj.companyScore?`${detailObj.companyScore}分`:'-'}}</text>
					</view>
					<view class="list list_item_top">
						<text class="item1">评语：</text>
						<text class="item2">{{detailObj.companyComment?`${detailObj.companyComment}`:'-'}}</text>
					</view>
					<view class="listflex list_item_top">
						<text class="item1">附件：</text>
						<view class="list_flex_right">
							<view class="pdffj" v-for="(item,index) in comattachmentsFile " @click="openLink(item)">
								<!-- <image class="img" src="/static/img/common/link.png"></image> -->
								<text class="look">{{item.filename}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="box">
					<view class="t">
						<view class="green"></view>
						<view class="title">
							教师评价
						</view>
					</view>
					<view class="list list_item_top">
						<text class="item1">评分：</text>
						<text class="item2">{{detailObj.schoolScore?`${detailObj.schoolScore}分`:'-'}}</text>
					</view>
					<view class="list list_item_top">
						<text class="item1">评语：</text>
						<text class="item2">{{detailObj.schoolComment?detailObj.schoolComment:'-'}}</text>
					</view>
					<view class="listflex list_item_top">
						<text class="item1">附件：</text>
						<view class="list_flex_right">
							<view class="pdffj" v-for="(item,index) in schattachmentsFile " @click="openLink(item)">
								<!-- <image class="img" src="/static/img/common/link.png"></image> -->
								<text class="look">{{item.filename}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view style="height: 184rpx;"></view>
				
				<view v-if="detailObj.status == 'wait'" class="botBtnV_centralize">
					<view class="botBtn" @click="submit()">成绩鉴定</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="current2">
				<view v-if="list.length > 0" >
					<view class="list">
						<view v-for="(item,index) in list" :key="index" @click="handelClick(item)">
							<view class="list-item">
								<view style="display: flex; align-items: center;">
									<text>实习单号:</text>
									<text class="green">{{item.number}}</text>
								</view>
								<view style="display: flex; align-items: center; margin-top: 15rpx;">
									<text>实习时间: {{`${timeFormat(item.startTime,'yyyy/mm/dd')} - ${timeFormat(item.endTime,'yyyy/mm/dd')}`}}</text>
								</view>
								<view style="display: flex; align-items: center; margin-top: 15rpx;">
									<text>实习企业: {{item.companyName}}</text>
								</view>
								<view style="display: flex; align-items: center; margin-top: 15rpx;">
									<text>实习岗位: {{item.jobName}}</text>
								</view>
							</view>
						</view>
					</view>
					<view style="height: 40rpx;"></view>
					<c-loading :loading="loading"></c-loading>
					<view style="height: 40rpx;"></view>
				</view>
				<view v-else style="width: 100%; height: 100%;">
					<view style="margin: 150px auto 0; width: 187px;height: 110px;">
						<image style="width: 187px;height: 110px;" :src="'/static/img/home/nodata.png'"></image>
					</view>
					<view style="width: 100%; margin-top: 10px; text-align: center; font-size: 13px; color: #121212;">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		scoredetailUrl,
		getImgUrlApi,
		scoreinternshipInfoUrl
	} from '@/config/api.js';
	import listMixin from "@/common/mixins/list-mixin.js";

	export default {
		mixins: [listMixin],
		data() {
			return {
				id: '',
				detailObj: {},
				menu_list: [{
					name: '实习成绩'
				}, {
					name: '实习信息'
				}],
				current: 0,
				stuattachmentsFile: [],
				comattachmentsFile: [],
				schattachmentsFile: [],
				list: []
			}
		},

		onLoad(e) {
			console.log(e)
			this.id = e.id
			
			this.finished = false;
			this.loading = "loadmore";
			this.page = 0;
			this.list = [];
			this._getList();
		},

		onShow() {
			this.loadData()
		},

		methods: {
			loadData() {
				scoredetailUrl(this.id).then(res => {
					if (res) {
						this.detailObj = res;
						this.detailObj.form.endTime = this.timeFormat(this.detailObj.form.endTime,'yyyy-mm-dd')
						this.stuhandleDataspdf()
						this.comhandleDataspdf()
						this.schhandleDataspdf()
					}
				})
			},
			
			timeFormat(timestamp, format = 'yyyy-mm-dd hh:MM') {
				return timestamp > 0 ? uni.$u.timeFormat(timestamp, format) : '--'
			},
			
			handelClick(e) {
				this.$u.route({
					url: `pages/main/home/achievementDetail/achievementDetail?&id=${e.id}`
				})
			},
			
			click(item) {
				console.log('item', item);
				this.current = item.index;
				
				if (this.current == 0) {
					this.loadData()
				}else {
					this.finished = false;
					this.loading = "loadmore";
					this.page = 0;
					this.list = [];
					this._getList();
				}
			},
			
			submit() {
				this.$u.route({
					url: `pages/main/home/achievementApply/achievementApply?&id=${this.id}`
				})
			},
			
			stuhandleDataspdf() {
				let a1 = []
				let a2 = []
				if (this.detailObj.studentAttachment) {
					a1 = JSON.parse(this.detailObj.studentAttachment)
				}
				if (this.detailObj.studentAttachmentFile) {
					a2 = JSON.parse(this.detailObj.studentAttachmentFile)
				}
				a1 = a1.concat(a2)
				this.stuattachmentsFile = a1
			},
			
			comhandleDataspdf() {
				let a1 = []
				let a2 = []
				if (this.detailObj.companyAttachment) {
					a1 = JSON.parse(this.detailObj.companyAttachment)
				}
				if (this.detailObj.companyAttachmentFile) {
					a2 = JSON.parse(this.detailObj.companyAttachmentFile)
				}
				a1 = a1.concat(a2)
				this.comattachmentsFile = a1
			},
			
			schhandleDataspdf() {
				let a1 = []
				let a2 = []
				if (this.detailObj.schoolAttachment) {
					a1 = JSON.parse(this.detailObj.schoolAttachment)
				}
				if (this.detailObj.schoolAttachmentFile) {
					a2 = JSON.parse(this.detailObj.schoolAttachmentFile)
				}
				a1 = a1.concat(a2)
				this.schattachmentsFile = a1
			},
			
			openLink(e) {
				var _this = this
			
				uni.showLoading({
					title: '努力加载中~',
					mask: true
				})
			
				getImgUrlApi({
					bucket: e.bucket,
					filePath: e.object
				}).then(data => {
					console.log("data...", data)
					if (e.mime_type.indexOf("image") != -1) {
						_this.openImage(data.url)
					} else {
						uni.downloadFile({
							url: data.url,
							success: function(res) {
								var filePath = res.tempFilePath;
								uni.openDocument({
									filePath: filePath,
									showMenu: true,
									success: function(res) {
										console.log('打开文档成功');
									},
									complete: function() {
										uni.hideLoading();
									}
								});
							}
						});
					}
				})
			},
			openImage(imgPath) {
				let array = new Array(1).fill(imgPath);
				uni.previewImage({
					urls: array,
					success(res) {
						uni.hideLoading();
						console.log('openImage success');
					},
					fail(res) {
						uni.hideLoading();
						console.log('openImage fail:', res);
					}
				});
			},
			
			// 模拟后端分页
			async getData(requestParams) {
				const {
					search = {}
				} = requestParams;
			
				let params = {};
				params.pageNumber = requestParams.page + 1;
				params.pageSize = 10;
				params.id = this.id;
				
				console.log(12312312,params)
				return await scoreinternshipInfoUrl(params);
			},
			
			// 数据请求(没错就是这么少的代码)
			async _getList() {
				if (this.page == 0) {
					this.list = [];
				}
			
				uni.showLoading({
					title: '数据加载中~',
					mask: true
				})
			
				// 根据实际情况修改自己修改key
				let result = await this.getData({
					page: this.page, // 传入页码
					size: this.size, // 传入每页条数
					search: this.search, // 传入搜索的对象
				});
			
				// console.log(result.records)
			
				this.total = result.total;
			
				result.records.map((item) => {
					this.list.push(item);
				});
				
				if (this.list.length == this.total) {
					this.finished = true;
					this.loading = 'nomore';
				}
			
				uni.hideLoading();
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>

<style lang="scss" scoped>	
	.page {
		width: 100%;

		.item {
			position: relative;
			padding: 20px;
			background-color: #FFFFFF;
		
			.t1 {
				font-size: 17px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
		
			.t2 {
				margin-top: 6px;
				font-size: 12px;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #000000;
			}
		
			.t3 {
				margin-left: 8px;
				font-size: 13px;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: rgba(0,0,0,0.45);
			}
		
			.t2top14 {
				margin-top: 12px;
			}
		
			.status {
				position: absolute;
				bottom: 20px;
				right: 17px;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			}
		}

		.current1 {
			padding: 10px;
			background-color: #FFFFFF;
			
			.content {
				padding: 14px 19px;
				height: 100px;
				background: #F7F7F7;
				border-radius: 8px;
				display: flex;
				align-items: center;
				
				.cj_left {
					display: flex;
					flex-direction: column;
					
					.cj {
						display: flex;
						align-items: baseline;
						
						.cj_t {
							height: 40px;
							font-size: 40px;
							font-family: DIN-Black, DIN;
							font-weight: 900;
							color: #121212;
						}
						
						.cj_d {
							margin-left: 4px;
							font-size: 12px;
							font-family: PingFangSC-Light, PingFang SC;
							font-weight: 300;
							color: #646464;
						}
					}
					
					.all {
						margin-top: 8px;
						font-size: 12px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #121212;
					}
				}
				
				.line {
					margin-left: 15px;
					width: 1px;
					height: 39px;
					background-color: #EEEEEE;
				}
				
				.list_right {
					display: flex;
					flex-direction: column;
					margin-left: 15px;
					
					.list_right_item {
						font-size: 12px;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						color: #121212;
					}
				}
			}	
			
			.inter-end {
				padding-left: 10px;
				margin-top: 10px;
				font-size: 12px;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #121212;
			}
			
			.box {
				padding-left: 10px;
				margin-top: 20px;
				
				.t {
					display: flex;
					align-items: center;
					
					.green {
						width: 3px;
						height: 10px;
						background: var(--primary-color);
					}
					
					.title {
						margin-left: 10rpx;
						font-size: 14px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #000000;
					}
					
				}
			}
			
			.list {
				margin-top: 9px;
				
				.item1 {
					font-size: 12px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #646464;
				}
				
				.item2 {
					-webkit-box-orient: vertical;
					overflow: hidden;
					word-break: break-all;
					word-wrap: break-word;
					margin-left: 2px;
					font-size: 12px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #121212;
				}
			}
			
			.listflex {
				margin-top: 9px;
				display: flex;
				
				.item1 {
					font-size: 12px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #646464;
				}
				
				.list_flex_right {
					display: flex;
					flex-direction: column;
					margin-left: 2px;
					width: 85%;
				
					.pdffj {
						margin-bottom: 5px;
						
						.img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 12rpx;
						}
						
						.look {
							width: 100%;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							white-space: normal;
							word-break: break-all;
							word-wrap: break-word;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: var(--primary-color);
						}
					}
					
				}
			}
			
			.list_item_top {
				margin-top: 0px;
			}
			
			.botBtnV_centralize {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 24rpx 32rpx;
				// height: 144rpx;
				background-color: #FFFFFF;
			
				.botBtn {
					height: 48px;
					background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
					border-radius: 24px;
					font-size: 17px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 48px;
					text-align: center;
					margin-left: 0px;
				}
				
				.openChat {
					top: 0;
					left: 0;
					position: absolute;
					width: 100%;
					height: 100%;
					opacity: 0;
					z-index: 999;
				}
			}
		}
		
		.current2 {
			padding: 20rpx 20rpx 0;
			
			.list-item {
				// width: 100%;
				// height: 150px;
				padding: 36rpx 40rpx;
				background: #FFFFFF;
				margin-bottom: 10px;
				
				text {
					font-size: 14px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: rgba(0,0,0,0.65);
					max-width: 90%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.green {
					margin-left: 5px;
					color: var(--primary-color);
				}
			}
		}
	}
</style>