<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">实名认证</block>
		</cu-custom>
		<view v-if="curUserInfo && curUserInfo.status === 1">
			<view class="margin-lr-sm margin-tb-lg">
				<view @click="bindAccount">
					<view v-if="bindBankCard && bindBankCard.bankNum"
						class="bg-gray flex justify-between align-center text-xl padding">
						<view>
							<text class="cu-tag bg-main-color light margin-right-sm">已绑定</text>
							<text>{{bindBankCard.encodeBankNum}}</text>
						</view>
						<view>到帐帐号另绑<text class="cuIcon-right"></text></view>
					</view>
					<view v-else class="bg-gray flex justify-between align-center text-xl padding">
						<view>到帐帐号绑定</view>
						<view><text class="cuIcon-right"></text></view>
					</view>
				</view>
				<view class="margin-bottom">
					<view class="bg-white margin-top-sm" v-for="(item, index) in specialSkill">
						<view class="cu-bar padding-lr solid-bottom">
							<view class="text-lg">
								<text class="cuIcon-titles"></text>
								<text>特殊技能{{index + 1}}(特殊工种如空调安装等请上传)</text>
							</view>
							<view @click="delSpecialSkill(index)">
								<text class="text-main-color">删除</text>
							</view>
						</view>
						<view class="padding">
							<view>
								<text>特殊技能：</text>
								<view>
									<view class="flex align-center margin-bottom-xs">
										<my-uni-combox class="flex-sub margin-right-xs" :candidates="specialTypeList"
											:showField="'goodsCategoryName'" placeholder="请选择"
											v-model="specialSkill[index].specialTypeObj" @input="chooseSpecialSkill($event, 0, index)">
										</my-uni-combox>
										<my-uni-combox class="flex-sub margin-right-xs"
											:candidates="specialSkill[index].specialSubTypeList" :showField="'goodsCategoryName'"
											placeholder="请选择" v-model="specialSkill[index].specialSubTypeObj"
											@input="chooseSpecialSkill($event, 1, index)"></my-uni-combox>
										<my-uni-combox class="flex-sub" :candidates="specialSkill[index].specialSubSubTypeList"
											:showField="'goodsCategoryName'" placeholder="请选择"
											v-model="specialSkill[index].specialSubSubTypeObj"
											@input="chooseSpecialSkill($event, 2, index)"></my-uni-combox>
									</view>
									<my-uni-combox :candidates="specialSkill[index].specialSkillList"
										:showField="'specialSkillName'" placeholder="请选择"
										v-model="specialSkill[index].specialSkillObj"
										@input="chooseSpecialSkill($event, 3, index)"></my-uni-combox>
								</view>
							</view>
							<view class="flex justify-start align-center margin-top-sm">
								<view>技能证书：</view>
								<view class="grid col-1 upload-pic-grid grid-square flex-sub">
									<view class="bg-img" v-for="(url, index0) in specialSkill[index].skillCert" :key="index0"
										@tap="viewImage($event, specialSkill[index].skillCert)" :data-url="url">
										<image :src="url" mode="aspectFill"></image>
										<view class="cu-tag bg-red" @tap.stop="delImg($event, specialSkill[index].skillCert)" :data-index="index0">
											<text class='cuIcon-close'></text>
										</view>
									</view>
									<view class="solids" @tap="chooseImage($event, specialSkill[index].skillCert)" v-if="specialSkill[index].skillCert.length < 1">
										<text class='cuIcon-cameraadd'></text>
									</view>
								</view>
							</view>
							<view class="flex justify-start align-center margin-top-sm">
								<view>保险证明：</view>
								<view class="grid col-1 upload-pic-grid grid-square flex-sub">
									<view class="bg-img" v-for="(url, index0) in specialSkill[index].insurCert" :key="index0"
										@tap="viewImage($event, specialSkill[index].insurCert)" :data-url="url">
										<image :src="url" mode="aspectFill"></image>
										<view class="cu-tag bg-red" @tap.stop="delImg($event, specialSkill[index].insurCert)" :data-index="index0">
											<text class='cuIcon-close'></text>
										</view>
									</view>
									<view class="solids" @tap="chooseImage($event, specialSkill[index].insurCert)" v-if="specialSkill[index].insurCert.length < 1">
										<text class='cuIcon-cameraadd'></text>
									</view>
								</view>
							</view>
							<view class="flex justify-start align-center">
								<view>保险日期：</view>
								<uni-datetime-picker style="width: 75%;"
									:value="[specialSkill[index].insurStartDate, specialSkill[index].insurEndDate]"
									type="datetimerange" rangeSeparator="~" @change="changeInsurDate($event, index)" />
							</view>
						</view>
					</view>
					<view class="text-center margin-top">
						<button class="cu-btn bg-main-color light" @click="addSpecialSkill">
							<text class="margin-right-xs"><text class="cuIcon-add"></text></text>
							<text>继续添加特殊技能</text>
						</button>
					</view>
				</view>
			</view>
			<!-- 操作按钮 -->
			<view class="margin-lr margin-bottom-lg">
				<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="submit">提交审核</button>
			</view>
		</view>
		<view v-else>
			<view class="margin-lr-sm margin-top shadow-warp">
				<view @click="bindAccount">
					<view v-if="bindBankCard && bindBankCard.bankNum"
						class="bg-gray flex justify-between align-center text-xl padding">
						<view>
							<text class="cu-tag bg-main-color light margin-right-sm">已绑定</text>
							<text>{{bindBankCard.encodeBankNum}}</text>
						</view>
						<view>到帐帐号另绑<text class="cuIcon-right"></text></view>
					</view>
					<view v-else class="bg-gray flex justify-between align-center text-xl padding">
						<view>到帐帐号绑定</view>
						<view><text class="cuIcon-right"></text></view>
					</view>
				</view>
				<view class="padding bg-white">
					<view class="padding-bottom-sm">
						<text class="text-black text-bold">姓名：</text>
						<text>{{bindBankCard.name}}</text>
					</view>
					<view class="padding-bottom-sm">
						<text class="text-black text-bold">身份证号：</text>
						<text>{{bindBankCard.certId}}</text>
					</view>
				</view>
				<view class="padding bg-white" v-if="servSpecialSkills && servSpecialSkills.length">
					<view class="text-black text-bold">特殊技能：</view>
					<view class="solid margin-top-sm padding-sm" v-for="(item,index) in servSpecialSkills">
						<view class="margin-bottom-xs">类目：{{item.specialSkillName}}</view>
						<view class="margin-bottom-xs">是否危险技能：{{item.dangerous === 0 ? '否' : '是'}}</view>
						<view class="margin-bottom-xs">
							<view class="margin-bottom-xs">技能证书：</view>
							<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit"
								:src="item.credential" :data-url="item.credential"
								@click="viewImage($event, [item.credential])"></image>
						</view>
						<view v-if="item.dangerous == 1" class="margin-bottom-xs">
							<view class="margin-bottom-xs">保险证明：</view>
							<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit"
								:src="item.insurance" :data-url="item.insurance"
								@click="viewImage($event, [item.insurance])"></image>
						</view>
						<view>保险生效时期：{{item.insuranceStart}} ~ {{item.insuranceEnd}}</view>
					</view>
				</view>
				<view class="padding">
					<text class="text-black text-bold">审核状态：</text>
					<text v-if="curUserInfo.status === 0" class="text-green">审核通过</text>
					<text v-else-if="curUserInfo.status === 3" class="text-yellow">审核中</text>
					<text v-else-if="curUserInfo.status === 4" class="text-red">审核未通过</text>
					<button class="cu-btn bg-main-color margin-left-sm shadow-blur" v-if="curUserInfo.status === 4"
						@click="navigate2ApplySettled">重新填写入驻信息</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				curUserInfo: null,
				bindBankCard: null,
				specialSkill: [{
					specialSubTypeList: [],
					specialSubSubTypeList: [],
					specialTypeObj: {},
					specialSubTypeObj: {},
					specialSubSubTypeObj: {},
					specialSkillList: [],
					specialSkillObj: {},
					skillCert: [],
					insurCert: [],
					insurStartDate: '',
					insurEndDate: ''
				}],
				specialTypeList: []
			}
		},
		onLoad() {
			this.loadData();
		},
		onShow() {
			this.loadBindBankCard();
		},
		methods: {
			async loadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				this.loadBindBankCard();
				if (this.curUserInfo.status === 1) {
					this.loadSpecialSkillType();
				} else {
					this.loadSpecialSkills();
				}
			},
			async reloadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				this.loadBindBankCard();
				if (this.curUserInfo.status === 1) {
					this.loadSpecialSkillType();
				} else {
					this.loadSpecialSkills();
				}
			},
			async loadBindBankCard() {
				let res = await this.$request.getBindBankCardByWorkerId({
					workerId: this.curUserInfo.workerId
				});
				this.bindBankCard = res.data;
				this.bindBankCard.encodeBankNum = '****' + this.bindBankCard.bankNum.substring(this.bindBankCard
					.bankNum.length - 4);
			},
			bindAccount() {
				uni.navigateTo({
					url: '/pages/my/bank-account-bind'
				})
			},
			/* 特殊技能 start */
			async loadSpecialSkills() {
				let res = await this.$request.getWorkerSpecialSkill({
					workerId: this.curUserInfo.workerId
				});
				this.servSpecialSkills = res.data;
			},
			async loadSpecialSkillType() {
				let res = await this.$request.listByStep();
				this.specialTypeList = res.data;
			},
			async chooseSpecialSkill(e, type, index) {
				let funName = "listByStep";
				if (type === 2) {
					funName = "qrySpecialSkillList";
				}
				let res = await this.$request[funName]({
					goodsCategoryId: e.goodsCategoryId
				});
				if (res.code == 0) {
					switch (type) {
						case 0: {
							this.specialSkill[index].specialSubTypeList = res.data;
							this.specialSkill[index].specialSubSubTypeList = [];
							this.specialSkill[index].specialSubTypeObj = {};
							this.specialSkill[index].specialSubSubTypeObj = {};
						}
						break;
					case 1: {
						this.specialSkill[index].specialSubSubTypeList = res.data;
						this.specialSkill[index].specialSubSubTypeObj = {};
					}
					case 2: {
						this.specialSkill[index].specialSkillList = res.data;
						this.specialSkill[index].specialSkillObj = {};
					}
					break;
					default:
						break;
					}
				}
			},
			addSpecialSkill() {
				this.specialSkill.push({
					specialSubTypeList: [],
					specialSubSubTypeList: [],
					specialTypeObj: {},
					specialSubTypeObj: {},
					specialSubSubTypeObj: {},
					skillCert: [],
					insurCert: [],
					insurStartDate: '',
					insurEndDate: ''
				});
			},
			delSpecialSkill(index) {
				this.specialSkill.splice(index, 1);
			},
			changeInsurDate(e, index) {
				this.specialSkill[index].insurStartDate = e[0];
				this.specialSkill[index].insurEndDate = e[1];
			},
			async chooseImage(e, imgList) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// 上传图片
						res.tempFilePaths.forEach((tmpPath) => {
							this.$request.uploadFile(tmpPath).then((url) => {
								// 存入缓存
								imgList.push(url);
							});
						})
					}
				});
			},
			viewImage(e, imgList) {
				uni.previewImage({
					urls: imgList,
					current: e.currentTarget.dataset.url
				});
			},
			delImg(e, imgList) {
				uni.showModal({
					title: '',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			/* 特殊技能 end */
			submit() {
				if (!this.bindBankCard || !this.bindBankCard.certId) {
					uni.showToast({
						icon: 'none',
						title: '请先完成银行账户绑定，否则接单收益将无法正常到帐'
					})
					return;
				}
				let workerId = this.curUserInfo.workerId;
				let specialSkills = [];
				// 特殊技能参数
				this.specialSkill.forEach((item) => {
					specialSkills.push({
						workerId: workerId,
						specialSkillId: item.specialSkillObj.specialSkillId,
						credential: item.skillCert[0],
						insurance: item.insurCert[0],
						insuranceStart: item.insurStartDate,
						insuranceEnd: item.insurEndDate
					});
				});

				let params = {
					workerId: workerId,
					specialSkills: specialSkills
				}

				console.log(params)
				// let res = await this.$request.workerSettled(params);
				// if (res.code === 0) {
				// 	this.reloadData();
				// 	uni.showToast({
				// 		icon: 'success',
				// 		title: '提交成功'
				// 	})
				// }
			}
		},
	}
</script>

<style scoped>
	/deep/ .uni-combox__selector {
		z-index: 99 !important;
	}
	
	.grid.col-1.grid-square.upload-pic-grid>view {
		padding-bottom: 35%;
		height: 0;
		margin-right: 20rpx;
	}
	
	.grid.col-1.upload-pic-grid>view {
		width: 35%;
	}
	
	/deep/ .uni-date__x-input {
		height: 36px;
	}
</style>
