<template>
	<view style="padding-bottom: 20rpx;">
		<cpn-navbar title="护理详情" :isBack="true"></cpn-navbar>

		<view>
			<!-- 用户信息 -->
			<view class="user-info" v-if="detail.customer">
				<view class="top">
					<view class="left">
						<u-image :src="detail.customer.sex === '男' ? vuex_male_img : vuex_female_img" width="104"
							height="104" shape="circle"></u-image>
					</view>
					<view class="center">
						<view class="name">{{detail.customer.name}}</view>
						<view class="infos">
							<view class="age">{{ageComputed(detail.customer.idcard)}}岁
							</view>
							<view class="sex">{{detail.customer.sex}}</view>
							<view class="organ">机构护理</view>
						</view>
					</view>
					<view class="right">
						<template v-if="detail.status === 0">
							<view class="icon1"></view>
							<view>待护理</view>
						</template>
						<template v-if="detail.status === 1">
							<view class="icon3"></view>
							<view>护理中</view>
						</template>
						<template v-if="detail.status === 2">
							<view class="icon2"></view>
							<view>已护理</view>
						</template>
					</view>
				</view>

				<view class="line"></view>

				<view class="bottom">
					<view class="client">
						<u-icon name="/static/detail/people.png" width="26" height="26"></u-icon>
						<view>委托人：{{detail.customer.contact_name}}</view>
					</view>
					<view class="address">
						<u-icon name="map" width="28" height="28" color="#1479FF"></u-icon>
						<view>{{ addressFormat(detail.customer.customer_address) }}</view>
					</view>
					<view class="phone">
						<u-icon name="phone" width="28" height="28" color="#1479FF"></u-icon>
						<view>{{detail.customer.phone}}</view>
					</view>
				</view>
				<view class="re-location" @click="$u.throttle(refreshLoaction,1000)">
					<view class="text">更新定位</view>
					<u-image src="/static/detail/distance.png" height="34" width="34"></u-image>
				</view>
			</view>

			<!-- 今日护理 -->
			<view class="today-nursing" v-show="detail.status !== 0">
				<view class="title">
					今日护理
				</view>

				<view class="line"></view>
				<view class="table-title">
					<view>护理明细</view>
					<view>实际时长</view>
				</view>
				<view class="content">
					<u-checkbox-group :max="(detail.product.demand === 1) ? 1 : 999">
            <view class="content-item" v-if="skuList.length > 1" v-for="(item,index) in skuList" :key='item.info.id'>
              <u-checkbox class="checkbox" label-size="34" size="36" :disabled="detail.status === 2"
                          v-model="item.isSelect" shape="square" :name="item.form.name"
                          @change="selectPick($event,item)">
                {{item.info.name}}
              </u-checkbox>
              <view class="input">
                <u-input :disabled="detail.status === 2 || !item.isSelect || (detail.product.demand === 1)" v-model="item.form.time"
                         :custom-style="inputStyle" :placeholder="'需 '+ item.info.time_lenth"
                         placeholder-style="color:#A7AFBC;font-size:28rpx;" input-align="center"
                         :clearable="false" type="number" height="46">
                </u-input>
                <view style="font-size: 34rpx;">分钟</view>
              </view>
            </view>
            <view class="content-item" v-else  v-for="(item,index) in skuList" :key='item.info.id'>
              <view style="width: 210rpx;text-align: center;font-weight: bold;color: #333;">{{ item.info.name }}</view>
              <view style="width: 220rpx;text-align: center;font-weight: bold;color: #333;">
                {{item.info.time_lenth}}分钟
              </view>
            </view>
          </u-checkbox-group>
				</view>
			</view>

			<!-- 打卡 -->
			<view class="clock">
				<view class="btn" v-if="detail.status === 1 && detail.logs_count < detail.product.process_total"
					@click="$u.throttle(clockIn,5000)">
					<view class="text1">过程打卡</view>
					<view class="text2">（{{detail.logs_count + 1}}）</view>
				</view>
				<view class="btn" v-if="detail.status === 0 && flag" @click="$u.throttle(sign,5000)">
					<view class="text1">签到</view>
					<view class="text2">{{dateFormat(time,'HH:mm:ss')}}</view>
				</view>
				<view class="btn" v-if="detail.status === 1" @click="$u.throttle(checkSignOut,5000)">
					<view class="text1">签退</view>
					<view class="text2">{{serviceTime}}</view>
				</view>
				<view class="btn" v-if="detail.status === 0 && !flag" @click="$u.throttle(refreshLoaction,3000)">
					<view class="text1">更新定位</view>
					<view class="text2">{{dateFormat(time,'HH:mm:ss')}}</view>
				</view>
				<view class="btn" v-if="detail.status === 2">
					<view class="text1">护理已完成</view>
				</view>
			</view>

			<!-- 打卡信息 -->
			<view class="clock-info" v-if="location.lat && location.lng && location.time">
				定位时间：{{dateFormat(location.time,'HH:mm:ss')}} {{location.address}}
			</view>

			<!-- 打卡记录 -->
			<view class="logs" v-if="detail.logs && detail.logs.length > 0">
				<view class="title">
					打卡记录
				</view>

				<view class="line"></view>

				<view class="logs-content">
					<u-time-line>
						<u-time-line-item v-for="(item,index) in detail.logs" :key="index">
							<template v-slot:content>
								<view>
									<view class="u-order-desc">{{typeFormat(item.type)}}</view>
									<view class="u-order-time">{{item.created_at}}</view>
									<view class="u-order-address">{{item.address}}</view>
									<view v-for="(img,tindex) in item.upload_list" :key='tindex' @click="showimg(img)">
										<u-image width="100%" v-if='img.upload' height='400rpx' :src="img.upload.url">
										</u-image>
									</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
			</view>
		</view>

		<u-modal v-model="isShowModal" :show-cancel-button="isSignOutConfirm" :content="tips" @confirm="modalConfirm">
		</u-modal>

		<imgUpload ref="imgUpload" :isShow.sync="isShowImg" :type="type" @confirm="clock"></imgUpload>
  </view>
