<template>
	<view class="content">
		<maps ref="maps"></maps>
		<view class="tabbar">
			<view @click="getShow = true">
				<img src="../../static/get.png" alt="">
				<p>上班打卡</p>
			</view>
			<view @click="goPoint">
				<img src="../../static/address.png" alt="">
				<p>签到点打卡</p>
			</view>
			<view @click="inspectShow=true">
				<img src="../../static/up.png" alt="">
				<p>问题上报</p>
			</view>
			<view @click="goSolve">
				<img src="../../static/resolve.png" alt="">
				<p>问题处理</p>
			</view>
		</view>
		<!-- 上班打卡 -->
		<view class="get">
			<u-popup v-model="getShow" mode="bottom" :close-icon-size="20" :border-radius="20" :closeable="true"
				:custom-style="getStyle">
				<view class="getwrap">
					<view>当前时间：{{nowTime}}</view>
					<view v-if="isGet" class="isget">
						<view class="getinfo">请确认时间和地点，再打卡</view>
						<view @click="openGetConfirmShow" class="getcircle">{{getStatus?'上班打卡':'下班打卡'}}</view>
					</view>
					<view v-if="!isGet" class="isget">
						<view class="gettime">
							<view>上班打卡时间：{{getTime}}</view>
							<view>下班打卡时间：{{downTime}}</view>
						</view>
					</view>
					<view class="getaddress">
						<img src="../../static/dw.png" alt="">
						{{address}}
					</view>

				</view>
			</u-popup>
		</view>
		<view class="getConfirm">
			<u-modal :show-title="false" v-model="getConfirmShow" :content="getConfirmContent"
				:show-cancel-button="true" @confirm="getConfirm"></u-modal>
		</view>
		<!-- 巡查问题上报 -->
		<view class="get">
			<u-popup v-model="inspectShow" mode="bottom" :close-icon-size="20" :border-radius="20" :closeable="true"
				:custom-style="getStyle">
				<view class="getwrap">
					<view>当前时间：{{nowTime}}</view>
					<view class="getinfo" style="opacity: 0;">请确认时间和地点，再打卡</view>
					<view @click="goInspect(1)" class="getcircle">上报问题</view>
					<view class="getaddress" @click="goInspect(2)" style="color:#0385e5">
						查看您提交过的问题
					</view>
				</view>
			</u-popup>
		</view>



		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import maps from '@/components/maps/maps'
	components: {
		maps
	}
	export default {
		data() {
			return {
				getShow: false,
				getConfirmShow: false,
				getConfirmContent: "是否确认上班打卡？", // 弹出字
				getStatus: true, // 上班打卡还是下班打卡
				getId: "", // 上班打卡后返回的id
				isGet: true, // 是否完成打卡
				getTime: "",
				downTime: "",


				inspectShow: false,
				getStyle: {
					left: "10rpx",
					right: "10rpx",
					bottom: "10rpx",
					width: "auto",
					borderRadius: "20rpx"
				},
				date: new Date().toISOString(),
				latitude: "",
				longitude: "",
				address: "",
				nowTime: "",


			}
		},


		onReady() {
			let that = this
			that.nowTime = this.getNowTime(that.date)
			that.util.initAddress(function(res) {
				console.log(res)
				that.latitude = res.latitude
				that.longitude = res.longitude
				that.address = res.address
				// that.$refs.maps.moveto(res.longitude,res.latitude)
			})

		},
		onLoad() {
			let that = this;
			this.getGetStatus()
			setInterval(function() {
				that.date = Date.parse(new Date());
				that.nowTime = that.getNowTime(that.date)
			}, 1000);
		},

		methods: {
			getNowTime(time) {
				let date = new Date(time);
				let weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				let year = date.getFullYear();
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				let weekDays = weekDay[date.getDay()]
				return year + "-" + month + "-" + day + "  " + hours + ":" + minutes + ":" + seconds + "  " + weekDays;
			},
			// 获取今日打卡状态
			getGetStatus() {
				var that = this
				that.util.request({
					api: '/api/mobile/work-sign/show',
					method: "get",
					data: {},
					utilSuccess: function(res) {
						if (res.length == 0) {
							console.log("未打卡")
						} else {
							console.log(that.isGet)
							if (res[0].updated_at == null) {
								that.getId = res[0].id
								that.getStatus = false
								that.getConfirmShow = false
								that.getConfirmContent = "是否确认下班打卡？"
							} else {
								that.getTime = res[0].created_at
								that.downTime = res[0].updated_at
								that.isGet = false
							}
						}
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			// 上班打卡
			openGetConfirmShow() {
				this.getShow = false
				this.getConfirmShow = true
			},
			getConfirm() {
				var that = this
				if (this.getStatus) {
					// 上班打卡
					that.util.request({
						api: '/api/mobile/work-sign/store',
						method: "post",
						data: {
							lat_in: this.latitude,
							lng_in: this.longitude,
							address_in: this.address
						},
						utilSuccess: function(res) {
							that.$refs.uToast.show({
								title: res.msg,
								callback: function() {
									// that.getStatus = false
									// that.getConfirmShow = false
									// that.getConfirmContent = "是否确认下班打卡？"
									that.getGetStatus()
								}
							})
						},
						utilFail: function(res) {
							that.util.alert(res);
						}
					});
				} else {
					that.util.request({
						api: '/api/mobile/work-sign/save',
						method: "post",
						data: {
							id: this.getId,
							lat_out: this.latitude,
							lng_out: this.longitude,
							address_out: this.address
						},
						utilSuccess: function(res) {
							that.$refs.uToast.show({
								title: res.msg,
								callback: function() {
									// that.getStatus = false
									// that.getConfirmShow = false
									that.getGetStatus()
								}
							})
						},
						utilFail: function(res) {
							that.util.alert(res);
						}
					});
				}
			},
			// 问题上报
			goInspect(val) {
				if (val == 1) {
					console.log(val)
					uni.navigateTo({
						url: "../../inspect/inspect"
					})
				} else {
					uni.navigateTo({
						url: "../../inspect/list"
					})
				}
			},
			// 问题处理
			goSolve() {
				uni.navigateTo({
					url: "../../solve/index"
				})
			},
			// 问题处理
			goPoint() {
				uni.navigateTo({
					url: "../../point/index"
				})
			},



		}
	}
</script>
<style scoped>
	.content {}

	.tabbar {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 20rpx;
		/* margin:30rpx; */
		padding: 20rpx 20rpx;
		background-color: #fff;
		border-radius: 40rpx;
		border: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.tabbar img {
		width: 50rpx;
		height: 50rpx
	}

	.tabbar p {
		font-size: 28rpx;
	}

	.get {
		margin: 20rpx;
		text-align: center;
	}

	.getwrap {
		padding: 60rpx;
		padding-bottom: 0rpx;
		height: 480rpx
	}

	.isget {
		height: 280rpx
	}

	.gettime {
		padding-top: 90rpx
	}

	.getwrap view {
		margin-bottom: 20rpx;
	}

	.getwrap .getinfo {
		color: #000;
		font-size: 32rpx;
	}

	.getwrap .getcircle {
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		background-color: deepskyblue;
		line-height: 200rpx;
		color: #fff;
		font-size: 36rpx;
		box-shadow: 0 0 0px 4px lightskyblue;
		margin: 30rpx auto;
	}

	.getwrap img {
		width: 36rpx;
		vertical-align: sub;
		margin-right: 10rpx;
	}
</style>
