<template>
	<view>
		<view class='nav'>
			<!-- <image :src="user.facesInformation" mode="" class="cu-avatar radius cu-avatar xl round "
				style="border-radius: 50%;" @click="handleImage"></image> -->
<!-- 			<view class="box" @click="handleImage">

			</view> -->
		</view>
		<view class="prompt">
			请确认本次入场时间及服务类型
		</view>
		<view class='module'>
			<view class="cu-form-group">
				<view class="title">服务类型</view>
				<u-radio-group v-model="user.type">
					<u-radio v-for="(item, index) in typeList" :key="index" :name="item.name">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module'>
			<view class="cu-form-group">
				<view class="title">入场时间</view>
				<view>
					<picker mode="date" :value="date" @change="handleDate" :start="currentDate">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
			<view class='common-hr'></view>
		</view>
		<u-button type="success" @click="handleConfirm" :loading="dateLoad">确认</u-button>
		<view class="prompt" style="margin-top: 15px;">
			请确认以下个人信息是否正确，如需修改，点击"修改个人信息”
		</view>
		<view class='module'>
			<view class="cu-form-group">
				<view class="title">身份证号</view>
				<text v-if="!isUpdate">{{ user.identityCard }}</text>
				<u-input v-else v-model="user.identityCard" type="text" :border='true' maxlength="18"
					@input="getGenderFromIdCard" />
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module'>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<text v-if="!isUpdate">{{ user.staffName }}</text>
				<u-input v-else v-model="user.staffName" type="text" :border='true' />
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module'>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<text v-if="!isUpdate">{{user.sex==0?'男':'女' }}</text>
				<u-radio-group v-model="user.sex" v-else :disabled="true">
					<u-radio v-for="(item, index) in sexList" :key="index" :name="item.name">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module'>
			<view class="cu-form-group" data-target="ModalOld">
				<view class="title">手机</view>
				<text v-if="!isUpdate">{{ user.mobilePhone }}</text>
				<u-input v-else v-model="user.mobilePhone" type="number" maxlength="11" :border='true' />
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module'>
			<view class="cu-form-group">
				<view class="title">紧急联系人</view>
				<text v-if="!isUpdate">{{ user.urgentName }}</text>
				<u-input v-else v-model="user.urgentName" type="text" :border='true' maxlength="18" />
			</view>
			<view class='common-hr'></view>
		</view>

		<view class='module'>
			<view class="cu-form-group">
				<view class="title">紧急联系人电话</view>
				<text v-if="!isUpdate">{{ user.urgentPhone }}</text>
				<u-input v-else v-model="user.urgentPhone" type="number" maxlength="11" />
			</view>
			<view class='common-hr'></view>
		</view>

		<view class='module'>
			<view class="cu-form-group">
				<view>关系</view>
				<text v-if="!isUpdate">{{ user.urgentRelationship }}</text>
				<u-radio-group v-model="user.urgentRelationship" v-else>
					<u-radio v-for="(item, index) in urgentRelationshipList" :key="index" :name="item.name">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class='common-hr'></view>
		</view>


		<view class='module'>
			<view class="cu-form-group">
				<view class="title">外包服务商</view>
				<text v-if="!isUpdate">{{ user.remark }}</text>
				<u-input v-else v-model="user.remark" />
			</view>
			<view class='common-hr'></view>
		</view>
		<!--<u-modal v-model="show" title="请确认本次入职时间及劳务类型" :show-cancel-button='true' @confirm='handleConfirm' @cancel='handleCancel'>
			<view class="slot-content">
				<view class='module'>
					<view class="cu-form-group">
						<view class="title">劳务类型</view>
						<u-radio-group v-model="user.type">
							<u-radio v-for="(item, index) in typeList" :key="index" :name="item.name">
								{{item.label}}
							</u-radio>
						</u-radio-group>
					</view>
					<view class='common-hr'></view>
				</view>
				<view class='module'>
					<view class="cu-form-group">
						<view class="title">入职时间</view>
						<view>
							<picker mode="date" :value="date" @change="handleDate" :start="currentDate">
								<view class="uni-input">{{date}}</view>
							</picker>
						</view>
					</view>
					<view class='common-hr'></view>
				</view> 
			</view>
		</u-modal> -->
		<view class="flex" style="margin-top: 10px;">
			<view style="flex: 1;">
				<u-button type="success" @click="handleIsUpdate" :loading="updateLoad">{{ isUpdate?'确定修改':'修改个人信息' }}
				</u-button>
			</view>
			<view style="flex: 1;">
				<u-button type="warning" @click="handleQuit">退出登陆</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageSrc: "",
				currentDate: "",
				show: true,
				urgentRelationshipList: [{
						name: "配偶",
						label: "配偶"
					},
					{
						name: "父母",
						label: "父母"
					},
					{
						name: "子女",
						label: "子女"
					},
					{
						name: "兄弟姐妹",
						label: "兄弟姐妹"
					},
				],
				updateLoad: false,
				dateLoad: false,
				date: null,
				time: null,
				isUpdate: false,
				isUpdates: false,
				user: {},
				typeList: [{
						name: '0',
						label: '日结'
					},
					{
						name: '1',
						label: '月结'
					}
				],
				sexList: [{
						name: '0',
						label: '男'
					},
					{
						name: '1',
						label: '女'
					}
				]
			}
		},
		mounted() {
			this.getCurrentDate();
		},
		methods: {
			getGenderFromIdCard(idCard) {
				if (idCard.length == 18) {
					const genderDigit = parseInt(idCard.charAt(idCard.length - 2)) % 2;
					if (genderDigit === 0) {
						this.user.sex = '1'
					} else {
						this.user.sex = '0'
					}
				} else {
					this.user.sex = ''
				}
			},
			handleConfirm() {
				this.handleDateTime()
			},
			handleCancel() {
				this.user = uni.getStorageSync('userInfo')
				this.show = false
			},
			getCurrentDate() {
				var today = new Date();
				var year = today.getFullYear();
				var month = (today.getMonth() + 1 < 10 ? '0' : '') + (today.getMonth() + 1);
				var day = (today.getDate() < 10 ? '0' : '') + today.getDate();
				this.currentDate = year + '-' + month + '-' + day;
			},
			handleDateTime() {
					// ...this.user,
				let data = {
					// id:this.user.id,
					// type:this.user.type,
					// identityCard:this.user.identityCard,
					...this.user,
					ruzhiTime: this.date + ' 09:00:00',
				}
				this.dateLoad = true
				this.$api.updateRuzhiTimen(data).then(res => {
					this.dateLoad = false
					if (res.code == '000000') {
						uni.setStorageSync('userInfo', res.data)
						this.user = uni.getStorageSync('userInfo')
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'error',
							duration: 2000
						});
						this.user = uni.getStorageSync('userInfo')
					}
				})
			},
			handleTime(time) {
				this.time = time.detail.value
			},
			handleDate(date) {
				this.date = date.detail.value
			},
			handleImage() {
				if (this.isUpdates && this.isUpdate) {
					let _this = this
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success: function(res) {
							_this.photo = res.tempFilePaths[0]
							uni.getFileSystemManager().readFile({
								filePath: res.tempFilePaths[0],
								encoding: 'base64',
								success: res => {
									let base64 = 'data:image/jpeg;base64,' + res.data
									_this.user.facesInformation = base64
								},
								fail: (e) => {}
							})

						}
					});
				}
			},
			handleQuit() {
				this.$api.loginOut().then(res => {
					if (res.code == '000000') {
						uni.showToast({
							title: '退出成功',
							icon: 'success',
							duration: 2000
						});
						uni.clearStorageSync();
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				})
			},
			handleIsUpdate() {
				if (this.isUpdate) {
					this.updateLoad = true
					this.$api.userUpdate(this.user).then(res => {
						this.updateLoad = false
						if (res.code == '000000') {
							uni.setStorageSync('userInfo', res.data)
							uni.showToast({
								title: '修改成功',
								icon: 'success',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: res.message,
								icon: 'error',
								duration: 2000
							});
							this.user = uni.getStorageSync('userInfo')
						}
					})
				}
				this.isUpdate = !this.isUpdate
			},
		},
		onShow: function() {
			this.user = uni.getStorageSync('userInfo')
			this.$api.getById({
				id: this.user.id
			}).then(res => {
				if (res.code == '000000') {
					uni.setStorageSync('isUpdate', res.data.isUpdate)
					let time = this.user.ruzhiTime
					this.date = time.substring(0, 10)
					this.isUpdates = uni.getStorageSync('isUpdate') == 1 ? true : false
				}
			})
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.redirectTo({
					url: './message'
				})
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style scoped>
	.box {
		margin: auto;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		border: 1px solid #ccc;
		text-align: center;
		margin-bottom: 10px;
		line-height: 100px;
	}

	.box::after {
		content: '点击更换人像';
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.prompt {
		font-size: 13px;
		color: red;
	}

	/deep/.cu-form-group input {
		text-align: right;
	}

	.nav {
		width: 100%;
		/* margin: auto; */
	}

	.nav>image {
		background: white;
	}

	.module {
		background-color: white;
		padding: 10upx 30upx;
	}

	.common-hr {
		height: 1upx;
		background-color: #e8e8e8;
		width: 100%;
	}

	.radio {
		display: inline-block;
		width: 30upx;
		margin: 0;
		padding: 0;
	}

	.content {
		margin-bottom: 5upx;
	}

	.login {
		position: absolute;
		bottom: 30upx;
	}

	.cu-form-group .title {
		min-width: calc(4em + 30upx);
	}

	.cu-form-group input {
		text-align: left;
	}

	.padding-xl {
		background-color: #ffffff;
		padding: 30upx;
	}

	.cu-btn {
		padding: 0 20upx;
	}

	.submin {
		margin-top: 50upx;
	}

	.submin button {
		width: 570upx;
		height: 60upx;
		line-height: 60upx;
	}
</style>