</template>

<script>
	import {
		ROOTPATH
	} from '@/common/config.js'
	import QQMapWX from '@/libs/qqmap-wx-jssdk.js'
	import moment from '@/libs/moment.min.js'
	import {
		getAgeByIdcard
	} from '@/common/util.js'

	import imgUpload from './components/imgUpload.vue'
	export default {
		components: {
			imgUpload
		},
		data() {
			return {
        isSubmitConfirm: false,
				tips: "",
        isSignOutConfirm: false,
				isShowModal: false, //是否超过时间确认
				type: 0, //打卡类型,1签到 2过程打卡 3签退
				isShowImg: false,
				id: '',
				flag: false, //未开始护理时，是否更新过定位(真为更新过定位)
				qqmapsdk: null,
				inputStyle: {
					fontSize: "34rpx",
					color: "#36596A",
					width: "140rpx",
					background: "#F9F9F9"
				},
				btnStyle: {
					width: '100rpx',
					height: '100rpx',
					borderRadius: '100%',
					background: 'blue'
				},
				location: {
					lng: '',
					lat: '',
					time: '',
					address: ''
				},
				form: {
					schedule_list_id: '',
					lat: '',
					lng: '',
					address: '',
					type: '',
					upload_list: [],
				},
				skuList: [],
				detail: {},
				time: new Date(),
				timer: null,

        serviceTimer: null,//计时器用来跟新总服务时长
        serviceTimeFlag: 0,
			}
		},
		methods: {
      modalConfirm () {
        this.isShowModal = false


        if (this.isSignOutConfirm) {
          this.signOut()
        }
      },

			showimg(img) {
				if (img.upload)
					this.$showimg({
						imgs: [img.upload.url],
						current: 0
					})
			},
			load() {
				this.qqmapsdk = new QQMapWX({
					key: 'D5EBZ-C3BWP-HZIDG-VO6BE-P2MN5-ESFZO'
				});
			},

			selectPick(e, item) {
				if (e.value) {
					if (!item.form.time) {
						item.form.time = item.info.time_lenth
					}
				}
			},

			async getDeatil(id) {
				let res = await this.$u.api.nurseDetail({
					id
				})
				this.detail = res
				this.skuList = []
				res.sku.forEach(item => {
					if (item.sku_id && item.sku_info) {
						this.skuList.push({
							info: item.sku_info,
							isSelect: (item.time || res.sku.length === 1),
							form: {
								id: item.id,
								time: res.sku.length === 1 ? (item.sku_info.time_lenth) : (item.time || ''),
								sku_id: item.sku_id,
							}
						})
					}
				})
				this.form.schedule_list_id = this.id
        if (res.status === 1) {
          this.serviceTimer = setInterval(() => {
            this.serviceTimeFlag++;
          },1000)
        }
        if (res.status === 3) {
          clearInterval(this.serviceTimer)
        }
				console.log(this.skuList);
			},

      getMapDistance (location1,location2) {
        const [lat1,lng1] = location1;
        const [lat2,lng2] = location2;

        let radLat1 = lat1*Math.PI / 180.0;
        let radLat2 = lat2*Math.PI / 180.0;
        let a = radLat1 - radLat2;
        let  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
        let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
            Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
        s = s *6378.137 ;// EARTH_RADIUS;
        s = Math.round(s * 10000) / 10000;

        s = s * 1000

        if (isNaN(s)) {
          return false;
        }

        return Math.floor(s/1000 * 100) / 100;
      },

			//获取当前定位信息
			getLoaction() {
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						isHighAccuracy: true
					}).then(res => {
            console.log(res)
						if (res[1]) {
							this.location.lat = res[1]?.latitude
							this.location.lng = res[1]?.longitude
							this.location.time = this.time
							this.form.lat = this.location.lat
							this.form.lng = this.location.lng

							this.qqmapsdk.reverseGeocoder({
								location: {
									latitude: this.location.lat,
									longitude: this.location.lng
								},
								success: (res) => {
									console.log('mapjs',res);
									this.location.address = res.result.address + res.result.formatted_addresses.recommend
									this.form.address = this.location.address
									resolve(res)
								},
								fail: (err) => {
									reject(err)
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '操作频繁,请稍后再试'
							})
							reject(res)
							console.log(res);
						}

					})
				})
			},

			//更新地址
			refreshLoaction() {
				this.getLoaction().then(res => {
					uni.showToast({
						icon: 'none',
						title: '更新定位成功'
					})
					this.flag = true
				})
			},

			//图片批量上传
			uploadImgs(files) {
				let promiseAll = files.map(item => {
					return new Promise((resolve, reject) => {
						uni.uploadFile({
							url: `${ROOTPATH}/api/nurse/upload-file`,
							header: {
								Authorization: `Bearer ${this.vuex_token}`
							},
							formData: {
								is_water: 1,
								address: this.form.address,
								coordinate: `${this.form.lng},${this.form.lat}`
							},
							filePath: item,
							name: 'file',
							success: (res1) => {
								resolve(res1)
							},
							fail: (err) => {
								reject(err)
							}
						})
					})
				})

				return Promise.all(promiseAll)
				// let res = await uni.chooseImage({
				// 	sourceType: ['camera']
				// })
				// if (res[1]) {
				// 	let promiseAll = res[1].tempFilePaths.map(item => {
				// 		console.log(`${ROOTPATH}/api/nurse/upload-file`);
				// 		return new Promise((resolve, reject) => {
				// 			uni.uploadFile({
				// 				url: `${ROOTPATH}/api/nurse/upload-file`,
				// 				header: {
				// 					Authorization: `Bearer ${this.vuex_token}`
				// 				},
				// 				filePath: item,
				// 				name: 'file',
				// 				success: (res1) => {
				// 					resolve(res1)
				// 				},
				// 				fail: (err) => {
				// 					reject(err)
				// 				}
				// 			})
				// 		})
				// 	})

				// 	return Promise.all(promiseAll)
				// } else {

				// 	return Promise.reject(res[0].errMsg)
				// }

			},

			//打卡
			clock(files, type) {
        if (this.isSubmitConfirm) {
          return
        }
        if (!this.form.lat || !this.form.lng) {
          uni.showToast({
            icon: 'none',
            title: '请重新获取定位信息'
          })
          return
        }
				let title;
				switch (type) {
					case 1:
						title = '签到成功'
						break;
					case 2:
						title = `第${this.detail.logs_count+1}次打卡成功`
						break;
					case 3:
						title = '签退成功'
						break;
					default:
						title = '操作成功'
				}
        this.isSubmitConfirm = true
				this.uploadImgs(files).then(res => {
					this.form.upload_list = res.map(item => {
						return {
							upload_id: JSON.parse(item.data).id
						}
					})
					this.form.type = type
					this.$u.api.processSave(this.form).then(res1 => {
            this.isSubmitConfirm = false
						uni.showToast({
							icon: 'success',
							title
						})
						this.$refs['imgUpload'].clearList()
						this.isShowImg = false
						this.getDeatil(this.id)

						if(res1.tip){
							this.tips = "用户服务次数已达到次数、总服务时长未满"
							this.isShowModal = true
						}
					}).catch(err => this.isSubmitConfirm = false)
				}).catch(err => this.isSubmitConfirm = false)
			},

			//保存服务项目
			saveSku() {
				return new Promise((resolve, reject) => {
					let temp1 = this.skuList.filter(item => {
						return item.isSelect
					})

					let temp2 = temp1.map(item => {
						return item.form
					})

					this.$u.api.nurseSave({
						id: this.id,
						sku_time_list: temp2
					}).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},

			//签到
			sign() {
				this.type = 1
				this.isShowImg = true
				//this.clock(1)
			},

			//过程打卡
			clockIn() {
				//验证是否有选择服务项目并填写
				// let flag = false
				// for (let i of this.skuList) {
				// 	if (i.isSelect && i.form.time) {
				// 		flag = true
				// 	}
				// }
				// if (!flag) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: `请选择并填写服务项目与时间`
				// 	})
				// 	return
				// }

				// this.saveSku().then(res => {
				// 	this.type = 2
				// 	this.isShowImg = true
				// }).catch(err => {
				// 	console.log(err);
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请重试'
				// 	})
				// })
				this.type = 2
				this.isShowImg = true
			},

			//签退前检查
			checkSignOut() {
        //验证打卡次数是否已满
        if (this.detail.logs_count < this.detail.product.process_total) {
          uni.showToast({
            icon: 'none',
            title: `请先完成${this.detail.product.process_total}次打卡，再签退。当前完成打卡次数${this.detail.logs_count}`
          })
          return
        }
        //验证是否有选择服务项目并填写
        let flag = false
        for (let i of this.skuList) {
          if (i.isSelect && i.form.time) {
            flag = true
          }
        }
        if (!flag) {
          uni.showToast({
            icon: 'none',
            title: `请选择并填写服务项目与时间`
          })
          return
        }
        //判断时间是否超出
        let useTotalTime = 0
        for (let i of this.skuList) {
          if (i.isSelect && i.form.time) {
            useTotalTime += Number(i.form.time)
          }
        }
        let totalTime =  this.$moment(new Date()).diff(this.$moment(this.detail.sign_in), 'minutes')
        if (useTotalTime <= (totalTime + 10) && useTotalTime > totalTime && this.detail.demand === 2) {
          uni.showToast({
            icon:'none',
            title:'请下次补足时间',
            duration:2000
          })
        } else if (useTotalTime <= totalTime){
        } else {
          this.tips="当前勾选的时间为"+useTotalTime+"分钟,实际服务时间为"+totalTime+"分钟。系统要求实际服务时间要大于您勾选的时间。";
          this.isShowModal = true
          return
        }
        uni.getLocation({
          type: 'gcj02',
          isHighAccuracy: true
        }).then(res => {
          if (res[1]) {
            //距离
            const distance = this.getMapDistance([res[1].latitude,res[1].longitude],this.detail.sign_in_loc.split(","))
            console.log('distance',distance)
            if (distance && this.detail.product?.product_type?.max_distance && distance > this.detail.product.product_type.max_distance) {
              this.isSignOutConfirm  = true
              this.tips = `当前签退位置距离签到位置超过${this.detail.product.product_type.max_distance}公里，确认要继续签退吗？`
              this.isShowModal = true

              return
            }

            this.signOut()
          }
          this.isSignOutConfirm = false
        })
			},
			//签退
			signOut() {
				this.saveSku().then(() => {
					this.type = 3
					this.isShowImg = true
				}).catch(err => {
					console.log(err);
					uni.showToast({
						icon: 'none',
						title: '请重试'
					})
				})
			}
		},
		computed: {
			ageComputed() {
				return function(idcard) {
					return getAgeByIdcard(idcard)
				}
			},
			addressFormat() {
				return function(addresses) {
					return addresses.filter(item => {
						item.default === 1
					})[0]?.address || addresses[0]?.address || '无'
				}
			},
			dateFormat() {
				return function(date, fmt = "YYYY-MM-DD") {
					if (date) {
						return moment(date).format(fmt)
					}
				}
			},
      serviceTime () {
        let flag = this.serviceTimeFlag;
        let totalSec = 0;
        if (this.detail.sign_out) {
          totalSec = moment(this.detail.sign_out).diff(moment(this.detail.sign_in),"seconds")
        } else {
          totalSec = moment().diff(moment(this.detail.sign_in),"seconds")
        }
        let sec = totalSec % 60
        let min = ((totalSec - sec) / 60) % 60
        let hour = (totalSec - sec - (min * 60)) / 60 / 60

        return `${hour > 0 ? (hour + '时') : ''}${min > 0 ? (min + '分') : ''}${sec}秒`
      },
			typeFormat() {
				return function(type) {
					let map = new Map([
						[1, "签到"],
						[2, "过程打卡"],
						[3, "签退"],
						[4, "更新定位"]
					])
					return map.get(type) || ''
				}
			}
		},
		onLoad(option) {
			this.getDeatil(option.id)
			this.id = option.id

		},
		onShow() {
			this.timer = setInterval(() => {
				this.time = new Date()
			}, 1000)
		},
		onHide() {
			clearInterval(this.timer)
		},
		mounted() {
			this.load()
			this.getLoaction()
		}
	}
