<template>
	<view>
		<topnav :title='pageTitle' @tohome='tohome'></topnav>
		<view class="content">
			<view class="pageTitle">身份信息</view>
			<view class="listBox mp-20">
				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						<view class="vred"> </view>头像
					</view>
					<view class="listBoxItemRight">
						<image :src="iconFace" class="iconface"></image>
					</view>
				</view>
				<view class="listBoxline"></view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						护工姓名
					</view>
					<view class="listBoxItemRight">
						{{submitData.name}}
					</view>
				</view>
				<view class="listBoxline"></view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						联系方式
					</view>
					<view class="listBoxItemRight">
						{{submitData.mobile}}
					</view>
				</view>
				<view class="listBoxline"></view>

				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						入职日期
					</view>
					<view class="listBoxItemRight">
						{{submitData.join_at}}
					</view>
				</view>
				<view class="listBoxline"></view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						身份证号码
					</view>
					<view class="listBoxItemRight">
						{{submitData.id_card_number}}
					</view>
				</view>

				<view class="listBoxline"></view>
				<view class="listBoxItem listImgBox">
					<view class="imgboxTitle">身份证照片</view>
					<view class="imgboxContent">
						<view>
							<view class="zhengjian">
								<image :src="imgCover" :data-src="imgCover" style="width:263rpx;height:182rpx"
									@click="bindpreviewImage">
								</image>
							</view>
						</view>
						<view>
							<view class="zhengjian">
								<image :src="imgBack" :data-src="imgBack" style="width:263rpx;height:182rpx"
									@click="bindpreviewImage">
								</image>
							</view>
						</view>
					</view>
				</view>

			</view>


			<view class="pageTitle">财务信息</view>
			<view class="listBox mp-20">
				<view class="listBoxItem">
					<view class="listBoxItemLeft">银行卡号码
					</view>
					<view class="listBoxItemRight">
						{{submitData.bank}}
					</view>
				</view>
				<view class="listBoxline"></view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft">开户行名称
					</view>
					<view class="listBoxItemRight">
						{{submitData.account}}
					</view>
				</view>
			</view>
			<view class="pageTitle">其它信息</view>
			<view class="listBox mp-20">

				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						项目归属
					</view>
					<view class="listBoxItemRight">
						<text>{{submitData.project!=null?submitData.project.name:""}}</text>
					</view>
				</view>

				<view class="listBoxline"></view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						护工等级
					</view>
					<view class="listBoxItemRight">
						<text>{{submitData.level!=null?submitData.level.name:""}}</text>
					</view>
				</view>
				<view class="listBoxline"></view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						护工护理年限
					</view>
					<view class="listBoxItemRight">
						{{submitData.work_years}}
					</view>
				</view>
				<view class="listBoxline"></view>

				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						健康证
					</view>
					<view class="listBoxItemRight">
						<text>{{submitData.has_health_certificate==1?"有":"无"}}</text>
					</view>
				</view>
				<view class="listBoxline"></view>

				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						技能资格证书
					</view>
					<view class="listBoxItemRight">
						<text>{{submitData.has_work_certificate==1?"有":"无"}}</text>
					</view>
				</view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						护工状态
					</view>
					<view class="listBoxItemRight">
						<switch :checked="submitData.status=='active'" @change="switch1Change" />
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	var util = require("../../../../utils/util.js");
	var app = getApp();
	export default {
		data() {
			return {
				pageTitle: "护工详情",
				sdate: "",
				pindex: 0,
				lindex: 0,
				project: [],
				projectArr: [],
				levels: [],
				levelsArr: [],
				idcard: "",
				idcardImgCover: "",
				idcardImgBack: "",
				imgCover: "",

				imgBack: "",
				iconFace: "",
				submitData: {
					project_id: "",
					name: "",
					id_card_number: "",
					mobile: "",
					join_at: "",
					work_years: "",
					paramedic_level_id: "",
					account: "",
					bank: '',
					idcard_front: "",
					idcard_back: "",
					has_health_certificate: "",
					has_work_certificate: "",
					avatar: ""
				},
				windowHeight: 720,
				windowWidth: 720
			}
		},
		onLoad: function(option) {
			if (!util.isNull(option.id)) {
				this.loadInfo(option.id);
			}
		},
		methods: {
			tohome:function(){
				uni.navigateTo({
					url:"../../../../pages/index/index"
				})
			},
			switch1Change: function() {
				var that = this;
				var newstatus = that.submitData.status == 'active' ? '请假' : '正常';
				uni.showModal({
					title: '提示',
					content: "确认修改状态为[" + newstatus + "]？",
					confirmText: "确认",
					confirmColor: "#000",
					cancelColor: "#eee",
					success(res) {
						if (res.confirm) {
							util.request({
								bindThis: that,
								method: 'POST',
								customLoading: false,
								api: 'manager/toggle-paramedic/' + that.submitData.id,
								utilSuccess: function(res) {
									console.log('3：提交成功返回' + res);
									uni.showModal({
										title: "修改成功",
										success: function() {
											that.onLoad();
										}
									})
								},
								utilFail: function(res) {
									console.log('4：提交失败' + res);
									util.alert(res);
								}
							});


						}
					}
				});
			},
			bindpreviewImage: function(e) {
				uni.previewImage({
					current: 0,
					urls: [e.currentTarget.dataset.src]
				});

			},
			loadInfo: function(id) {
				var that = this;
				util.request({
					bindThis: that,
					api: 'manager/get-paramedic/' + id,
					utilSuccess: function(res) {
						console.log(res)
						that.iconFace = res.avatar_url
						that.submitData = res;
						that.sdate = res.join_at;

						util.getfile(res.idcard_front, function(r) {
							that.imgCover = r;
						}, function(r) {});

						util.getfile(res.idcard_back, function(r) {
							that.imgBack = r;
						}, function(r) {});

					},
					utilFail: function(err) {
						util.alert(err);
					}
				});
			}

		}
	}
