<template>
	<view class="container">
		<view class="top">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
			<text>申请加盟</text>
		</view>
		<scroll-view scroll-y style="height: 100vh;">
			<view class="page">
				<text class="num actived pass">1</text>
				<text class="line line_pass"></text>
				<text class="num actived">2</text>
				<text class="line"></text>
				<text class="num">3</text>
				<text class="line"></text>
				<text class="num">4</text>
				<text class="line"></text>
				<text class="num">5</text>
				<text class="line"></text>
				<text class="num">6</text>
				<text class="line"></text>
				<text class="num">7</text>
				<text class="line"></text>
				<text class="num">8</text>
			</view>
			<view class="wrapper" style="padding-bottom: 200rpx;">
				<view class="title">
					<view>
						<text class="line"></text>从业经历
					</view>
					<text class="page_mark">2/8</text>
				</view>
				<view class="content">
					<view class="contentDetail employ">
						<view class="contentItem">
							<text>职业类型</text>
							<picker @change="changeIndustry" :value="industryIdx" :range="industry"
								range-key="industryName"
								:disabled="this.workform.approvalStatus!= 0 && this.workform.approvalStatus != 2">
								<view class="uni-input">{{industry[industryIdx]['industryName']}}
									<text class="iconfont icon-youjiantou"></text>
								</view>
							</picker>
						</view>
						<view class="contentItem">
							<text>最近一次工作单位</text>
							<input type="text" class="form-control" placeholder="非必填" v-model="workform.workingCompany"
								:disabled="this.workform.approvalStatus!= 0 && this.workform.approvalStatus != 2" />
						</view>
						<view class="contentItem">
							<text>职位</text>
							<input type="text" class="form-control" placeholder="非必填" v-model="workform.position"
								:disabled="this.workform.approvalStatus!= 0 && this.workform.approvalStatus != 2" />
						</view>
						<view class="contentItem">
							<text>任职开始时间</text>
							<picker mode="date" :value="workform.workingStart" @change="bindWorkingStart"
								:disabled="this.workform.approvalStatus!= 0 && this.workform.approvalStatus != 2">
								<view v-if="!workform.workingStart">请选择<text class="iconfont icon-youjiantou"></text>
								</view>
								<view class="uni-input" v-if="workform.workingStart">{{workform.workingStart}}<text
										class="iconfont icon-youjiantou"></text></view>
							</picker>
						</view>
						<view class="contentItem">
							<text>结束时间</text>
							<picker mode="date" :value="workform.workingEnd" @change="bindWorkingEnd"
								:disabled="this.workform.approvalStatus!= 0 && this.workform.approvalStatus != 2">
								<view v-if="!workform.workingEnd">请选择<text class="iconfont icon-youjiantou"></text>
								</view>
								<view class="uni-input" v-if="workform.workingEnd">{{workform.workingEnd}}<text
										class="iconfont icon-youjiantou"></text></view>
							</picker>
						</view>
						<view class="contentItem" style="border: 0;">
							<text>荣誉证书</text>
						</view>
					</view>
					<view class="photo_wrapper" @click="upLoadPhoto()" v-if="!workform.certificate">
						<text class="iconfont icon-weibiaoti553"></text>
						<view style="margin-top: 10px;">点击添加荣誉证书照片</view>
					</view>
					<view v-if="workform.certificate" style="width: 100%;text-align: center;">
						<view class="photo_w" v-for="picItem in picList">
							<image style="width: 100%;" :src="picItem" @click="clickImg(picItem)" mode="widthFix"></image>
						</view>
					</view>
					<view class="tips">
						<view>（jpg,png 文件大小不大于1mb）</view>
					</view>
					<view class="upLoadMore"
						v-if="this.workform.approvalStatus== 0 || this.workform.approvalStatus == 2"
						@click="upLoadPhoto()">
						<view class="iconfont icon-jiahao"></view>
						<view>上传更多</view>
					</view>
				</view>
			</view>
			<view class="fixed" @click="saveInfo()">
				{{(this.workform.approvalStatus== 0 || this.workform.approvalStatus == 2)?'保存并下一步':'下一步'}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '../../api/api';
	import {
		CommonUpload,
	} from '@/util/uploaderFile';
	// ckbigImg
	export default {
		data() {
			return {
				industry: [{
					industryName: '请选择',
					industryId: null
				}],
				industryIdx: 0,
				workform: {
					workingCategoryId: '',
					workingCompany: '',
					position: '',
					workingStart: '',
					workingEnd: '',
					certificate: '',
					approvalStatus: ''
				},
				applyParam: {},
				dataForm: {
					loginId: uni.getStorageSync('cffp_userId'),
					targetType: "5",
					targetId: '',
					targetNo: "1",
					targetUseFor: "12",
					targetSeq: "0"
				},
				picList: []
			}
		},
		components: {},
		onLoad(options) {
			this.occupationQry();
			setTimeout(() => {
				if (uni.getStorageSync('applyId')) {
					this.queryById(uni.getStorageSync('applyId'), null)
				} else if (options.shareId) {
					this.queryById(options.shareId, null)
				} else {
					this.queryById(null, uni.getStorageSync('cffp_userId'))
				}
			}, 500)
		},
		onShow() {
			if (uni.getStorageSync('workform')) {
				this.workform = uni.getStorageSync('workform')
				this.picList = uni.getStorageSync('picList')?uni.getStorageSync('picList') :[];
			}
			// if(uni.getStorageSync('Refresh_query')){
			// 	this.queryById(null, uni.getStorageSync('cffp_userId'))
			// }
			uni.$on("ckqueryById", res => {
				if (res == true) {
					this.queryById(null, uni.getStorageSync('cffp_userId'))
				}
			});
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('ckqueryById');
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1  
				});
			},
			clickImg(i) {
				// ckbigImg(i)
			},
			changeIndustry: function(e) {
				this.industryIdx = e.detail.value;
				// this.workingCategory = this.industry[this.industryIdx]['industryName'];
				this.workform.workingCategoryId = this.industry[this.industryIdx]['industryId'];
			},
			bindWorkingStart: function(e) {
				this.workform.workingStart = e.detail.value;
			},
			bindWorkingEnd: function(e) {
				this.workform.workingEnd = e.detail.value;
			},
			occupationQry() {
				api.occupationQry({
					insurerId: 2
				}).then((res) => {
					if (res['success']) {
						this.industry = this.industry.concat(res['data']['industry']);
					} else {
						this.industry = [{
							industryName: '请选择',
							industryId: null
						}];
					}
				})
			},
			upLoadPhoto(event) {
				this.dataForm.targetId = this.workform.id
				uni.setStorageSync('workform', this.workform);
				CommonUpload(this.dataForm).then(res => {
					this.workform.certificate = res.data.filePath;
					this.picList.push(this.workform.certificate);
					uni.setStorageSync('picList', this.picList);
				});
			},
			saveInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				if (this.workform.approvalStatus == 0 || this.workform.approvalStatus == 2) {
					if (!this.workform.workingCategoryId) {
						uni.showToast({
							title: '请选择职业类型',
							duration: 2000,
							icon: 'none'
						})
						return;
					}
					uni.setStorageSync('workform', this.workform)
					this.applyParam.workingCategoryId = this.workform.workingCategoryId,
						this.applyParam.workingCompany = this.workform.workingCompany,
						this.applyParam.position = this.workform.position,
						this.applyParam.workingStart = this.workform.workingStart,
						this.applyParam.workingEnd = this.workform.workingEnd,
						this.applyParam.certificate = this.workform.certificate,
						this.applyParam.approvalStatus = this.workform.approvalStatus,
						this.applyParam = {
							...this.applyParam,
							operatStep: 2,
							certificate: this.picList.join(',')
						}
					api.saveApplyInfo(this.applyParam).then((res) => {
						// this.queryById(null, uni.getStorageSync('cffp_userId'))
						if (res['success']) {
							uni.navigateTo({
								// url:`id-card?id=${res['data']['id']}`
								url: `id-card`
							});
						} else {
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'
							})
							return;
						}
						uni.hideLoading()
					})
				} else {
					uni.hideLoading()
					uni.navigateTo({
						// url:`id-card?id=${res['data']['id']}`
						url: `id-card`
					});
				}
			},
			queryById(id, userId) {
				api.queryById({
					id: id,
					userId: userId
				}).then((res) => {
					if (res['success']) {
						this.applyParam = res['data']['data'];
						if (uni.getStorageSync('workform')) {
							this.workform = uni.getStorageSync('workform')
						} else {
							this.workform.workingCategoryId = this.applyParam.workingCategoryId;
							this.workform.workingCompany = this.applyParam.workingCompany;
							this.workform.position = this.applyParam.position;
							this.workform.workingStart = this.applyParam.workingStart;
							this.workform.workingEnd = this.applyParam.workingEnd;
							this.workform.certificate = this.applyParam.certificate;
						}
						this.workform.approvalStatus = this.applyParam.approvalStatus;
						uni.setStorageSync('workform', this.workform)
						this.workform.id = this.applyParam.id
						if (this.applyParam.certificate) {
							this.picList = this.applyParam.certificate.split(',');
						}
						for (let i = 0; i < this.industry.length; i++) {
							if (this.workform.workingCategoryId == this.industry[i].industryId) {
								this.industryIdx = i;
							}
						}
					}
				})
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	@import 'applyCommon.scss';

	.photo_w {
		// height: 380rpx;
		width: 55%;
		margin: auto;
		padding-bottom: 20rpx;
	}

	.photo_w image {
		width: 100%;
		height: 100%;
	}
</style>