</script>

<style scoped lang="scss">
	.user-info {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

		margin: 40rpx auto 0 auto;
		position: relative;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			padding-top: 34rpx;
			padding-bottom: 30rpx;

			.left {
				padding-left: 20rpx;
			}

			.center {
				flex: 1;

				padding-left: 24rpx;

				.name {
					height: 48rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					line-height: 24rpx;
				}

				.infos {
					display: flex;
					align-items: center;

					padding-top: 20rpx;

					.age {
						height: 34rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #A7AFBC;
						line-height: 34rpx;
					}

					.sex {
						width: 40rpx;
						height: 40rpx;
						background: #FDECEC;
						opacity: 0.5;
						font-size: 28rpx;
						font-weight: 500;
						color: #36596A;
						text-align: center;
						line-height: 40rpx;

						margin-left: 20rpx;
					}

					.organ {
						width: 140rpx;
						height: 40rpx;
						background: #F9F9F9;
						font-size: 28rpx;
						font-weight: 500;
						color: #36596A;
						line-height: 40rpx;
						text-align: center;

						margin-left: 20rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				padding-right: 20rpx;
			}
		}

		.line {
			width: 670rpx;
			height: 2rpx;
			border: 2rpx solid #EEEFF5;

			margin: 30rpx auto 0 auto;
		}

		.bottom {

			padding: 26rpx 0 34rpx 24rpx;
			position: relative;

			.bottom-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #36596A;

				&>view {
					padding-left: 16rpx;
				}
			}

			.client {
				@extend .bottom-item;
			}

			.address {
				@extend .bottom-item;

				padding-top: 18rpx;
			}

			.phone {
				@extend .bottom-item;

				padding-top: 18rpx;
			}
		}

		.re-location {
			display: flex;
			align-items: center;

			position: absolute;
			bottom: 36rpx;
			right: 20rpx;

			.text {
				height: 34rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #A7AFBC;
				line-height: 34rpx;

				padding-right: 8rpx;
			}
		}
	}

	.today-nursing {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

		margin: 20rpx auto 0 auto;

		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;


			padding: 24rpx 20rpx;
		}

		.line {
			width: 670rpx;
			height: 2rpx;
			border: 2rpx solid #EEEFF5;

			margin: 0 auto;
		}

		.table-title {
			display: flex;
			justify-content: space-between;

			&>view {
				text-align: center;
				width: 260rpx;

				padding-top: 24rpx;
			}
		}

		.content {

			padding: 14rpx 20rpx 24rpx 20rpx;

			.content-item {
				height: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				padding: 24rpx 0;
				padding-left: 10rpx;

				.checkbox {
					flex: 1
				}

				::v-deep .u-checkbox {
					width: 100% !important;
				}

				::v-deep .u-checkbox__label {
					width: 100% !important;

					padding-left: 16rpx;
				}

				.input {
					display: flex;
					align-items: center;

					&>view {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #36596A;
						line-height: 40rpx;

						padding-left: 20rpx;
					}
				}
			}
		}
	}

	.logs {
		@extend .today-nursing;

		&-content {

			padding: 24rpx 32rpx;
		}
	}

	.clock {
		display: flex;
		justify-content: space-evenly;

		margin-top: 48rpx;

		.btn {
			width: 190rpx;
			height: 190rpx;
			background: #1479FF;
			border-radius: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			position: relative;

			&::before {
				content: '';
				height: 220rpx;
				width: 220rpx;
				border-radius: 100%;
				background-color: rgba(20, 121, 255, 0.15);

				position: absolute;
				top: calc(50% - 110rpx);
				left: calc(50% - 110rpx);
			}

			.text-class {
				height: 46rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 46rpx;
			}

			.text1 {
				@extend .text-class;
			}

			.text2 {
        font-size: 30rpx;
				@extend .text-class;
			}
		}
	}

	.clock-info {
		width: 650rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #36596A;
		line-height: 40rpx;

		margin: 46rpx auto;
	}

	.u-order-address {
		color: rgb(140, 140, 140);
		font-size: 25rpx;
	}

	::v-deep .u-checkbox__icon-wrap--disabled--checked text {
		color: #1d5cba !important;
	}
</style>
