<template>
	<view class="top fixed-top bg-fff">
		<my-tabs :list="tabs.list" @change="tabsChange"></my-tabs>
		<view class="u-flex color-main u-m-t-32 " v-if="tabs.current===1">
			<view class="u-flex u-p-l-20 " @tap="showJiaobanPickerView">
				<view class=" u-flex u-row-between  ">
					<view>
						<text class="" v-if="filters.jiaobanSelItem===''">暂未选择</text>
						<text v-else>
							{{filters.jiaobanSelItem.name}}
						</text>
					</view>
					<view class="u-flex u-p-l-20 u-flex-1">
						<image src="/pageWorkControl/static/images/icon-arrow-down-fill.svg"
							class="icon-arrow-down-fill " mode=""></image>
					</view>
				</view>
			</view>
			<view class="u-flex u-p-l-20 u-flex-1 u-row-center">
				<view @tap="timeToggle">
					<view class=" u-font-24 color-main u-flex" v-if="filters.time.start&&filters.time.end">
						<uni-dateformat format="yyyy-MM-dd" :date="filters.time.start"></uni-dateformat>
						<text class="u-p-l-10 u-p-r-10">至</text>
						<uni-dateformat format="yyyy-MM-dd" :date="filters.time.end"></uni-dateformat>
						<!-- <view class="u-m-l-10 u-flex" @tap="clearTime">
							<uni-icons type="clear" size="18" :color="color.ColorMain"></uni-icons>
						</view> -->
					</view>
					<view class="" v-else>所有时间</view>
				</view>
				<view class="u-flex u-m-l-12">
					<image src="/pageWorkControl/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill "
						mode=""></image>
				</view>
			</view>
		</view>
	</view>
	<template v-if="tabs.current===0">
		<view class="color-333 u-font-28 min-page bg-gray default-box-padding" style="padding-top: 83px;">
			<view class="bg-fff border-r-12 default-box-padding">
				<view>
					<view class="font-bold">班次</view>

					<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom" @tap="showJiaobanPickerView">
						<view>
							<text class="color-999" v-if="banci.selItem===''">暂未选择</text>
							<text v-else>
								{{banci.selItem.name}}
							</text>
						</view>
						<view class="u-flex">
							<uni-icons type="right" color="#999" size="16"></uni-icons>
						</view>
					</view>
					<!-- <picker @change="banciChange" :value="banci.current" range-key="name" :range="banci.list">
						<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom">
							<view>
								<text class="color-999" v-if="banci.current===''">暂未选择</text>
								<text v-else>
									{{banci.list[banci.current].name}}
								</text>
							</view>
							<view class="u-flex">
								<uni-icons type="right" color="#999" size="16"></uni-icons>
							</view>
						</view>
					</picker> -->

				</view>
				<view class="u-m-t-24">
					<view class="font-bold">开班时间</view>
					<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom" @tap="jiaobanStartShow">
						<view>
							<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="form.kaibanTime"></uni-dateformat>
							<text></text>
						</view>
						<view class="u-flex">
							<uni-icons type="right" color="#999" size="16"></uni-icons>
						</view>
					</view>
				</view>
				<view class="u-m-t-24">
					<view class="font-bold">交班时间</view>
					<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom">
						<view>
							<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="form.jiaobanTime"></uni-dateformat>
							<text></text>
						</view>
						<!-- <view class="u-flex">
							<uni-icons type="right" color="#999" size="16"></uni-icons>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</template>
	<template v-if="tabs.current===1">
		<view class="color-333 u-font-28 min-page bg-gray default-box-padding" style="padding-top: 116px;">
			<scroll-view :scroll-x="true" class="bg-fff table u-text-center">
				<view class="bg-fff border-r-12  u-flex no-wrap u-col-top">
					<view class="">
						<view class="head">班次号</view>
						<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">10002</view>
					</view>
					<view class="">
						<view class="head">班次</view>
						<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">早班</view>
					</view>
					<view class="">
						<view class="head">交班人</view>
						<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">交班人</view>
					</view>
					<view class="">
						<view class="head">开班时间</view>
						<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">2024-05-29 11:15:18</view>
					</view>
					<view class="">
						<view class="head">交班时间</view>
						<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">2024-05-29 11:15:18</view>
					</view>
					<view class="">
						<view class="head">订单数</view>
						<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">0</view>
					</view>
					<view class="">
						<view class="head">订单金额（元）</view>
						<view class="item u-flex u-row-between" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">
							<text>0.00</text>
							<uni-icons type="right" color="#999" size="16"></uni-icons>
						</view>
					</view>
				</view>
			</scroll-view>
			<uni-load-more :status="table.status"></uni-load-more>
			<view style="height: 100px;"></view>
		</view>
	</template>

	<view class="u-fixed bottom u-flex bg-fff ">
		<view class="u-flex-1">
			<my-button bgColor="#333" color="#fff" borderRadius="100rpx 0 0 100rpx" shape="circle" plain type="primary"
				@tap="toSetting">设置</my-button>
		</view>
		<view class="u-flex-1">
			<my-button borderRadius="0 100rpx 100rpx 0" shape="circle" type="primary" @tap="jiaoban">开始交班</my-button>
		</view>
	</view>

	<!-- 交班开班时间选择 -->
	<my-date-pickerview @confirm="jiaobanPickerConfirm" :defaultTime="jiaobanDateIndex" :isArea="false"
		ref="jiaobanDatePicker"></my-date-pickerview>
	<!-- 交班记录时间筛选 -->
	<my-date-pickerview @confirm="datePickerConfirm" mode="date" ref="datePicker"></my-date-pickerview>
	<!-- 班次选择 -->
	<my-pickerview autoClear @confirm="banciConfirm" :showTitle="false" range-key="name" ref="jiaobanPickerView"
		:list="banci.list"></my-pickerview>
