<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">
						<text>{{timeFormat(filters.time.start, 'yyyy年mm月dd日') || '开始'}}</text>
						<text class="u-p-l-10 u-p-r-10">至</text>
						<text>{{timeFormat(filters.time.end, 'yyyy年mm月dd日') || '结束'}}</text>

					</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: 43px;">
			<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">
						<view>
							<text>
								{{banci.switchvalue?'打印':'不打印'}}
							</text>
						</view>
						<view class="u-flex">
							<up-switch v-model="banci.switchvalue"></up-switch>
						</view>
					</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:80px;">
			<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="constantbox">
						<view class="constantboxitem">
							<view class="head">班次号</view>
							<view class="head">班次</view>
							<view class="head">交班人</view>
							<view class="head">开班时间</view>
							<view class="head">交班时间</view>
							<view class="head">订单数</view>
							<view class="head">订单金额(元)</view>
						</view>
						<view class="constantboxitem" v-for="(item,index) in tableData.data" :key="index"
							@click="toDetail(item)">
							<view class="head">{{item.dutyId|| '无'}}</view>
							<view class="head">班次</view>
							<view class="head">{{item.staffName || '无'}}</view>
							<view class="head">{{item.startTime|| '无'}}</view>
							<view class="head">{{item.endTime|| '无'}}</view>
							<view class="head">{{item.orderNum|| '无'}}</view>
							<view class="head">{{item.totalAmount|| '无'}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<up-loadmore :status="tableData.status" />
			<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> -->
			<my-button borderRadius="100rpx" 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,
		onReachBottom,
	} 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 {
		timeFormat
	} from '@/node_modules/uview-plus';
	import go from '@/commons/utils/go.js'
	import {
		tbHandover,
		handoverData
	} from '@/http/yskApi/pageWorkControl.js'

	function toDetail(item) {
		go.to('PAGES_WORK_HANDOVER_DETAIL', item)
	}

	function toSetting() {
		go.to('PAGES_WORK_SETTING')
	}

	const jiaoban = async () => {
		// if (banci.selItem === '') {
		// 	return uni.showToast({
		// 		title: '请选择班次',
		// 		icon: 'none'
		// 	})
		// }
		// go.to('PAGES_WORK_HANDOVER_CONFIRM')
		uni.showModal({
			title: '提示',
			content: '确认交班吗？',
			success: async (res) => {
				if (res.confirm) {
					await handoverData({
						isprintProduct: banci.switchvalue
					})
					uni.clearStorageSync()
					uni.reLaunch({
						url: '/pages/login/index'
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})

	}

	const query = reactive({
		createdAt: [],
		proName: '',
		cateId: '',
		sort: 'id,desc'
	})
	const tableData = reactive({
		data: [],
		page: 0,
		size: 15,
		total: 0,
		status: 'loadmore'
	})

	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: '',
		switchvalue: false
	})

	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: 1
	})

	// 切换tab
	function tabsChange(i) {
		console.log(i)
		tabs.current = i
		// 清除时间
		clearTime()
		if (tabs.current == 1) {
			resetHandle()
		} else {}
	}

	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) {
		filters.time.start = new Date(e.start).getTime()
		filters.time.end = new Date(e.end).getTime()
		console.log(filters);
		getTableData()
	}

	// 重置列表
	function resetHandle() {
		query.sort = 'id,desc'
		tableData.data = []
		tableData.page = 0
		tableData.size = 15
		tableData.total = 0
		getTableData()
	}
	// 列表
	const getTableData = async () => {
		tableData.status = 'loading';
		let urlData = null
		if (!filters.time.start) {
			urlData =
				`page=${tableData.page}&size=${tableData.size}&shopId=${uni.getStorageSync('shopId')}&sort=${query.sort}`
		} else {
			urlData =
				`page=${tableData.page}&size=${tableData.size}&shopId=${uni.getStorageSync('shopId')}&tradeDay=${timeFormat(filters.time.start,'yyyymmdd')}&tradeDay=${timeFormat(filters.time.end,'yyyymmdd')}&sort=${query.sort}`
		}
		let res = await tbHandover(urlData)
		tableData.total = res.totalElements
		if (tableData.page == 0 && res.content.length < 10) {
			tableData.data = res.content
			tableData.status = 'nomore'
			return false;
		} else {
			setTimeout(() => {
				tableData.data = [...tableData.data, ...res.content]
				if (tableData.data.length >= tableData.total) tableData.status = 'nomore';
				else tableData.status = 'loadmore';
			}, 500)
		}
	}

	onShow(() => {
		form.jiaobanTime = new Date()
		updateJiaoban()
		resetHandle()
	})
	onHide(() => {
		clearInterval(timer)
	})

	onReachBottom(() => {
		if (tableData.status != 'nomore') {
			tableData.page++
			getTableData()
		}
	})

	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;

		.constantbox {
			.constantboxitem {
				display: flex;

				.head {
					width: 200rpx;
					padding: 32rpx 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
				}

				.head:nth-child(4) {
					width: 300rpx;
				}

				.head:nth-child(5) {
					width: 300rpx;
				}
			}

			.constantboxitem:nth-child(even) {
				background: #fff;
			}

			.constantboxitem:nth-child(odd) {
				background: #F7F6FB;
			}

			.constantboxitem:nth-child(1) {
				background: #AEBAD2;
				color: #fff;
				font-size: 24rpx;
			}
		}

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