<template>
	<view>
		<view class="u-flex bg-fff u-p-l-28 u-p-r-28 u-row-between">
			<view class="u-rela time-item tranistion-2" @click="changeTimeDataSel(index)"
				:class="{active:timeData.sel==index}" v-for="(item,index) in timeData.list" :key="index">
				{{item.label}}
			</view>
			<view class="u-rela time-item tranistion-2" @click="changeTimeDataSel(-1)"
				:class="{active:timeData.sel==-1}">自定义</view>
		</view>

		<view class="u-m-t-2 bg-fff u-col-center u-flex u-p-l-28 u-p-r-28 u-p-t-30 u-row-between">
			<view class="status-item " @click="changeStatusSel(item.value)" :class="{active:statusData.sel==item.value}"
				v-for="(item,index) in statusData.list" :key="index">
				{{item.label}}
			</view>
			<view class="status-item u-flex" @click="moreShowOpen">
				<image src="@/pagesOrder/static/image/icon-search.svg" style="width: 38rpx;height: 30rpx;" mode="">
				</image>
			</view>
		</view>
		
		<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker" mode="all"></my-date-pickerview>
		<!-- 更多状态选择筛选 -->
		<up-popup :round="10" :show="statusData.moreShow" :closeable="true" @close="moreShowHide">
			<view class="u-text-center font-bold u-font-32 u-p-t-30">选择状态</view>
			<view style="height: 20rpx;"></view>
			<view class="u-p-30 all-list u-flex u-flex-wrap gap-20">
				<view class="all-list-item" :class="{active:statusItemIndex==statusData.allListSel}"
					@click="changeAllListSel(statusItemIndex,statusItem)"
					v-for="(statusItem,statusItemIndex) in statusData.allList" :key="statusItemIndex">
					{{statusItem.label}}
				</view>
			</view>
			<view class="u-flex u-p-t-30 u-p-b-30 u-p-l-20 u-p-r-20 gap-20">
				<up-button @click="moreShowHide">取消</up-button>
				<up-button type="primary" @click="statusConfirm">确定</up-button>
			</view>
		</up-popup>

	</view>
</template>

<script setup>
	import { reactive, ref, watch } from 'vue';
	import * as $time from '@/commons/utils/dayjs-time.js';

	const emits = defineEmits(['update:time', 'update:status','updateStatus'])

	const props = defineProps({
		time: {
			type: Array,
			default: () => []
		},
		status: {
			type: [String, Number],
			default: ''
		}
	})

	let datePicker = ref(null)
	// 示例使用
	const today = $time.getTodayTimestamps();
	const yesterday = $time.getYesterdayTimestamps();
	const thisWeek = $time.getThisWeekTimestamps();
	const thisMonth = $time.getThisMonthTimestamps();
	const thisLastMonth = $time.getThisLastMonthTimestamps()
	const timeData = reactive({
		list: [today, yesterday, thisWeek, thisMonth],
		sel: 0
	})

	const statusData = reactive({
		allList: uni.$dict.orderStatus,
		moreShow: false,
		allListSel: -1,
		list: [{
				label: '全部',
				value: ''
			},
			{
				label: '待支付',
				value: 'unpaid'
			},
			// {
			// 	label: '待完成',
			// 	value: ''
			// },
			{
				label: '已完成',
				value: 'done'
			},
			// {
			// 	label: '未支付',
			// 	value: 'unpaid'
			// },
			{
				label: '已退款',
				value: 'refund'
			}
		],
		sel: ''
	})

	function changeTimeDataSel(i) {
		timeData.sel = i
		if (i == -1) {
			datePicker.value.open()
		}
	}

	watch(() => timeData.sel, (newval) => {
		const data = timeData.list[newval]
		if (newval != -1) {
			emits('update:time', [data.start, data.end])
		}
	})

	function moreShowHide() {
		statusData.moreShow = false
	}

	function moreShowOpen() {
		statusData.moreShow = true
	}

	function changeStatusSel(i) {
		statusData.sel = i
		statusData.allListSel = -1
		emits('updateStatus', i)
	}

	function datePickerConfirm(e) {
		emits('update:time', [e.start, e.end])
	}

	function changeAllListSel(i,item) {
		statusData.allListSel = i
	}
	function statusConfirm(){
		const status = statusData.allList[statusData.allListSel].type
		statusData.sel = status
		emits('updateStatus',status)
		moreShowHide()
	}
</script>

<style lang="scss" scoped>
	.status-item {
		color: #666;
		transition: all .2s ease-in-out;
		padding-bottom: 24rpx;

		&.active {
			color: $my-main-color;
		}
	}

	.all-list-item {
		text-align: center;
		width: 156rpx;
		white-space: nowrap;
		color: #666;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		transition: all .2s ease-in-out;
		border: 1px solid #eee;

		&.active {
			color: $my-main-color;
			border-color: $my-main-color;
		}
	}

	.time-item {
		color: #666;
		padding-bottom: 20rpx;

		&::after {
			content: '';
			display: block;
			position: absolute;
			height: 4rpx;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
		}

		&.active {
			color: $my-main-color;
			// font-size: 32rpx;
			transform: scale(1.1);
			transform-origin: center;
			font-weight: 700;

			&::after {
				background: #318AFE;
			}
		}
	}

	.time-area {
		background: #E6F0FF;
		border-radius: 100px;
		padding: 10rpx 20rpx;
	}
</style>