<template>
	<view class="moreDetail">
		<view class="moreDetailBox">
			<view class="topbox">
				<view class="topboxTop">
					<view class="topboxTopL">{{userInfo.name}}</view>
					<view class="topboxTopR">{{userInfo.testSkills}}</view>
				</view>
				<view class="topboxBottom">
					<view class="topboxBottomItem">
						<image class="topboxBottomItemimg" src="../../../static/index/icon1.png" mode=""></image>
						{{city}}
					</view>
					<view class="topboxBottomItem">
						<image class="topboxBottomItemimg" src="../../../static/index/icon2.png" mode=""></image>
						{{educationList[0].name}}
					</view>
					<view class="topboxBottomItem">
						<image class="topboxBottomItemimg" src="../../../static/index/icon3.png" mode=""></image>
						{{educationList[0].major }}
					</view>
					<view class="topboxBottomItem">
						<image class="topboxBottomItemimg" src="../../../static/index/icon4.png" mode=""></image>
						{{educationList[0].education }}
						({{ educationList[0].startTime  + '-'+ educationList[0].endTime}})
					</view>
				</view>
			</view>
			<view class="bottombox">
				<!-- 个人优势 -->
				<view class="bottomboxitem">
					<view class="bottomboxitemtitle">
						<view class="lineblue"></view>
						个人优势
					</view>
					<view class="bottomboxitemCon">
						{{ userInfo.personalAdvantage || '无'}}
					</view>
				</view>
				<!-- 工作经历 -->
				<view class="bottomboxitem">
					<view class="bottomboxitemtitle">
						<view class="lineblue"></view>
						工作经历
					</view>
					<view class="bottomboxitemBox" v-for="it in workList" :key="it.caseId">
						<view class="bottomboxitemtitle1">
							公司名称：{{it.name}}
						</view>
						<view class="bottomboxitemtitle2">
							<view class="bottomboxitemtitle2L">
								职位：{{it.title}}
							</view>
							<view class="bottomboxitemtitle2R">
								{{it.startTime}} - {{it.endTime}}
							</view>
						</view>
						<view class="bottomboxitemCon">
							工作内容：{{it.intro}}
						</view>
					</view>
				</view>
				<!-- 项目经历 -->
				<view class="bottomboxitem">
					<view class="bottomboxitemtitle">
						<view class="lineblue"></view>
						项目经历
					</view>
					<view class="bottomboxitemBox" v-for="it in projectList" :key="it.caseId">
						<view class="bottomboxitemtitle1">
							项目名称：{{it.name}}
						</view>
						<view class="bottomboxitemtitle2">
							<view class="bottomboxitemtitle2L">
								角色：{{it.title}}
							</view>
							<view class="bottomboxitemtitle2R">
								{{it.startTime}} - {{it.endTime}}
							</view>
						</view>
						<view class="bottomboxitemCon" style="margin-bottom: 10rpx;">
							应用技术：{{it.applyTech}}
						</view>
						<view class="bottomboxitemCon">
							项目简介：{{it.intro}}
						</view>
					</view>
				</view>

				<!-- 资格证书 -->
				<view class="bottomboxitem">
					<view class="bottomboxitemtitle">
						<view class="lineblue"></view>
						资格证书
					</view>
					<view class="bottomboxitemBox" v-for="it in certificateList" :key="it.fileId">
						<view class="bottomboxitemCon" style="margin-bottom: 10rpx;">
							{{it.fileName}}
						</view>
						<image :src="it.fileUrl" @click="priveimg(it.fileUrl)" class="itemimg" mode=""></image>
					</view>
				</view>

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

<script>
	export default {
		data() {
			return {
				projectList: [],
				workList: [],
				educationList: [],
				certificateList: [],
				userInfo: {},
				city: '',
			}
		},
		onLoad(options) {
			const id = options.id
			this.getInfo(id)
		},
		methods: {
			getInfo(id) {
				this.http.quickGet(`/personal/resume/${id}`, true).then(res => {
					// 经历
					this.projectList = res.data.experience.filter((it) => it.type == 0)
					this.workList = res.data.experience.filter((it) => it.type == 1)
					this.educationList = res.data.experience.filter((it) => it.type == 2)
					if (!this.educationList.length) {
						this.educationList = [{
							name: '无',
							major: '无',
							education: '无',
							startTime: '无',
							endTime: '无',
						}, ]
					} else {
						this.educationList[0].startTime = this.educationList[0].startTime.slice(0, 4)
						this.educationList[0].endTime = this.educationList[0].endTime.slice(0, 4)
					}
					// 证书
					this.certificateList = res.data.credentials
					// 个人简介
					if (res.data.personalInfo) {
						this.userInfo = res.data.personalInfo
						this.city = this.userInfo.city.split('-')[1] || '无'
					}
				})
			},
			priveimg(logourl) {
				// console.log('预览图片')
				let imgsArray = [];
				imgsArray[0] = logourl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.moreDetail {
		padding: 40rpx 23rpx;
		box-sizing: border-box;

		.moreDetailBox {
			background: #FFFFFF;
			border-radius: 6rpx;

			.topbox {
				height: 170rpx;
				background: linear-gradient(90deg, #E2EDFD, #FEE4E4);
				border-radius: 6rpx 6rpx 0rpx 0rpx;
				padding: 0 26rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.topboxTop {
					display: flex;
					align-items: center;

					.topboxTopL {
						font-weight: bold;
						font-size: 36rpx;
						color: #000000;
						margin-right: 50rpx;
					}

					.topboxTopR {
						font-weight: bold;
						font-size: 30rpx;
						color: #F68211;
					}
				}

				.topboxBottom {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 30rpx;

					.topboxBottomItem {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 20rpx;
						color: #333333;
						margin-right: 30rpx;

						.topboxBottomItemimg {
							width: 21rpx;
							height: 21rpx;
							margin-right: 3rpx;
						}
					}
				}
			}

			.bottombox {
				padding: 0 26rpx;
				box-sizing: border-box;

				.bottomboxitem {
					border-bottom: 1px solid rgba(135, 135, 135, 0.15);

					.bottomboxitemtitle {
						display: flex;
						align-items: center;
						margin: 36rpx 0;
						font-weight: bold;
						font-size: 32rpx;
						color: #000000;

						.lineblue {
							width: 6rpx;
							height: 24rpx;
							background: #1778F7;
							border-radius: 3rpx;
							margin-right: 12rpx;
						}
					}

					.bottomboxitemtitle1 {
						font-weight: bold;
						font-size: 26rpx;
						color: #000000;
						margin-bottom: 25rpx;
					}

					.bottomboxitemtitle2 {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 25rpx;

						.bottomboxitemtitle2L {
							font-weight: bold;
							font-size: 24rpx;
							color: #1A1A1A;
						}

						.bottomboxitemtitle2R {
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
						}
					}

					.bottomboxitemCon {
						font-weight: 500;
						font-size: 24rpx;
						color: #4D4D4D;
						line-height: 46rpx;
						margin-bottom: 30rpx;
					}

					.itemimg {
						width: 338rpx;
						height: 242rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>