</script>

<style>
	page {
		padding-top: 160rpx;
		padding-bottom: 120rpx;
	}



	.bottom {
		background: #FFFFFF;
		box-shadow: 0 -2rpx 12rpx 0 rgba(0, 0, 0, 0.16), inset 0 1rpx 0 0 #E4E4E4;
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
	}

	.bottom .bottomLeft {
		display: flex;
		align-items: center;
	}

	.bottom .bottomRight {
		display: flex;
		flex: 1;
	}

	.btn {
		width: 100%;
		line-height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-family: SourceHanSansCN-Medium;
		font-size: 32rpx;
		letter-spacing: 0;
	}

	.btnCancel {

		color: #666666;
		background: #F0F0F0;
	}

	.btnSubmit {

		color: #FFFFFF;
		background: #0DC99E;
	}


	.priceTitle {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		color: #999999;
		letter-spacing: 0;
		line-height: 28rpx;
		margin-left: 32rpx;
	}

	.priceInfo {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		color: orange;
		margin-left: 10rpx;
		letter-spacing: 0;
		line-height: 28rpx;
	}

	.protocol {
		padding: 30rpx 21rpx;
		font-family: SourceHanSansCN-Normal;
		font-size: 28rpx;
		color: #999999;
		letter-spacing: 0;
		align-items: center;
		display: flex;
	}

	.protocol .raInput {
		transform: scale(0.7)
	}

	.iconface {
		border: 4rpx solid #FFFFFF;
		border-radius: 100%;
		width: 90rpx;
		height: 90rpx;
	}

	.icon-Icons_ToolBar_ArrowRight {
		color: rgba(0, 0, 0, 0.45);
		font-size: 22rpx;
		margin-left: 13rpx;
		margin-top: 5rpx;
	}

	.radiogroup {
		display: flex;
		flex-direction: row;
	}

	.radioitemlabel {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 134rpx;
	}

	.radioitem {
		transform: scale(0.7)
	}

	.listImgBox {
		flex-direction: column;
		align-items: unset;
	}

	.imgboxContent {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.zhengjianadd {
		width: 263rpx;
		height: 182rpx;
		border-radius: 20rpx;
		background: rgba(19, 169, 135, 0.10);
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.icon-add2 {
		color: #FFFFFF;
	}

	.tip {
		font-size: 24rpx;
		color: #999999;
	}

	.imgboxTitle {
		font-size: 32rpx;
	}
</style>
