<template>
	<view>
		<view class="example-body" v-if="listCards.length>0">
			<view v-for="(item,index) in listCards" :key="index" class="example-box" style="position: relative;flex: 1;" >
				<view class="uni-common-mt">
					<view class="uni-list">
						<view class="uni-list-cell" hover-class="uni-list-cell-hover">
							<view class="uni-padding-wrap">
								<view class="uni-flex uni-row">
									<view class="mydefineText" style="width: 200upx;">技能名称</view>
									<view class="mydefineText rightText">{{item.skillName}}</view>
								</view>
							</view>
						</view>
						<view class="uni-list-cell" hover-class="uni-list-cell-hover">
							<view class="uni-padding-wrap">
								<view class="uni-flex uni-row">
									<view class="mydefineText" style="width: 200upx;">获得日期</view>
									<view class="mydefineText rightText">{{item.getDate}}</view>
								</view>
							</view>
						</view>
						<view class="uni-list-cell" hover-class="uni-list-cell-hover">
							<view class="uni-padding-wrap">
								<view class="uni-flex uni-row">
									<view class="mydefineText" style="width: 200upx;">职称等级</view>
									<view class="mydefineText rightText">{{item.titleLevelName}}</view>
								 </view>
							</view>
						 </view>
						 <view class="uni-list-cell" hover-class="uni-list-cell-hover">
						 	<view class="uni-padding-wrap">
						 		<view class="uni-flex uni-row">
						 			<view class="mydefineText" style="width: 200upx;">技工等级</view>
						 			<view class="mydefineText rightText">{{item.skillLevelName}}</view>
						 		 </view>
						 	</view>
						  </view>
						  <view class="uni-list-cell" hover-class="uni-list-cell-hover">
						  	<view class="uni-padding-wrap">
						  		<view class="uni-flex uni-row">
						  			<view class="mydefineText" style="width: 200upx;">证书有效期</view>
						  			<view class="mydefineText rightText">{{item.certificateValidity}}</view>
						  		 </view>
						  	</view>
						   </view>
						   <view class="uni-list-cell" hover-class="uni-list-cell-hover">
						   	<view class="uni-padding-wrap">
						   		<view class="uni-flex uni-row">
						   			<view class="mydefineText" style="width: 200upx;">年审日期</view>
						   			<view class="mydefineText rightText">{{item.trialTime}}</view>
						   		 </view>
						   	</view>
						    </view>
							<view class="uni-list-cell" hover-class="uni-list-cell-hover">
								<view class="uni-padding-wrap">
									<view class="uni-flex uni-row">
										<view class="mydefineText" style="width: 200upx;">聘任单位</view>
										<view class="mydefineText rightText">{{item.appointUnit}}</view>
									 </view>
								</view>
							 </view>
							 <view class="uni-list-cell" hover-class="uni-list-cell-hover">
							 	<view class="uni-padding-wrap">
							 		<view class="uni-flex uni-row">
							 			<view class="mydefineText" style="width: 200upx;">聘任时间</view>
							 			<view class="mydefineText rightText">{{item.appointTime}}</view>
							 		 </view>
							 	</view>
							  </view>
							  <view class="uni-list-cell" hover-class="uni-list-cell-hover">
							  	<view class="uni-padding-wrap">
							  		<view class="uni-flex uni-row">
							  			<view class="mydefineText" style="width: 200upx;">如何获得</view>
							  			<view class="mydefineText rightText">{{item.getWays}}</view>
							  		 </view>
							  	</view>
							   </view>
							   <view class="uni-list-cell" hover-class="uni-list-cell-hover">
							   	<view class="uni-padding-wrap">
							   		<view class="uni-flex uni-row">
							   			<view class="mydefineText" style="width: 200upx;">证书名称</view>
							   			<view class="mydefineText rightText">{{item.certificateName}}</view>
							   		 </view>
							   	</view>
							    </view>
								<view class="uni-list-cell" hover-class="uni-list-cell-hover">
									<view class="uni-padding-wrap">
										<view class="uni-flex uni-row">
											<view class="mydefineText" style="width: 200upx;">评定机构</view>
											<view class="mydefineText rightText">{{item.evaluationInstitution}}</view>
										 </view>
									</view>
								 </view>
				
					</view>
				</view>
			</view>
			<uni-load-more  :status="loading_status"></uni-load-more>
			<view class="goHome" @click='goMain()'>
				<img src="../../static/img/gohome.png">
			</view>
		</view>
		<view class="example-body" v-else>
			<no-record ></no-record>
		</view>
	</view>
