<template>
	<view v-if="flag&&flags">
		<view class="fixed-card" :style="openleft?{}:{right:`-34vw`}">
			<view class="cardbg">
				<image src="/static/index/newindex/states/cardbg.png" class="caimg"></image>
				<view class="left-open" @click="openleft = !openleft">
					<image  class="open-img" :src="openleft?'/static/index/newindex/states/lesd.png':'/static/index/newindex/states/risd.png'" />
				</view>
			</view>
			<view class="btn les" @click="swip(-1)" v-if="plsbuy.length>1">
				<image class="pao-img" :src="`/static/index/newindex/states/ris.png`"
					style="transform: rotate(180deg);" />
			</view>
			<view class="btn ris" @click="swip(1)" v-if="plsbuy.length>1">
				<image class="pao-img" :src="`/static/index/newindex/states/ris.png`" />
			</view>
			<view class="bots" v-if="plsbuy.length>1">
				<view v-for="(v,i) in plsbuy" :key='i' :class="current==i?'dot':''"
					:style="v?.chaoshitime?'background:red':''" @click="change({detail:{current:i}})"></view>
			</view>
			<swiper class="swiper" :circular="true" :indicator-dots="false" easing-function="easeInOutCubic"
				:autoplay="false" :interval="3000" :duration="500" :current="current" @change="change">
				<swiper-item v-for="(qcobj,i) in plsbuy" :key="i" class="swper">
					<view class="fixed-card-left">
						<image class="card-left-img" v-if="qcobj.izPackage=='Y' " src="/static/zlb.png"
							mode="aspectFill" />
						<image class="card-left-img" v-if="qcobj.izPackage=='N'"
							:src="qcobj?.previewFile? serverUrl + qcobj?.previewFile: `/static/index/newindex/wendu/2.png`"
							mode="aspectFill" />
						<view>
							{{qcobj.directiveName}}
						</view>
					</view>
					<view style="height: 78%;">
						<view class="big-time">
							<view>
								{{qcobj.startTime?.slice(11, 16) }}
								<!--  - {{qcobj.endTime?.slice(11, 16) }} -->
							</view>
							<view>
								<timeing v-if="current==i&&qcobj?.izStart=='Y'" :initTime="djstinme"
									:timeoutDuration="Number(qcobj.timeoutDuration)*60" @timeend="timeend"></timeing>
							</view>
						</view>
						<view class="names">
							{{ qcobj?.directiveName }}
						</view>
						<view class="icon-people">
							<image class="people-img" src="/static/index/newindex/leftmenu/iconleft.png" />
							<text v-if="qcobj.optType == 1" style="white-space: nowrap;">单人执行</text>
							<text v-if="qcobj.optType == 2" style="white-space: nowrap;">协助执行</text>

							<image style="margin-left: 1vw;" class="people-img"
								src="/static/index/newindex/leftmenu/iconright.png" />

							<text v-if="qcobj.optType == 1">{{qcobj.employeeName}}</text>
							<text v-if="qcobj.optType == 2">{{qcobj.optNames}}</text>
						</view>
						<view class="icon-button">
							<view class="" :class="qcobj.izStart=='N'?'button-right':'button-left'" @click="start()">
								开始服务
							</view>
							<view :class="(qcobj.izFinish=='N'&&qcobj.izStart=='Y')?'button-right':'button-left'"
								@click="end()">
								结束服务
							</view>
						</view>
					</view>

				</swiper-item>
			</swiper>
			
		</view>

		<tanchuang :show="open>0" font="是否结束服务指令？" @back="open = 0" @right="ends()"> </tanchuang>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, watch } from 'vue';
	import { queryOrderlist, startDirectiveServe, finishDirectiveServe, queryOrderInfoList } from '@/pages/procurement/api/lunpan.js'
	import { startOrder, endOrder, editSubPicPath, editSubMp4, queryEmpList, transferOrder, assistOrder } from '@/pages/NursingNew/component/doctorask/api/api.js'
	import timeing from './newgame/sxy-Timeing.vue'
	const flag = ref(false)
	const flags = ref(false)
	const qcobj = ref({})
	const openleft = ref(true)
	const open = ref(0);
	const zdcont = ref('');
	const serverUrl = ref(uni.getStorageSync('imagebase'))
	const emit = defineEmits(['start', 'end'])
	const form = reactive({
		pageNo: 1,
		pageSize: 10,
		employeeId: uni.getStorageSync('userInfo').employessId,
		nuId: uni.getStorageSync('nuId'),
		workType: 2
	})
	onMounted(() => {
		firstgetqueryCgdList()
	})
	const swip = (e) => {
		if (current.value == 0 && e == -1) {
			current.value = 4
			return
		}
		if (current.value == 4 && e == 1) {
			current.value = 0
			return
		}
		current.value += e;
	}
	const current = ref(0)
	const change = (e) => {
		current.value = e.detail.current;
		plsbuy.value.forEach((v, i) => {
			if (i != current.value && v.izPackage == 'Y') {
				v.flag = false
			}
		})
		if (plsbuy.value[current.value].izStart == 'Y' && plsbuy.value[current.value].izFinish == 'N') {
			timeacde()
		}
	}
	const timeend = () => {
		// 结束超时
		console.log('倒计时到了')
		plsbuy.value.splice(current.value, 1)
		firstgetqueryCgdList()
	}
	const djstinme = ref(0)
	const timeacde = () => {
		let obj = plsbuy.value[current.value];
		let timestampMs = new Date(obj.endTime).getTime();
		let times = new Date().getTime();
		let djs = timestampMs - times;
		// let timeendamp = timestampMs + (Number(plsbuy.value[current.value].timeoutDuration)*60);
		console.log(timestampMs, '结束时间戳')
		console.log(times, '当前时间戳')
		console.log(Math.round(djs / 1000), '倒计时时间戳')
		djstinme.value = Math.round(djs / 1000)
		if (djstinme.value < 0) {
			plsbuy.value[current.value].chaoshitime = true
		}
	}
	const plsbuy = ref([])
	const firstgetqueryCgdList = () => {
		if(!flags.value){return}
		form.nuId=uni.getStorageSync('nuId');
		queryOrderlist(form).then(res => {
			plsbuy.value = res.result.records
			if(plsbuy.value.length==0){
				flag.value = false;
			}
			plsbuy.value.forEach((item, i) => {
				
				if (item.izStart == 'Y' && flag.value == false) {
					openleft.value = true;
					flag.value = true;
					current.value = i;
					if (current.value > plsbuy.value.length - 1) {
						current.value += -1
						change({ detail: { current: current.value } })
					} else {
						change({ detail: { current: current.value } })
					}
				}
				let timestampMs = new Date(item.endTime).getTime();
				let times = new Date().getTime();
				let djs = timestampMs - times;
				if (djs < 0) {
					item.chaoshitime = true
				}
			})
			// clickLeftMenu(0,res.result.records[0])
		})
	}
	const clickLeftMenu = (index : any, item : object) => {
		queryOrderInfoList({ mainId: item.id }).then(res => {
			if (res.result.length > 0) {
				qcobj.value = res.result[0];
				openleft.value = qcobj.value.izStart == 'Y' ? true : false;
			} else {
				qcobj.value = {};
			}
		})
	}
	const start = () => {
		if (qcobj.value.izStart != 'N') { return }
		startOrder({ id: qcobj.value.id }).then(res => {
			if (res.success) {
				qcobj.value.izStart = 'Y';
				clickLeftMenu(0, { id: qcobj.value.mainId })
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		})
	}
	// const end = () => {
	//  if(qcobj.value.izFinish!='N'&&qcobj.value.izStart!='Y'){return}
	// 	finishDirectiveServe({ id: qcobj.value.id }).then(res => {
	// 		if (res.success) {
	// 			qcobj.value.izFinish = 'Y';
	// 			firstgetqueryCgdList()
	// 		} else {
	// 			uni.showToast({
	// 				icon: 'none',
	// 				title: res.message
	// 			})
	// 		}
	// 	})
	// }
	const end = () => {
		if (qcobj.value.izStart == 'Y' && qcobj.value.izFinish == 'N') {
			open.value = 3;
		}
	}
	const ends = () => {
		endOrder({ id: qcobj.value.id }).then(res => {
			if (res.success) {
				open.value = 0;
				firstgetqueryCgdList()
			} else {

			}
		})

	}
	defineExpose({
		firstgetqueryCgdList
	})
</script>

<style lang="less" scoped>
	.left-open {
		position: absolute;
		left: 0.75vw;
		top: 50%;
		transform: translateY(-50%);
		width: 0.5vw;
		height: 1.5vw;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.5s ease;

		.open-img {
			width: 0.5vw;
			height: 1.5vw;
		}
	}

	.fixed-card {
		position: fixed;
		right: 1vw;
		top: 2vh;
		width: 35vw;
		height: 17.5vw;
		border-radius: 1.5vw;
		transition: all 0.5s ease;
		z-index: 999;
		background:rgba(239, 246, 255, 0.6);

		.cardbg {
			width: 36.5vw;
			height: 18.5vw;
			position: absolute;
			top: -0.5vw;
			right: -0.5vw;
			.caimg{
				width: 100%;
				height: 100%;
			}
		}

		.bots {
			width: 15vw;
			position: absolute;
			height: 30rpx;
			bottom:2vw;
			left: 0;
			display: flex;
			justify-content: center;

			view {
				width: 1.3vw;
				height: 0.6vw;
				background: #DCDCDC;
				border-radius: 0.2vw;
				margin: 0.7vw;
			}

			.dot {
				background: #0193F4;
			}
		}

		.btn {
			width: 2.4vw;
			height: 2.4vw;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;

			image {
				width: 60%;
				height: 60%;
			}
		}

		.les {
			left: 0.5vw;
		}

		.ris {
			right: 0.5vw;
		}

		.swiper {
			width: 100%;
			height: 100%;

			.swper {
				width: 100%;
				height: 100%;
				position: relative;
				display: flex;
				align-items: center;
			}
		}

		.fixed-card-left {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 2vw;
			position: relative;
			top: -1vw;

			.card-left-img {
				width: 9vw;
				height: 8.7vw;
				margin-bottom: 0.5vw;
			}
		}

		.names {
			font-weight: 400;
			font-size: 1.5vw;
			color: #333333;
			margin-top: 1.4vw;
			padding-left: 1vw;
		}

		.big-time {
			font-weight: 800;
			font-size: 2.6vw;
			padding-left: 1vw;
			width: 18vw;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				display: flex;
				align-items: center;
			}
		}

		.icon-people {
			display: flex;
			margin: 0.3vw 0;
			color: #555555;
			width: 18vw;
			padding-left: 1vw;
			white-space: nowrap;

			.people-img {
				width: 1.5vw;
				height: 1.5vw;
				margin-right: 0.3vw;
				margin-top: 0.1vw;
			}
		}

		.icon-button {
			display: flex;
			margin-top: 1vw;
			font-size: 1.5vw;
			width: 18vw;
			justify-content: space-around;

			.button-left {
				width: 8vw;
				height: 3.3vw;
				background: linear-gradient(to bottom, #FFFFFF, #C8D0D9);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1.2vw;
				border: 1rpx solid #C7D2E4;
				color: #333333;

			}

			.button-right {
				width: 8vw;
				height: 3.3vw;
				background: linear-gradient(to bottom, #009DEF, #0076FF);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1.2vw;
				color: #fff;
			}
		}
	}
</style>