</template>

<script setup>
	import {
		onLoad,
		onReady,
		onHide,
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
		ref,
		watch
	} from 'vue';
	import myButton from '@/components/my-components/my-button';
	import myTabs from '@/components/my-components/my-tabs';
	import color from '@/commons/color.js';
	import myDatePickerview from '@/components/my-components/my-date-pickerview'
	import myPickerview from '@/components/my-components/my-pickerview'
	import go from '@/commons/utils/go.js'
	function toDetail(){
		go.to('PAGES_WORK_HANDOVER_DETAIL')
	}
	function toSetting() {
		go.to('PAGES_WORK_SETTING')
	}

	function jiaoban() {
		if (banci.selItem === '') {
			return  uni.showToast({
				title: '请选择班次',
				icon: 'none'
			})
		}
		go.to('PAGES_WORK_HANDOVER_CONFIRM')
	}


	const jiaobanDatePicker = ref(null)

	function jiaobanStartShow() {
		jiaobanDatePicker.value.open()
	}

	const jiaobanPickerView = ref(null)

	function showJiaobanPickerView() {
		jiaobanPickerView.value.open()
	}


	function jiaobanPickerConfirm(e) {
		form.kaibanTime = e
	}




	const form = reactive({
		kaibanTime: new Date(),
		jiaobanTime: new Date()
	})
	const jiaobanDateIndex = ref([
		form.kaibanTime.getFullYear(),
		form.kaibanTime.getMonth(),
		form.kaibanTime.getDate(),
		form.kaibanTime.getHours(),
		form.kaibanTime.getMinutes(),
		form.kaibanTime.getSeconds(),
	])



	let timer = null

	function updateJiaoban() {
		clearInterval(timer)
		timer = setInterval(() => {
			form.jiaobanTime = new Date()
		}, 1000)
	}


	const banci = reactive({
		list: [{
				name: '早班',
				value: 1
			},
			{
				name: '中班',
				value: 2
			},
			{
				name: '晚班',
				value: 3
			},
		],
		selItem: '',
		current: ''
	})

	function banciConfirm(e) {
		if (tabs.current) {
			filters.jiaobanSelItem = e[0]
		} else {
			banci.selItem = e[0]
		}
	}

	function banciChange(e) {
		banci.current = e.detail.value
	}


	const tabs = reactive({
		list: ['交班', '交班记录'],
		current: 0
	})

	function tabsChange(i) {
		tabs.current = i
	}


	const table = reactive({
		status: 'noMore'
	})


	const filters = reactive({
		jiaobanCurrent: '',
		jiaobanSelItem: '',
		time: {
			start: '',
			end: ''
		}
	})

	function clearTime() {
		filters.time.start = ''
		filters.time.end = ''
	}

	function timeToggle() {
		datePicker.value.toggle()
	}

	const datePicker = ref(null)

	function datePickerConfirm(e) {
		console.log(e);
		filters.time.start = e.start
		filters.time.end = e.end
	}

	function filterBanciChange(e) {
		filters.jiaobanCurrent = e.detail.value
	}

	onShow(() => {
		form.jiaobanTime = new Date()
		updateJiaoban()
	})
	onHide(() => {
		clearInterval(timer)
	})
	watch(() => tabs.current, (newval) => {
		if (newval) {
			clearInterval(timer)
			filters.jiaobanSelItem = ''
		} else {
			banci.selItem = ''
			updateJiaoban()
		}
	})
</script>

<style lang="scss" scoped>
	.min-page {}

	.fixed-top {
		padding: 32rpx 28rpx;
		z-index: 100;
	}

	.bottom {
		background-color: transparent;
		bottom: 84rpx;
		left: 28rpx;
		right: 28rpx;
	}

	.table {
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		overflow: hidden;
		font-size: 24rpx;

		.head {
			padding: 24rpx;
			background: #AEBAD2;
			color: #fff;
			font-size: 24rpx;
		}

		.item {
			padding: 24rpx;
		}

		.item:nth-of-type(2n+1) {
			background-color: rgb(249, 249, 249);
		}
	}
</style>