<template>
	<view class="date-range-selector">
		<u-subsection :list="dateRangeList" keyName="label" :current="selected" @change="handleSubsectionChange" />
		<uni-datetime-picker :value="internalDateRange" type="daterange" @change="handleDatePickerChange" />
	</view>
</template>

<script>
	import {
		getDateRange
	} from "@/utils/utils";

	export default {
		props: {
			// v-model
			value: {
				type: [Array, Object],
				required: true
			},
			// 日期范围按钮配置
			dateRangeList: {
				type: Array,
				default: () => [{
						label: "本日",
						value: "day"
					},
					{
						label: "本月",
						value: "month"
					}
				]
			},
			// 新增：控制返回类型（'array' 或 'object'）
			returnType: {
				type: String,
				default: "array", // 默认返回数组 ["2025-10-13", "2025-10-19"]
				validator: val => ["array", "object"].includes(val)
			}
		},
		data() {
			return {
				selected: 0,
				internalDateRange: this.value
			};
		},
		watch: {
			value(newVal) {
				if (JSON.stringify(newVal) !== JSON.stringify(this.internalDateRange)) {
					this.internalDateRange = newVal;
					this.resetSelectedIndex();
				}
			},
			internalDateRange(newVal) {
				this.$emit("input", newVal);
				this.$emit("subsection-change", newVal);
			}
		},
		methods: {
			handleSubsectionChange(index) {
				this.selected = index;
				const {
					value
				} = this.dateRangeList[index];

				// 判断返回类型，传入 asObject 参数
				const asObject = this.returnType === "object";
				this.internalDateRange = getDateRange(value, asObject);
			},
			handleDatePickerChange(newRange) {
				this.internalDateRange = newRange;
			},
			resetSelectedIndex() {
				const asObject = this.returnType === "object";

				const isPreset = this.dateRangeList.some((item, index) => {
					const range = getDateRange(item.value, asObject);
					return JSON.stringify(range) === JSON.stringify(this.internalDateRange);
				});

				if (!isPreset) {
					this.selected = 0;
				}
			}
		},
		created() {
			this.resetSelectedIndex();
		}
	};
</script>

<style scoped>
	.date-range-selector {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}
</style>