</template>

<script>
	import noRecord from '@/components/xinsoft-no-record/xinsoft-no-record';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import {
		config
	} from '../../request/js/config.js'
	export default { 
		components: {
			noRecord,uniLoadMore
		},
		data() {
			return {
				pageno:1,//当前第几页
				pagesize:5,//每页加载数据条数
				employeeId:'',
				config:config,
				deviceInfo:{},
				filterResult:{},
				listCards: [],
				loading_status: 'more',//more（loading前）、loading（loading中）、noMore（没有更多了）
			}
		},
		onLoad(options) {
			this.employeeId = options.id
			// //获取档案的专业技能。
			// this.$http.request({
			// 	url: '/apis/professionalSkills/detail/9',
			// 	method: 'get',
			// }).then(res=>{
			// 	console.log(res)
			// 	if(res.data.code == 0 && res.data.data){
			// 		console.log('进来了')
			// 		// var useTime = res.data.data.using_time;  //开始使用时间。
			// 		// var service_year = res.data.data.service_year;	//使用年限。
			// 		// var end_year = '';
			// 		// if(useTime && service_year){
			// 		// 	end_year = this.addDate(useTime,'y',service_year);
			// 		// }
			// 		// console(res.data.data.employeeInfoDO)
			// 		this.listCards = res.data.data.professionalSkill;
			// 		console(this.listCards)
			// 		// this.deviceInfo.end_year = end_year;
			// 	}
			// }).catch(err=>{
			// });
		},
		mounted() {
			this.getProfessionalSkills()
		},
		methods: {
			getProfessionalSkills() {
				this.filterResult.pageno = this.pageno;
				this.filterResult.pagesize = this.pagesize;
				this.filterResult.employeeId = this.employeeId;
				this.$http.request({
					url: '/apis/professionalSkills/pageList',
					paramsBody: this.filterResult,
					})
					.then(res => {
						uni.stopPullDownRefresh();
						if(!res.data.data){
						this.loading_status="noMore";
						}else if(res.data.data.datas.length<this.pagesize){
							this.loading_status="noMore";
						}else{
							this.loading_status="more";
						}
						
						if (res.data.code == 0) {
							this.listCards = this.listCards.concat(res.data.data.datas);
							this.listCards.forEach(item => {
								item.getDate = item.getDate.substr(0,10)
								item.certificateValidity = item.certificateValidity.substr(0,10)
								item.trialTime = item.trialTime.substr(0,10)
							})
						}
					}).catch(err => {
						this.loading_status="noMore";
					});
				
			},
			    /**
			     * 对日期进行加减操作 该方法不会修改传入的Date对象
			     * @param date 如果为null 则表示为当前日期
			     * @param unit 单位 y:年 M:月 d:日 h:小时 m:分钟 s:秒
			     * @param value 增加的数值 可以为负数
			     * @return 返回值为修改后的新的Date对象
			     */
			    addDate:function(date,unit,value){
					date =  new Date(date.replace(/-/g, "/"));
			        var units = {
			            y:'FullYear',
			            M:'Month',
			            d:'Date',
			            h:'Hours',
			            m:'Minutes',
			            s:'Seconds'
			        }
			
			        try{
			            if(units[unit]){
			                date['set'+units[unit]](date['get'+units[unit]]() + parseInt(value));
			            }
			        }catch (e){
			            console.error(e);
			        }  
					var day1 = new Date();
					var time = date.getFullYear()+"-" + this.minTenAndZero(date.getMonth()+1) + "-" + this.minTenAndZero(date.getDate())+
						 " " + this.minTenAndZero(date.getHours()) + ":" + this.minTenAndZero(date.getMinutes()) + ":" + this.minTenAndZero(date.getSeconds()); 
			        return time;
			    },
				minTenAndZero:function(value){
				    return value<10?('0'+value):value;
				}
		}
	}
</script>

<style>
	.mydefineText {
		margin: 7px 5px;
		height: 70upx;
		line-height: 70upx;
		color: #999;
		font-size: 28upx;
	}
	.rightText{
		text-align: right;
		color: #333;
		-webkit-flex: 1;
		flex: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden
	}
	.red{color: #f00;}
</style>
